get-shit-pretty 0.1.0 → 0.2.0

package/README.md

@@ -1,69 +1,173 @@
-# GSP — Get Shit Pretty
+<div align="center">
 
-A design engineering system for AI coding tools. GSP guides you through a phased design pipeline — from research to launch — using specialized prompts and agents.
+# GET SHIT PRETTY
 
-## Install
+**Design engineering for AI coding tools.**
+
+**Research, brand, design system, UI, specs, review, build, launch — from your terminal.**
+
+[![npm version](https://img.shields.io/npm/v/get-shit-pretty?style=for-the-badge&logo=npm&logoColor=white&color=CB3837)](https://www.npmjs.com/package/get-shit-pretty)
+[![npm downloads](https://img.shields.io/npm/dm/get-shit-pretty?style=for-the-badge&logo=npm&logoColor=white&color=CB3837)](https://www.npmjs.com/package/get-shit-pretty)
+[![GitHub stars](https://img.shields.io/github/stars/jubscodes/get-shit-pretty?style=for-the-badge&logo=github&color=181717)](https://github.com/jubscodes/get-shit-pretty)
+[![License](https://img.shields.io/badge/license-MIT-blue?style=for-the-badge)](LICENSE)
+
+<br>
 
 ```bash
 npx get-shit-pretty
 ```
 
-Or with flags:
+**Works on Mac, Windows, and Linux.**
 
-```bash
-# Claude Code (global)
-npx get-shit-pretty --claude --global
+<br>
 
-# All runtimes
-npx get-shit-pretty --all --global
+*"Vibe-coded apps work. They also all look the same. GSP fixes that."*
 
-# Uninstall
-npx get-shit-pretty --claude --global --uninstall
+<br>
+
+[Why GSP Exists](#why-gsp-exists) · [How It Works](#how-it-works) · [Commands](#commands) · [Agents & Prompts](#agents--prompts) · [AI Tool Support](#ai-coding-tool-support)
+
+</div>
+
+---
+
+## Why GSP Exists
+
+The gap between design and code is shrinking — but only from one direction.
+
+Figma ships Code Connect, Dev Mode, MCP servers. Design tools are learning to speak code. That bridge is being built.
+
+Coding tools aren't learning to speak design.
+
+You can vibe-code an entire app in an afternoon. It works. It also looks like every other vibe-coded app — the same shadcn components, the same layouts, the same sea of sameness. No research, no brand thinking, no system, no critique. AI coding tools are powerful builders with zero design process.
+
+AI didn't cause this. Skipping design thinking did.
+
+GSP brings design fundamentals into the tools developers already use. Research. Brand. Design systems. UI patterns. Accessibility. Critique. The process that makes design consistent — running in your terminal.
+
+For designers, it's the other direction. Code-first environments without giving up your process. Your design decisions become tokens, specs, and components — not a Figma file someone rebuilds from scratch.
+
+Both disciplines. Same pipeline. Same environment. Design engineering — not designers learning to code or developers learning to design, but both working through the same system.
+
+The missing half of the bridge.
+
+---
+
+## How It Works
+
+### 1. Start a Project
+
+```
+/gsp:new-project
 ```
 
-<details>
-<summary>Legacy install (bash)</summary>
+Answer questions about your product — what it does, who it's for, the vibe you're going for. GSP creates a design brief that guides everything downstream.
+
+**Creates:** `.design/BRIEF.md`
+
+---
+
+### 2. Research
 
-```bash
-git clone https://github.com/jubscodes/get-shit-pretty.git ~/get-shit-pretty
-cd ~/get-shit-pretty
-chmod +x install.sh
-./install.sh
+```
+/gsp:research
 ```
 
-</details>
+Analyzes design trends in your space — competitor patterns, emerging styles, what's working and what's not. Start with context, not guesses.
 
-## AI Coding Tool Support
+**Creates:** `.design/research/TRENDS.md`
 
-| Feature | Claude Code | OpenCode | Gemini CLI | Codex CLI |
-|---------|:-----------:|:--------:|:----------:|:---------:|
-| Slash commands | /gsp:command | /gsp-command | /gsp:command | $gsp-command |
-| Agents | Yes | Yes | Yes | Yes |
-| Prompts bundle | Yes | Yes | Yes | Yes |
-| Templates bundle | Yes | Yes | Yes | Yes |
-| References bundle | Yes | Yes | Yes | Yes |
-| Statusline | Yes | — | — | — |
-| Interactive install | Yes | Yes | Yes | Yes |
-| Global install | ~/.claude | ~/.config/opencode | ~/.gemini | ~/.codex |
-| Local install | .claude/ | .opencode/ | .gemini/ | .codex/ |
+---
 
-## Commands
+### 3. Brand
 
-| Command | Description |
-|---------|-------------|
-| `/gsp:new-project` | Initialize a design brief through guided Q&A |
-| `/gsp:research` | Analyze design trends for your industry |
-| `/gsp:brand` | Create brand identity (strategy, logo, color, type) |
-| `/gsp:system` | Build design system foundations + tokens |
-| `/gsp:design` | Design UI/UX screens and flows |
-| `/gsp:spec` | Generate Figma-ready specifications |
-| `/gsp:review` | Design critique + accessibility audit |
-| `/gsp:build` | Translate designs to production code |
-| `/gsp:launch` | Create marketing campaign assets |
-| `/gsp:progress` | Check project status — "How pretty are we?" |
-| `/gsp:help` | Show command reference |
+```
+/gsp:brand
+```
+
+Builds your complete identity — positioning, personality, logo directions, color palette, typography system. Your brand, not a default theme.
+
+**Creates:** `.design/brand/IDENTITY.md`
+
+---
+
+### 4. Design System
+
+```
+/gsp:system
+```
+
+Translates your brand into a functional design system — color scales, type scales, spacing, component foundations, and design tokens. Your system, in code.
+
+**Creates:** `.design/system/SYSTEM.md`, `tokens.json`
+
+---
+
+### 5. UI Design
+
+```
+/gsp:design
+```
+
+Designs your screens and interaction flows following Apple HIG patterns. Layout, navigation, states, responsive behavior — all documented with enough detail to build from.
+
+**Creates:** `.design/screens/SCREENS.md`
+
+---
+
+### 6. Implementation Specs
+
+```
+/gsp:spec
+```
+
+Maps your screen designs to your implementation target — shadcn/ui components, React Native Reusables, an existing design system, Figma specs, or lightweight code specs. Bridges design decisions to whatever UI framework your project uses.
+
+**Creates:** `.design/specs/SPECS.md`
+
+---
+
+### 7. Review
+
+```
+/gsp:review
+```
+
+Two parallel agents audit your designs:
+- **Design Critique** — Structured critique using Nielsen's 10 usability heuristics
+- **Accessibility Audit** — WCAG 2.2 AA compliance check
+
+If issues are found, loop back to fix before building.
+
+**Creates:** `.design/review/CRITIQUE.md`, `ACCESSIBILITY.md`
 
-## Pipeline
+---
+
+### 8. Build
+
+```
+/gsp:build
+```
+
+Translates reviewed designs into production-ready frontend code. Components, styles, interactions — built from your design system and tokens, not generic defaults.
+
+**Creates:** `.design/build/CODE.md`, `components/`
+
+---
+
+### 9. Launch
+
+```
+/gsp:launch
+```
+
+Creates marketing campaign assets — landing page copy, social media content, launch materials. Your product ships with a story, not just code.
+
+**Creates:** `.design/launch/CAMPAIGN.md`
+
+---
+
+### The Full Pipeline
 
 ```
 /gsp:new-project → BRIEF.md
@@ -76,7 +180,7 @@ chmod +x install.sh
        ↓
 /gsp:design      → .design/screens/SCREENS.md
        ↓
-/gsp:spec        → .design/specs/FIGMA-SPECS.md
+/gsp:spec        → .design/specs/SPECS.md
        ↓
 /gsp:review      → .design/review/CRITIQUE.md + ACCESSIBILITY.md
        ↓  (loop back if issues found)
@@ -87,25 +191,135 @@ chmod +x install.sh
 
 All artifacts live in `.design/` within your project directory.
 
-## Prompts
+---
+
+## Commands
+
+| Command | What it does |
+|---------|--------------|
+| `/gsp:new-project` | Initialize a design brief through guided Q&A |
+| `/gsp:research` | Analyze design trends for your industry |
+| `/gsp:brand` | Create brand identity (strategy, logo, color, type) |
+| `/gsp:system` | Build design system foundations + tokens |
+| `/gsp:design` | Design UI/UX screens and flows |
+| `/gsp:spec` | Generate implementation specifications |
+| `/gsp:review` | Design critique + accessibility audit |
+| `/gsp:build` | Translate designs to production code |
+| `/gsp:launch` | Create marketing campaign assets |
+| `/gsp:progress` | Check project status |
+| `/gsp:help` | Show command reference |
+
+---
+
+## Agents & Prompts
+
+GSP ships with 9 specialized agents, each modeled after a real design discipline:
+
+| Agent | Role |
+|-------|------|
+| **Design System Architect** | Complete design systems (Apple Principal Designer level) |
+| **Brand Identity Creator** | Full brand identities (Pentagram Creative Director level) |
+| **UI/UX Pattern Master** | App UI design following Apple HIG |
+| **Marketing Asset Factory** | Campaign asset libraries |
+| **Implementation Spec Engineer** | Implementation specifications for any UI target |
+| **Design Critique Partner** | Structured critiques using Nielsen's 10 heuristics |
+| **Design Trend Synthesizer** | Industry trend analysis and competitive research |
+| **Accessibility Auditor** | WCAG 2.2 AA compliance auditing |
+| **Design-to-Code Translator** | Design to production-ready frontend code |
+
+Each agent has deep reference material — Apple HIG patterns, Nielsen's heuristics, WCAG checklists, design token standards — baked into its prompts.
+
+---
+
+## AI Coding Tool Support
+
+GSP works across all major AI coding tools:
+
+| Feature | Claude Code | OpenCode | Gemini CLI | Codex CLI |
+|---------|:-----------:|:--------:|:----------:|:---------:|
+| Slash commands | `/gsp:command` | `/gsp-command` | `/gsp:command` | `$gsp-command` |
+| Agents | Yes | Yes | Yes | Yes |
+| Prompts | Yes | Yes | Yes | Yes |
+| Templates | Yes | Yes | Yes | Yes |
+| References | Yes | Yes | Yes | Yes |
+| Statusline | Yes | — | — | — |
+| Global install | `~/.claude` | `~/.config/opencode` | `~/.gemini` | `~/.codex` |
+| Local install | `.claude/` | `.opencode/` | `.gemini/` | `.codex/` |
+
+---
+
+## Install
+
+```bash
+npx get-shit-pretty
+```
+
+The installer prompts you to choose:
+1. **Runtime** — Claude Code, OpenCode, Gemini, Codex, or all
+2. **Location** — Global (all projects) or local (current project only)
+
+<details>
+<summary><strong>Non-interactive install</strong></summary>
+
+```bash
+# Claude Code
+npx get-shit-pretty --claude --global
+npx get-shit-pretty --claude --local
 
-GSP bundles 9 specialized design prompts:
+# OpenCode
+npx get-shit-pretty --opencode --global
 
-1. **Design System Architect** — Complete design systems (Apple Principal Designer)
-2. **Brand Identity Creator** — Full brand identities (Pentagram Creative Director)
-3. **UI/UX Pattern Master** — App UI design (Apple HIG)
-4. **Marketing Asset Factory** — Campaign asset libraries
-5. **Figma Auto-Layout Expert** — Figma-ready specifications
-6. **Design Critique Partner** — Structured critiques (Nielsen's 10)
-7. **Design Trend Synthesizer** — Industry trend analysis
-8. **Accessibility Auditor** — WCAG 2.2 AA compliance
-9. **Design-to-Code Translator** — Design to production code
+# Gemini CLI
+npx get-shit-pretty --gemini --global
+
+# Codex CLI
+npx get-shit-pretty --codex --global
+
+# All runtimes
+npx get-shit-pretty --all --global
+```
+
+</details>
+
+<details>
+<summary><strong>Uninstall</strong></summary>
+
+```bash
+npx get-shit-pretty --claude --global --uninstall
+npx get-shit-pretty --opencode --global --uninstall
+npx get-shit-pretty --codex --global --uninstall
+```
+
+</details>
+
+<details>
+<summary><strong>Legacy install (bash)</strong></summary>
+
+```bash
+git clone https://github.com/jubscodes/get-shit-pretty.git ~/get-shit-pretty
+cd ~/get-shit-pretty
+chmod +x install.sh
+./install.sh
+```
+
+</details>
+
+---
 
 ## Requirements
 
 - An AI coding tool: [Claude Code](https://claude.ai/claude-code), [OpenCode](https://opencode.ai), [Gemini CLI](https://github.com/google-gemini/gemini-cli), or [Codex CLI](https://github.com/openai/codex)
-- GitHub CLI (`gh`) for repo creation
+
+---
 
 ## License
 
-MIT
+MIT License. See [LICENSE](LICENSE) for details.
+
+---
+
+<div align="center">
+
+**Your code works. GSP makes it yours.**
+
+</div>

package/agents/gsp-brand-strategist.md

@@ -19,10 +19,11 @@ Use trend insights (if available) to ensure the identity feels current while rem
 1. **Absorb context** — Read BRIEF.md for company, industry, audience, personality. Read TRENDS.md for market positioning opportunities.
 2. **Define strategy** — Brand story, archetype, voice matrix, messaging hierarchy
 3. **Explore visual directions** — 3 distinct logo concepts that each express the strategy differently
-4. **Build color system** — Full color palette with Hex, RGB, Pantone, CMYK, contrast ratios, dark mode, and strategic rationale
-5. **Define typography** — Primary and secondary typefaces with scale and usage rules
-6. **Specify imagery** — Photography, illustration, and iconography style
-7. **Apply** — Show brand in context across key applications
+4. **Build color system** — Define primary, secondary, and accent hex colors with strategic rationale
+5. **Generate palettes** — Use the [tints.dev](https://tints.dev) API by [Simeon Griggs](https://github.com/SimeonGriggs/tints.dev) to generate 11-stop Tailwind palettes for each brand color. Fetch `https://tints.dev/api/{name}/{hex}` (hex without #). Store results in `.design/brand/palettes.json` with OKLCH values (stops 50–950). Include Hex, RGB, Pantone, CMYK, contrast ratios, and dark mode mapping in IDENTITY.md.
+6. **Define typography** — Primary and secondary typefaces with scale and usage rules
+7. **Specify imagery** — Photography, illustration, and iconography style
+8. **Apply** — Show brand in context across key applications
 
 ## Quality Standards
 - Every decision needs strategic rationale ("We chose X because Y")

package/agents/gsp-design-engineer.md

@@ -8,7 +8,14 @@ color: magenta
 <role>
 You are a GSP design engineer spawned by `/gsp:build`.
 
-Act as a Vercel Design Engineer. Your job is to convert the Figma specifications and design system into production-ready frontend code — components, layouts, accessibility, animations, and styling.
+Act as a Vercel Design Engineer. Your job is to convert the implementation specifications and design system into production-ready frontend code — components, layouts, accessibility, animations, and styling.
+
+You adapt your approach based on the `implementation_target`:
+- **`shadcn`** — Use shadcn/ui primitives, install via `npx shadcn@latest add`, extend with custom variants
+- **`rn-reusables`** — Use React Native Reusables, install via `npx @react-native-reusables/cli add`, configure NativeWind
+- **`existing`** — Build on the existing design system in the codebase, follow its patterns
+- **`figma` / `code`** — Derive component structure from specs or screen designs
+- **`skip` (no SPECS.md)** — Build directly from SCREENS.md + SYSTEM.md, derive component architecture yourself
 
 Write real, copy-paste-ready code. Not pseudocode. Not "implementation left as exercise." Production code.
 </role>
@@ -16,7 +23,7 @@ Write real, copy-paste-ready code. Not pseudocode. Not "implementation left as e
 <methodology>
 ## Translation Process
 
-1. **Map component hierarchy** — From specs, define the component tree with props, state, and data flow
+1. **Map component hierarchy** — From specs (or screens if spec was skipped), define the component tree with props, state, and data flow
 2. **Implement foundations** — Design tokens as CSS variables or Tailwind config, theme setup, global styles
 3. **Build components** — One file per component with full implementation
 4. **Add accessibility** — ARIA roles, keyboard handlers, focus management, screen reader support

package/agents/gsp-spec-engineer.md

@@ -1,6 +1,6 @@
 ---
 name: gsp-spec-engineer
-description: Converts screen designs into Figma-ready specifications. Spawned by /gsp:spec.
+description: Converts screen designs into implementation specifications. Spawned by /gsp:spec.
 tools: Read, Write, Bash
 color: magenta
 ---
@@ -8,38 +8,114 @@ color: magenta
 <role>
 You are a GSP spec engineer spawned by `/gsp:spec`.
 
-Act as a Figma Design Ops Specialist. Your job is to convert the screen designs into precise Figma-ready specifications — frame structure, auto-layout, component architecture, prototype flows, and dev handoff documentation.
+Act as an Implementation Spec Engineer. Your job is to convert screen designs into precise implementation specifications — mapping design decisions to the project's UI framework, component architecture, token integration, and dev-ready documentation.
 
-Specs should be detailed enough for a designer to build pixel-perfect Figma files without guessing.
+Your output adapts based on the `implementation_target` from `.design/config.json`.
 </role>
 
 <methodology>
-## Spec Process
+## Spec Process (adapts per target)
 
-1. **Structure frames** — Page organization, frame hierarchy, naming convention
-2. **Define grids and constraints** — Per-frame grid specs, constraint rules, responsive behavior
-3. **Specify auto-layout** — Every component: direction, padding (top/right/bottom/left), spacing, alignment, resizing behavior
-4. **Architect components** — Variants, properties, boolean toggles, slot definitions
-5. **Map tokens** — Connect design system tokens to Figma token format
-6. **Define prototype flows** — Triggers, animations, transitions, timing
-7. **Prepare handoff** — CSS mapping, export formats, naming conventions
+1. **Analyze screens** — Parse SCREENS.md for all components, layouts, and interactions
+2. **Map to target** — Translate design components to the implementation target's primitives
+3. **Define architecture** — Component hierarchy, props, state, composition patterns
+4. **Map tokens** — Connect design system tokens to the target's theming format
+5. **Specify behavior** — Interactions, transitions, responsive rules
+6. **Prepare handoff** — Target-specific installation, setup, and implementation notes
+
+## Implementation Targets
+
+### When `figma`:
+- Frame structure, page organization, naming convention
+- Per-frame grid specs, constraint rules, responsive behavior
+- Auto-layout per component: direction, padding, spacing, alignment, resizing
+- Component architecture with variants, properties, boolean toggles, slots
+- Design tokens mapped to Figma token format
+- Prototype flows: triggers, animations, transitions, timing
+- Dev handoff: CSS mapping, export formats, naming conventions
+
+### When `shadcn`:
+- Map each screen component to shadcn/ui primitives (Button, Card, Dialog, etc.)
+- Define variant overrides and custom props per component
+- Map GSP design tokens to shadcn CSS variables (`--primary`, `--secondary`, `--muted`, etc.)
+- Specify which shadcn components to install (`npx shadcn@latest add ...`)
+- Define composition patterns (how primitives combine into screen layouts)
+- Note any custom components needed beyond shadcn
+- Include tailwind.config extensions for custom tokens
+
+### When `rn-reusables`:
+- Map each screen component to React Native Reusables primitives (reusables.dev — the RN port of shadcn/ui)
+- Define variant overrides and custom props per component
+- Map GSP design tokens to RN Reusables CSS variables / NativeWind theme config
+- Specify which reusables to install (`npx @react-native-reusables/cli add ...`)
+- Define composition patterns for RN screens (Stack, Tabs, navigation structure)
+- Handle platform differences (iOS vs Android styling, safe areas, gestures)
+- Note any custom native components needed beyond reusables
+
+### When `existing`:
+- Read the existing design system from the codebase (component files, token files, theme config)
+- Map GSP design decisions to existing components and tokens
+- Identify gaps (components/tokens that exist in GSP design but not in the codebase DS)
+- Define adaptation strategy for gaps (extend existing? create new?)
+- Include file paths to existing components being referenced
+
+### When `code`:
+- Component architecture with props, state, data flow
+- Token-to-CSS-variable mapping
+- Responsive rules and breakpoint behavior
+- No tool-specific specs (no Figma frames, no shadcn primitives)
+- Framework-agnostic component contracts
 
 ## Quality Standards
-- Every component must have complete auto-layout specs (no ambiguity)
-- Variants cover all states from design system
+- Every component must have complete specs for the target (no ambiguity)
 - Token mapping is complete and consistent
-- Prototype flows cover all user journeys from SCREENS.md
-- Dev handoff includes CSS for every unique element
+- All user journeys from SCREENS.md are covered
+- Responsive behavior is specified per breakpoint
 </methodology>
 
 <output>
-Write specs to `.design/specs/FIGMA-SPECS.md`:
+Write specs to `.design/specs/SPECS.md`:
 
+### When `figma`:
 1. **Frame Structure** — Page names, frame hierarchy, naming convention
 2. **Grid & Constraints** — Per-breakpoint grid specs, constraint rules
-3. **Auto-Layout Specs** — Per-component: direction, padding, spacing, alignment, horizontal/vertical resizing
+3. **Auto-Layout Specs** — Per-component: direction, padding, spacing, alignment, resizing
 4. **Component Architecture** — Variants table, properties, boolean toggles, slots
 5. **Design Tokens** — Figma token mapping (colors, text styles, effects)
 6. **Prototype Flows** — Flow name, trigger, animation type, duration, easing
 7. **Dev Handoff** — CSS mapping, export specs, naming conventions, accessibility annotations
+
+### When `shadcn`:
+1. **Component Mapping** — Screen component → shadcn primitive mapping table
+2. **Install Manifest** — `npx shadcn@latest add` commands for all needed components
+3. **Variant Overrides** — Custom variants, props, and extensions per component
+4. **Token Mapping** — GSP tokens → shadcn CSS variables (`--primary`, `--secondary`, etc.)
+5. **Composition Patterns** — How primitives combine into screen layouts
+6. **Custom Components** — Components not covered by shadcn, with architecture specs
+7. **Tailwind Extensions** — Custom theme values for `tailwind.config`
+
+### When `rn-reusables`:
+1. **Component Mapping** — Screen component → RN Reusables primitive mapping table
+2. **Install Manifest** — `npx @react-native-reusables/cli add` commands
+3. **Variant Overrides** — Custom variants, props, and extensions per component
+4. **Token Mapping** — GSP tokens → NativeWind theme config / CSS variables
+5. **Composition Patterns** — Navigation structure (Stack, Tabs), screen layouts
+6. **Platform Specs** — iOS vs Android differences, safe areas, gestures
+7. **Custom Components** — Native components needed beyond reusables
+
+### When `existing`:
+1. **Component Mapping** — GSP design component → existing codebase component
+2. **Token Mapping** — GSP tokens → existing theme/token values
+3. **Gap Analysis** — Components and tokens in design but not in codebase
+4. **Adaptation Strategy** — Per gap: extend existing, create new, or substitute
+5. **File Reference** — Paths to all existing components and tokens being used
+6. **Integration Notes** — How new components fit into existing architecture
+
+### When `code`:
+1. **Component Architecture** — Hierarchy tree with props, state, and data flow
+2. **Token Mapping** — Design tokens → CSS custom properties
+3. **Responsive Specs** — Breakpoints, layout shifts, component adaptations
+4. **Interaction Specs** — Triggers, state transitions, animation descriptions
+5. **Accessibility Specs** — ARIA roles, keyboard navigation, focus management
+6. **Implementation Notes** — Key decisions, patterns, and constraints
 </output>

package/agents/gsp-system-architect.md

@@ -16,7 +16,7 @@ The system should be production-ready: every value specified, every state define
 <methodology>
 ## System Building Process
 
-1. **Extract foundations from identity** — Map brand colors to semantic system, establish type scale from brand typography
+1. **Extract foundations from identity** — Map brand colors to semantic system using the tints.dev palettes from `.design/brand/palettes.json` (generated by [tints.dev](https://tints.dev) by [Simeon Griggs](https://github.com/SimeonGriggs/tints.dev)). Use the 11-stop OKLCH scales as the color foundation for tokens. Establish type scale from brand typography
 2. **Define grid and spacing** — 12-column grid, 8px base spacing system
 3. **Build component library** — 30+ components with all states, anatomy, usage rules
 4. **Export tokens** — Machine-readable JSON following W3C Design Tokens format

package/agents/gsp-ui-designer.md

@@ -11,6 +11,8 @@ You are a GSP UI designer spawned by `/gsp:design`.
 Act as a Senior Apple UI Designer. Your job is to design the complete UI for the project — screens, flows, interactions, and responsive behavior — using the established design system and following Apple HIG principles.
 
 Design for real users with real goals. Every screen should solve a specific problem.
+
+When an **Existing Components** inventory is provided (for `shadcn`, `rn-reusables`, `existing`, or `code` targets), incorporate existing components into your designs and include a Component Plan in your output.
 </role>
 
 <methodology>
@@ -22,6 +24,7 @@ Design for real users with real goals. Every screen should solve a specific prob
 4. **Design 8 core screens** — Each with wireframe description, component usage, interactions, and all states
 5. **Specify accessibility** — WCAG compliance, VoiceOver order, Dynamic Type behavior
 6. **Define micro-interactions** — Meaningful animations that communicate state changes
+7. **Build component plan** — When existing components inventory is provided, annotate which components to reuse, refactor, or create new
 
 ## Quality Standards
 - Every screen needs all 4 states: default, empty, loading, error
@@ -47,5 +50,10 @@ Write screens to `.design/screens/SCREENS.md`:
    - Accessibility notes (VoiceOver order, focus management)
 5. **Micro-interactions** — Table of trigger → animation → duration → easing
 6. **Responsive Behavior** — Mobile, tablet, desktop breakpoint adaptations
-7. **Designer's Notes** — Key decisions and rationale
+7. **Component Plan** (when `implementation_target` is not `figma`):
+   - **Reuse** — Existing components used as-is
+   - **Refactor** — Existing components that need changes (with what changes)
+   - **New (shared)** — New components needed across multiple screens
+   - **New (local)** — Screen-specific components
+8. **Designer's Notes** — Key decisions and rationale
 </output>

package/bin/install.js

@@ -755,14 +755,23 @@ function install(isGlobal, runtime = 'claude') {
 
   // ── Statusline (Claude Code only) ──
   if (runtime === 'claude') {
+    const hooksDest = path.join(targetDir, 'hooks');
+    fs.mkdirSync(hooksDest, { recursive: true });
+
+    // Copy GSP statusline
     const statuslineSrc = path.join(src, 'scripts', 'gsp-statusline.js');
     if (fs.existsSync(statuslineSrc)) {
-      const hooksDest = path.join(targetDir, 'hooks');
-      fs.mkdirSync(hooksDest, { recursive: true });
       let content = fs.readFileSync(statuslineSrc, 'utf8');
       content = content.replace(/'\.claude'/g, getConfigDirFromHome(runtime, isGlobal));
       fs.writeFileSync(path.join(hooksDest, 'gsp-statusline.js'), content);
-      console.log(`  ${green}+${reset} Installed statusline hook`);
+      console.log(`  ${green}+${reset} Installed GSP statusline`);
+    }
+
+    // Copy dispatcher (routes to GSP or GSD based on project type)
+    const dispatcherSrc = path.join(src, 'scripts', 'statusline-dispatcher.js');
+    if (fs.existsSync(dispatcherSrc)) {
+      fs.copyFileSync(dispatcherSrc, path.join(hooksDest, 'statusline-dispatcher.js'));
+      console.log(`  ${green}+${reset} Installed statusline dispatcher`);
     }
   }
 
@@ -776,8 +785,8 @@ function install(isGlobal, runtime = 'claude') {
   const settings = readSettings(settingsPath);
 
   const statuslineCommand = isGlobal
-    ? `node "${targetDir.replace(/\\/g, '/')}/hooks/gsp-statusline.js"`
-    : `node ${dirName}/hooks/gsp-statusline.js`;
+    ? `node "${targetDir.replace(/\\/g, '/')}/hooks/statusline-dispatcher.js"`
+    : `node ${dirName}/hooks/statusline-dispatcher.js`;
 
   return { settingsPath, settings, statuslineCommand, runtime };
 }
@@ -866,12 +875,14 @@ function uninstall(isGlobal, runtime = 'claude') {
     }
   }
 
-  // Remove statusline hook
-  const statuslineHook = path.join(targetDir, 'hooks', 'gsp-statusline.js');
-  if (fs.existsSync(statuslineHook)) {
-    fs.unlinkSync(statuslineHook);
-    removedCount++;
-    console.log(`  ${green}+${reset} Removed statusline hook`);
+  // Remove statusline hooks
+  for (const hook of ['gsp-statusline.js', 'statusline-dispatcher.js']) {
+    const hookPath = path.join(targetDir, 'hooks', hook);
+    if (fs.existsSync(hookPath)) {
+      fs.unlinkSync(hookPath);
+      removedCount++;
+      console.log(`  ${green}+${reset} Removed ${hook}`);
+    }
   }
 
   // Clean up settings.json (statusline only — no hooks to clean)
@@ -881,7 +892,7 @@ function uninstall(isGlobal, runtime = 'claude') {
     let modified = false;
 
     if (settings.statusLine && settings.statusLine.command &&
-        settings.statusLine.command.includes('gsp-statusline')) {
+        (settings.statusLine.command.includes('gsp-statusline') || settings.statusLine.command.includes('statusline-dispatcher'))) {
       delete settings.statusLine;
       modified = true;
       console.log(`  ${green}+${reset} Removed GSP statusline from settings`);