@ifi/oh-pi-skills 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ifiok Jr.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@ifi/oh-pi-skills",
+  "version": "0.2.1",
+  "description": "On-demand skill packs for pi: web-search, debug-helper, git-workflow, and more.",
+  "keywords": [
+    "pi-package"
+  ],
+  "pi": {
+    "skills": [
+      "./skills"
+    ]
+  },
+  "files": [
+    "skills",
+    "README.md"
+  ],
+  "license": "MIT"
+}

package/skills/claymorphism/SKILL.md

@@ -0,0 +1,127 @@
+---
+name: claymorphism
+description:
+  Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with
+  large radii, dual inner shadows, and offset outer shadows.
+version: 1.0.0
+tags: [design, css, ui, claymorphism]
+---
+
+# Claymorphism Design Spec
+
+## 3 Core Elements
+
+1. **Large Radius** — Generous `border-radius` (20–50px) for a puffy, inflated look
+2. **Dual Inner Shadows** — Light inset from top-left + dark inset from bottom-right to simulate 3D
+   clay surface
+3. **Offset Outer Shadow** — Directional `box-shadow` offset (not centered) to ground the element
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+```css
+@import "references/tokens.css";
+
+.clay-card {
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-lg);
+  box-shadow: var(--clay-shadow);
+  color: var(--clay-text);
+}
+```
+
+## Component Examples
+
+### Card
+
+```css
+.clay-card {
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-lg);
+  box-shadow: var(--clay-shadow);
+  padding: 1.5rem;
+  color: var(--clay-text);
+}
+```
+
+### Button
+
+```css
+.clay-btn {
+  background: var(--clay-bg-button);
+  border: none;
+  border-radius: var(--clay-radius-pill);
+  box-shadow: var(--clay-shadow);
+  padding: 0.75rem 1.5rem;
+  color: var(--clay-text);
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+.clay-btn:hover {
+  box-shadow: var(--clay-shadow-elevated);
+}
+.clay-btn:active {
+  box-shadow: var(--clay-shadow-pressed);
+}
+```
+
+### Input
+
+```css
+.clay-input {
+  background: var(--clay-bg);
+  border: none;
+  border-radius: var(--clay-radius);
+  box-shadow: var(--clay-shadow-pressed);
+  padding: 0.75rem 1rem;
+  color: var(--clay-text);
+}
+.clay-input:focus {
+  outline: 2px solid var(--clay-accent);
+  outline-offset: 2px;
+}
+```
+
+### Toggle
+
+```css
+.clay-toggle {
+  width: 56px;
+  height: 30px;
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-pill);
+  box-shadow: var(--clay-shadow-pressed);
+}
+.clay-toggle-knob {
+  width: 24px;
+  height: 24px;
+  background: var(--clay-bg);
+  border-radius: 50%;
+  box-shadow: var(--clay-shadow);
+  transition: transform 0.2s;
+}
+```
+
+## Dark Mode Notes
+
+- Dark mode reduces inner highlight intensity (`rgba(255,255,255,0.05)` vs `0.6`) to avoid glowing
+  artifacts
+- Outer shadow opacity increases to maintain depth on dark backgrounds
+- Background colors shift to warm dark tones — avoid pure black to preserve the clay feel
+- All dark tokens are defined in `[data-theme="dark"]` in `tokens.css`
+
+## Accessibility Notes
+
+- Ensure **contrast ratio ≥ 4.5:1** for text — clay backgrounds are muted, verify against
+  `--clay-text`
+- Provide visible `:focus` outlines since clay shadows alone don't indicate focus
+- Use `prefers-contrast: more` to flatten shadows and increase text contrast
+
+```css
+@media (prefers-contrast: more) {
+  .clay-card {
+    box-shadow: 0 0 0 2px var(--clay-text);
+  }
+}
+```

package/skills/claymorphism/references/tokens.css

@@ -0,0 +1,52 @@
+:root {
+  /* Backgrounds — soft, muted pastels */
+  --clay-bg: #f0e6db;
+  --clay-bg-card: #e8ddd4;
+  --clay-bg-button: #d4c4b0;
+  --clay-accent: #c4a882;
+
+  /* Radius — large, rounded, puffy */
+  --clay-radius: 20px;
+  --clay-radius-lg: 32px;
+  --clay-radius-pill: 50px;
+
+  /* Shadows — dual inner + offset outer */
+  --clay-shadow:
+    8px 8px 16px rgba(0, 0, 0, 0.12),
+    inset -4px -4px 8px rgba(0, 0, 0, 0.08),
+    inset 4px 4px 8px rgba(255, 255, 255, 0.6);
+  --clay-shadow-elevated:
+    12px 12px 24px rgba(0, 0, 0, 0.15),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.1),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.7);
+  --clay-shadow-pressed:
+    2px 2px 6px rgba(0, 0, 0, 0.1),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.12),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.5);
+
+  /* Text */
+  --clay-text: #4a3f35;
+  --clay-text-muted: #8a7e72;
+}
+
+/* Dark mode */
+[data-theme="dark"] {
+  --clay-bg: #2a2520;
+  --clay-bg-card: #352f28;
+  --clay-bg-button: #443c33;
+  --clay-accent: #6b5d4f;
+  --clay-shadow:
+    8px 8px 16px rgba(0, 0, 0, 0.35),
+    inset -4px -4px 8px rgba(0, 0, 0, 0.25),
+    inset 4px 4px 8px rgba(255, 255, 255, 0.05);
+  --clay-shadow-elevated:
+    12px 12px 24px rgba(0, 0, 0, 0.4),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.3),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.06);
+  --clay-shadow-pressed:
+    2px 2px 6px rgba(0, 0, 0, 0.3),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.35),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.04);
+  --clay-text: #d4c8bc;
+  --clay-text-muted: #8a7e72;
+}

package/skills/context7/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: context7
+description:
+  Search and query up-to-date documentation for any programming library via Context7 API. Use when
+  you need current docs, code examples, or API references for libraries and frameworks.
+---
+
+# Context7
+
+Search for libraries and query their documentation via the Context7 API.
+
+## Search Libraries
+
+```bash
+{baseDir}/search.js "library name" "what you need help with"
+```
+
+Example:
+
+```bash
+{baseDir}/search.js "react" "hooks for state management"
+```
+
+Returns matching libraries with Context7-compatible IDs for use with the docs tool.
+
+## Query Documentation
+
+```bash
+{baseDir}/docs.js "/org/project" "your question"
+```
+
+Example:
+
+```bash
+{baseDir}/docs.js "/websites/react_dev" "useEffect cleanup"
+```
+
+Use the library ID from search results. Returns relevant documentation and code examples.

package/skills/context7/docs.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+const [libraryId, query] = process.argv.slice(2);
+if (!libraryId || !query) { console.error("Usage: docs.js <libraryId> <query>"); process.exit(1); }
+
+const res = await fetch("https://mcp.context7.com/mcp", {
+  method: "POST",
+  headers: { "Content-Type": "application/json", "Accept": "application/json, text/event-stream" },
+  body: JSON.stringify({ jsonrpc: "2.0", id: 1, method: "tools/call", params: { name: "query-docs", arguments: { libraryId, query } } })
+});
+const data = await res.json();
+if (data.error) { console.error("Error:", data.error.message); process.exit(1); }
+console.log(data.result.content[0].text);

package/skills/context7/search.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+const [libraryName, query = libraryName] = process.argv.slice(2);
+if (!libraryName) { console.error("Usage: search.js <libraryName> [query]"); process.exit(1); }
+
+const res = await fetch("https://mcp.context7.com/mcp", {
+  method: "POST",
+  headers: { "Content-Type": "application/json", "Accept": "application/json, text/event-stream" },
+  body: JSON.stringify({ jsonrpc: "2.0", id: 1, method: "tools/call", params: { name: "resolve-library-id", arguments: { query, libraryName } } })
+});
+const data = await res.json();
+if (data.error) { console.error("Error:", data.error.message); process.exit(1); }
+console.log(data.result.content[0].text);

package/skills/debug-helper/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: debug-helper
+description:
+  Debug assistant for error analysis, log interpretation, and performance profiling. Use when user
+  encounters errors, crashes, or performance issues.
+---
+
+# Debug Helper
+
+Systematic debugging workflow.
+
+## Error Analysis
+
+1. **Read the error** — Full stack trace and error message
+2. **Locate** — Find the source file and line
+   ```bash
+   # Search for the error origin
+   grep -rn "ErrorClass\|error_function" src/
+   ```
+3. **Context** — Read surrounding code (±30 lines)
+4. **Reproduce** — Identify minimal reproduction steps
+5. **Root cause** — Trace the data flow to find where it goes wrong
+6. **Fix** — Minimal change that addresses the root cause
+7. **Verify** — Run the failing case to confirm the fix
+
+## Log Analysis
+
+1. Read the log file or output
+2. Identify patterns: timestamps, error levels, request IDs
+3. Correlate events across log lines
+4. Summarize: what happened, when, and why
+
+## Performance Profiling
+
+1. **Measure** — Get baseline numbers first
+   ```bash
+   time <command>
+   ```
+2. **Profile** — Use language-appropriate tools:
+   - Node.js: `--prof`, `clinic.js`
+   - Python: `cProfile`, `py-spy`
+   - Go: `pprof`
+3. **Identify** — Find the hotspot (usually 1-2 functions)
+4. **Optimize** — Fix the bottleneck
+5. **Verify** — Measure again, compare with baseline

package/skills/git-workflow/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: git-workflow
+description:
+  Git workflow assistant for branching, commits, PRs, and conflict resolution. Use when user asks
+  about git strategy, branch management, or PR workflow.
+---
+
+# Git Workflow
+
+Help with Git operations and workflow best practices.
+
+## Capabilities
+
+### Branch Strategy
+
+```bash
+# Check current state
+git branch -a
+git log --oneline -20
+git status
+```
+
+Recommend branching strategy based on project:
+
+- **Solo**: main + feature branches
+- **Team**: main + develop + feature/fix branches
+- **Release**: GitFlow (main/develop/release/hotfix)
+
+### Commit Messages
+
+Follow Conventional Commits:
+
+```
+feat(scope): add new feature
+fix(scope): fix bug description
+refactor(scope): restructure code
+docs(scope): update documentation
+test(scope): add/update tests
+chore(scope): maintenance tasks
+```
+
+### PR Workflow
+
+1. `git diff main --stat` — Review changes
+2. Generate PR title and description
+3. Suggest reviewers based on changed files (`git log --format='%an' -- <files>`)
+
+### Conflict Resolution
+
+1. `git diff --name-only --diff-filter=U` — Find conflicted files
+2. Read each conflicted file
+3. Understand both sides of the conflict
+4. Resolve with minimal changes preserving intent from both sides
+
+### Interactive Rebase
+
+Guide through `git rebase -i` for cleaning up history before PR.

package/skills/glassmorphism/SKILL.md

@@ -0,0 +1,147 @@
+---
+name: glassmorphism
+description:
+  Glassmorphism design system skill. Use when building frosted-glass UI components with blur,
+  transparency, and layered depth effects.
+version: 1.0.0
+tags: [design, css, ui, glassmorphism]
+---
+
+# Glassmorphism Design Spec
+
+## 4 Core Elements
+
+1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4`
+2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect
+3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges
+4. **Shadow** — Soft layered `box-shadow` for depth separation from background
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+Use CSS custom properties from `tokens.css` for consistent theming:
+
+```css
+@import "references/tokens.css";
+
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  box-shadow: var(--glass-shadow);
+}
+```
+
+## Component Examples
+
+### Card
+
+```css
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  box-shadow: var(--glass-shadow);
+  padding: 1.5rem;
+}
+```
+
+### Navbar
+
+```css
+.glass-nav {
+  background: var(--glass-bg-heavy);
+  backdrop-filter: var(--glass-blur-strong);
+  -webkit-backdrop-filter: var(--glass-blur-strong);
+  border-bottom: var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+```
+
+### Modal Overlay
+
+```css
+.glass-modal-backdrop {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+.glass-modal {
+  background: var(--glass-bg-heavy);
+  backdrop-filter: var(--glass-blur-strong);
+  -webkit-backdrop-filter: var(--glass-blur-strong);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius-lg);
+  box-shadow: var(--glass-shadow-elevated);
+}
+```
+
+### Button
+
+```css
+.glass-btn {
+  background: var(--glass-bg-light);
+  backdrop-filter: var(--glass-blur-light);
+  -webkit-backdrop-filter: var(--glass-blur-light);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  transition: background 0.2s;
+}
+.glass-btn:hover {
+  background: var(--glass-bg);
+}
+```
+
+## Browser Compatibility
+
+| Feature              | Chrome | Firefox | Safari          | Edge |
+| -------------------- | ------ | ------- | --------------- | ---- |
+| `backdrop-filter`    | 76+    | 103+    | 9+ (`-webkit-`) | 79+  |
+| `rgba()` backgrounds | All    | All     | All             | All  |
+
+- Always include `-webkit-backdrop-filter` for Safari support
+- Firefox <103: use `@supports` fallback with solid semi-transparent bg
+- Fallback pattern:
+
+```css
+.glass-card {
+  background: rgba(255, 255, 255, 0.85); /* fallback */
+}
+@supports (backdrop-filter: blur(1px)) {
+  .glass-card {
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+  }
+}
+```
+
+## Accessibility Notes
+
+- Ensure **contrast ratio ≥ 4.5:1** for text over glass surfaces — test against all possible
+  backgrounds
+- Provide `prefers-reduced-transparency` media query to disable blur/transparency for users who need
+  it
+- Avoid placing critical text on highly transparent surfaces without a fallback
+- Use `prefers-contrast: more` to increase border opacity and reduce transparency
+
+```css
+@media (prefers-reduced-transparency: reduce) {
+  .glass-card {
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: none;
+  }
+}
+@media (prefers-contrast: more) {
+  .glass-card {
+    background: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+  }
+}
+```

package/skills/glassmorphism/references/tokens.css

@@ -0,0 +1,32 @@
+:root {
+  /* Backgrounds */
+  --glass-bg-light: rgba(255, 255, 255, 0.08);
+  --glass-bg: rgba(255, 255, 255, 0.15);
+  --glass-bg-heavy: rgba(255, 255, 255, 0.25);
+
+  /* Blur */
+  --glass-blur-light: blur(8px);
+  --glass-blur: blur(16px);
+  --glass-blur-strong: blur(32px);
+
+  /* Border */
+  --glass-border: 1px solid rgba(255, 255, 255, 0.18);
+
+  /* Radius */
+  --glass-radius: 12px;
+  --glass-radius-lg: 20px;
+
+  /* Shadow */
+  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* Dark theme overrides */
+[data-theme="dark"] {
+  --glass-bg-light: rgba(255, 255, 255, 0.04);
+  --glass-bg: rgba(255, 255, 255, 0.08);
+  --glass-bg-heavy: rgba(255, 255, 255, 0.14);
+  --glass-border: 1px solid rgba(255, 255, 255, 0.12);
+  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+  --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.4);
+}

package/skills/liquid-glass/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: liquid-glass
+description:
+  Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass
+  morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light
+  mode, and animation specs.
+---
+
+# Liquid Glass Design System
+
+Apple-inspired translucent glass UI with depth, refraction, and ambient light response.
+
+## Core Principles
+
+1. **Translucency** — Surfaces reveal layered content beneath via backdrop blur
+2. **Depth** — Elements float on distinct z-layers with realistic shadows
+3. **Ambient Response** — Glass tints shift based on underlying content color
+4. **Minimal Chrome** — Borders are subtle; shape and blur define boundaries
+5. **Motion** — Transitions feel physical: spring-based, with inertia
+
+## Usage
+
+Import the token file in your CSS:
+
+```css
+@import "references/tokens.css";
+```
+
+## CSS Tokens Reference
+
+All tokens are defined in `references/tokens.css`. Key categories:
+
+| Category          | Prefix            | Example                |
+| ----------------- | ----------------- | ---------------------- |
+| Glass backgrounds | `--lg-bg-*`       | `--lg-bg-primary`      |
+| Blur              | `--lg-blur-*`     | `--lg-blur-md`         |
+| Borders           | `--lg-border-*`   | `--lg-border-color`    |
+| Shadows           | `--lg-shadow-*`   | `--lg-shadow-elevated` |
+| Radius            | `--lg-radius-*`   | `--lg-radius-lg`       |
+| Animation         | `--lg-duration-*` | `--lg-duration-normal` |
+
+## Component Patterns
+
+### Glass Card
+
+```css
+.glass-card {
+  background: var(--lg-bg-primary);
+  backdrop-filter: blur(var(--lg-blur-md));
+  -webkit-backdrop-filter: blur(var(--lg-blur-md));
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-lg);
+  box-shadow: var(--lg-shadow-elevated);
+  transition: transform var(--lg-duration-normal) var(--lg-easing-spring);
+}
+
+.glass-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--lg-shadow-high);
+}
+```
+
+### Glass Toolbar
+
+```css
+.glass-toolbar {
+  background: var(--lg-bg-toolbar);
+  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
+  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
+  border-bottom: 1px solid var(--lg-border-subtle);
+}
+```
+
+### Glass Button
+
+```css
+.glass-btn {
+  background: var(--lg-bg-interactive);
+  backdrop-filter: blur(var(--lg-blur-sm));
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-md);
+  transition: all var(--lg-duration-fast) var(--lg-easing-spring);
+}
+
+.glass-btn:active {
+  transform: scale(0.97);
+  background: var(--lg-bg-pressed);
+}
+```
+
+### Glass Modal Overlay
+
+```css
+.glass-overlay {
+  background: var(--lg-bg-scrim);
+  backdrop-filter: blur(var(--lg-blur-xl));
+}
+
+.glass-modal {
+  background: var(--lg-bg-elevated);
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-xl);
+  box-shadow: var(--lg-shadow-high);
+}
+```
+
+## Dark / Light Mode
+
+Tokens auto-switch via `prefers-color-scheme`. Light mode uses white-tinted glass; dark mode uses
+dark-tinted glass with higher blur to maintain readability.
+
+```css
+/* Force a mode on a subtree */
+.light-glass {
+  color-scheme: light;
+}
+.dark-glass {
+  color-scheme: dark;
+}
+```
+
+## Animations
+
+Use spring-based easing for physical feel:
+
+```css
+/* Entry */
+@keyframes glass-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.glass-animate-in {
+  animation: glass-enter var(--lg-duration-normal) var(--lg-easing-spring) both;
+}
+```
+
+## Accessibility
+
+- Ensure `contrast-ratio ≥ 4.5:1` for text over glass surfaces
+- Respect `prefers-reduced-motion` — disable blur animations, use opacity-only transitions
+- Provide `prefers-contrast: high` overrides that replace translucent backgrounds with solid ones

package/skills/liquid-glass/references/tokens.css

@@ -0,0 +1,81 @@
+/* Liquid Glass Design Tokens */
+
+:root {
+  color-scheme: light dark;
+
+  /* Blur */
+  --lg-blur-sm: 8px;
+  --lg-blur-md: 16px;
+  --lg-blur-lg: 32px;
+  --lg-blur-xl: 48px;
+
+  /* Saturation */
+  --lg-saturate: 1.8;
+
+  /* Radius */
+  --lg-radius-sm: 8px;
+  --lg-radius-md: 12px;
+  --lg-radius-lg: 16px;
+  --lg-radius-xl: 24px;
+
+  /* Shadows */
+  --lg-shadow-subtle: 0 1px 3px rgba(0,0,0,0.08);
+  --lg-shadow-elevated: 0 4px 16px rgba(0,0,0,0.1);
+  --lg-shadow-high: 0 8px 32px rgba(0,0,0,0.15);
+
+  /* Animation */
+  --lg-duration-fast: 150ms;
+  --lg-duration-normal: 300ms;
+  --lg-duration-slow: 500ms;
+  --lg-easing-spring: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Light mode (default) */
+  --lg-bg-primary: rgba(255,255,255,0.72);
+  --lg-bg-elevated: rgba(255,255,255,0.82);
+  --lg-bg-toolbar: rgba(255,255,255,0.65);
+  --lg-bg-interactive: rgba(255,255,255,0.5);
+  --lg-bg-pressed: rgba(255,255,255,0.35);
+  --lg-bg-scrim: rgba(0,0,0,0.25);
+  --lg-border-color: rgba(255,255,255,0.45);
+  --lg-border-subtle: rgba(0,0,0,0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --lg-bg-primary: rgba(30,30,30,0.65);
+    --lg-bg-elevated: rgba(40,40,40,0.75);
+    --lg-bg-toolbar: rgba(25,25,25,0.6);
+    --lg-bg-interactive: rgba(255,255,255,0.1);
+    --lg-bg-pressed: rgba(255,255,255,0.06);
+    --lg-bg-scrim: rgba(0,0,0,0.5);
+    --lg-border-color: rgba(255,255,255,0.12);
+    --lg-border-subtle: rgba(255,255,255,0.06);
+    --lg-shadow-subtle: 0 1px 3px rgba(0,0,0,0.3);
+    --lg-shadow-elevated: 0 4px 16px rgba(0,0,0,0.4);
+    --lg-shadow-high: 0 8px 32px rgba(0,0,0,0.5);
+  }
+}
+
+@media (prefers-contrast: high) {
+  :root {
+    --lg-bg-primary: rgba(255,255,255,0.95);
+    --lg-bg-elevated: rgba(255,255,255,0.98);
+    --lg-border-color: rgba(0,0,0,0.3);
+  }
+}
+
+@media (prefers-contrast: high) and (prefers-color-scheme: dark) {
+  :root {
+    --lg-bg-primary: rgba(20,20,20,0.95);
+    --lg-bg-elevated: rgba(25,25,25,0.98);
+    --lg-border-color: rgba(255,255,255,0.3);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --lg-duration-fast: 0ms;
+    --lg-duration-normal: 0ms;
+    --lg-duration-slow: 0ms;
+  }
+}

package/skills/neubrutalism/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: neubrutalism
+description:
+  Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid
+  shadows, high saturation colors, and minimal border radius.
+version: 1.0.0
+tags: [design, css, ui, neubrutalism, brutalism]
+---
+
+# Neubrutalism Design Spec
+
+## Core Principles
+
+1. **Thick Borders** — Bold `3–5px solid` black outlines on all elements
+2. **Offset Solid Shadows** — Hard-edge `box-shadow` with zero blur (e.g. `5px 5px 0 #000`)
+3. **High Saturation Colors** — Vivid, punchy fills: pinks, yellows, blues, greens
+4. **Minimal Radius** — `0–8px` border-radius; sharp or barely rounded corners
+5. **Flat Aesthetic** — No gradients, no blur, no transparency
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+```css
+@import "references/tokens.css";
+
+.nb-card {
+  background: var(--nb-yellow);
+  border: var(--nb-border-thick);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow);
+}
+```
+
+## Component Examples
+
+### Card
+
+```css
+.nb-card {
+  background: var(--nb-white);
+  border: var(--nb-border-thick);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow);
+  padding: 1.5rem;
+}
+```
+
+### Button
+
+```css
+.nb-btn {
+  background: var(--nb-yellow);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow-sm);
+  padding: 0.6rem 1.4rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight);
+  cursor: pointer;
+  transition:
+    transform 0.1s,
+    box-shadow 0.1s;
+}
+.nb-btn:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--nb-shadow);
+}
+.nb-btn:active {
+  transform: translate(3px, 3px);
+  box-shadow: none;
+}
+```
+
+### Navbar
+
+```css
+.nb-nav {
+  background: var(--nb-bg);
+  border-bottom: var(--nb-border-thick);
+  padding: 1rem 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+```
+
+### Input
+
+```css
+.nb-input {
+  background: var(--nb-white);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow-sm);
+  padding: 0.6rem 1rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight-body);
+}
+.nb-input:focus {
+  outline: none;
+  box-shadow: var(--nb-shadow);
+}
+```
+
+### Badge
+
+```css
+.nb-badge {
+  background: var(--nb-pink);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  padding: 0.2rem 0.8rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight);
+  font-size: 0.85rem;
+}
+```
+
+## Typography
+
+- Use bold, geometric sans-serif fonts (Space Grotesk, Inter, etc.)
+- Headings: `font-weight: 700`, `letter-spacing: -0.02em`
+- Body: `font-weight: 500`
+- Uppercase sparingly for labels/badges
+
+```css
+h1,
+h2,
+h3 {
+  font-family: var(--nb-font-heading);
+  font-weight: var(--nb-font-weight);
+  letter-spacing: var(--nb-letter-spacing);
+}
+body {
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight-body);
+}
+```
+
+## Accessibility Notes
+
+- Thick borders provide strong visual boundaries — good for low-vision users
+- Ensure color contrast ≥ 4.5:1 for text on colored backgrounds
+- Active/hover states use `transform` shifts — provide `prefers-reduced-motion` fallback
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  .nb-btn:hover,
+  .nb-btn:active {
+    transform: none;
+  }
+}
+```

package/skills/neubrutalism/references/tokens.css

@@ -0,0 +1,44 @@
+:root {
+  /* Borders */
+  --nb-border: 3px solid #000;
+  --nb-border-thick: 5px solid #000;
+
+  /* Shadows (offset solid, no blur) */
+  --nb-shadow-sm: 3px 3px 0 #000;
+  --nb-shadow: 5px 5px 0 #000;
+  --nb-shadow-lg: 8px 8px 0 #000;
+
+  /* Radius */
+  --nb-radius: 4px;
+  --nb-radius-lg: 8px;
+
+  /* Colors — high saturation */
+  --nb-pink: #ff6b9d;
+  --nb-yellow: #ffd43b;
+  --nb-blue: #4dabf7;
+  --nb-green: #51cf66;
+  --nb-orange: #ff922b;
+  --nb-purple: #cc5de8;
+  --nb-red: #ff6b6b;
+  --nb-white: #fff;
+  --nb-black: #000;
+  --nb-bg: #f5f0e8;
+
+  /* Typography */
+  --nb-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --nb-font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --nb-font-weight: 700;
+  --nb-font-weight-body: 500;
+  --nb-letter-spacing: -0.02em;
+}
+
+[data-theme="dark"] {
+  --nb-border: 3px solid #fff;
+  --nb-border-thick: 5px solid #fff;
+  --nb-shadow-sm: 3px 3px 0 #fff;
+  --nb-shadow: 5px 5px 0 #fff;
+  --nb-shadow-lg: 8px 8px 0 #fff;
+  --nb-bg: #1a1a2e;
+  --nb-black: #fff;
+  --nb-white: #1a1a2e;
+}

package/skills/quick-setup/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: quick-setup
+description:
+  Detect project type and generate .pi/ configuration. Use when setting up pi for a new project or
+  when user asks to initialize pi config.
+---
+
+# Quick Setup
+
+Analyze the current project and generate appropriate `.pi/` configuration.
+
+## Steps
+
+1. **Detect project type** by examining files:
+   - `package.json` → Node.js/TypeScript
+   - `requirements.txt` / `pyproject.toml` → Python
+   - `go.mod` → Go
+   - `Cargo.toml` → Rust
+   - `pom.xml` / `build.gradle` → Java
+   - `Makefile` / `CMakeLists.txt` → C/C++
+
+2. **Detect frameworks** (React, Vue, Next.js, Django, FastAPI, Gin, etc.)
+
+3. **Detect existing tooling** (ESLint, Prettier, pytest, etc.)
+
+4. **Generate `.pi/` directory**:
+
+```
+.pi/
+├── settings.json      # Project-specific settings
+└── AGENTS.md          # Project context for the agent
+```
+
+5. **Generate AGENTS.md** with:
+   - Project stack description
+   - Build/test/lint commands (from package.json scripts, Makefile, etc.)
+   - Code conventions detected from config files
+   - Directory structure overview
+
+6. **Generate settings.json** with:
+   - Appropriate thinking level for project complexity
+   - Relevant skills enabled
+
+## Output
+
+Show the generated files and ask user to confirm before writing.

package/skills/web-fetch/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: web-fetch
+description:
+  Fetch a web page and extract readable text content. Use when user needs to retrieve or read a web
+  page.
+---
+
+# web-fetch
+
+Fetch a web page and extract readable text content.
+
+## Usage
+
+```bash
+{baseDir}/fetch.js <url> [--raw]
+```
+
+- `<url>` — URL to fetch
+- `--raw` — Output raw HTML instead of extracted text
+
+## Examples
+
+```bash
+{baseDir}/fetch.js https://example.com
+{baseDir}/fetch.js https://example.com --raw
+```

package/skills/web-fetch/fetch.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+
+const args = process.argv.slice(2);
+const raw = args.includes('--raw');
+const url = args.find(a => !a.startsWith('--'));
+
+if (!url) { console.error('Usage: fetch.js <url> [--raw]'); process.exit(1); }
+
+const res = await fetch(url);
+const html = await res.text();
+
+if (raw) { console.log(html); } else {
+  const text = html
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/<style[\s\S]*?<\/style>/gi, '')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&#(\d+);/g, (_, n) => String.fromCharCode(n))
+    .replace(/[ \t]+/g, ' ')
+    .replace(/\n\s*\n/g, '\n')
+    .trim();
+  console.log(text);
+}

package/skills/web-search/SKILL.md

@@ -0,0 +1,19 @@
+---
+name: web-search
+description:
+  Web search via DuckDuckGo. Use when the user needs to look up current information online.
+---
+
+# web-search
+
+Web search via DuckDuckGo. Use when the user needs to look up current information online.
+
+## Usage
+
+```bash
+{baseDir}/search.js "query terms"
+{baseDir}/search.js -n 10 "query terms"
+```
+
+- `-n <count>` — number of results to return (default: 5)
+- Returns title, URL, and snippet for each result.

package/skills/web-search/search.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+const args = process.argv.slice(2);
+let n = 5, query;
+
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === '-n' && args[i + 1]) { n = parseInt(args[++i], 10); }
+  else { query = args[i]; }
+}
+
+if (!query) { console.error('Usage: search.js [-n count] "query"'); process.exit(1); }
+
+const res = await fetch(`https://html.duckduckgo.com/html/?q=${encodeURIComponent(query)}`, {
+  headers: { 'User-Agent': 'Mozilla/5.0' }
+});
+const html = await res.text();
+
+const results = [];
+const blockRe = /<a rel="nofollow" class="result__a" href="([^"]*)"[^>]*>([\s\S]*?)<\/a>[\s\S]*?<a class="result__snippet"[^>]*>([\s\S]*?)<\/a>/g;
+let m;
+while ((m = blockRe.exec(html)) && results.length < n) {
+  const url = decodeURIComponent(m[1].replace(/^\/\/duckduckgo\.com\/l\/\?uddg=/, '').replace(/&amp;rut=.*$/, '').replace(/&rut=.*$/, ''));
+  const title = m[2].replace(/<[^>]*>/g, '').trim();
+  const snippet = m[3].replace(/<[^>]*>/g, '').trim();
+  results.push({ title, url, snippet });
+}
+
+if (!results.length) { console.log('No results found.'); }
+else { results.forEach((r, i) => console.log(`${i + 1}. ${r.title}\n   ${r.url}\n   ${r.snippet}\n`)); }