get-shit-pretty 0.1.1 → 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/commands/gsp/brand.md

@@ -51,17 +51,43 @@ The agent should deliver:
 6. Brand applications
 7. Brand book structure
 
-## Step 3: Write output
+## Step 3: Generate color palettes via tints.dev
+
+For each brand color defined in the identity (primary, secondary, accent), generate a full 11-stop Tailwind palette using the [tints.dev](https://tints.dev) API by [Simeon Griggs](https://github.com/SimeonGriggs/tints.dev):
+
+```
+WebFetch: https://tints.dev/api/{colorName}/{hexWithout#}
+```
+
+Example: For primary color `#2522FC` → fetch `https://tints.dev/api/primary/2522FC`
+
+The API returns OKLCH values for stops 50–950. Store the raw palettes in `.design/brand/palettes.json` with this structure:
+
+```json
+{
+  "$schema": "tints.dev",
+  "$generator": "https://tints.dev by Simeon Griggs (https://github.com/SimeonGriggs/tints.dev)",
+  "primary": { "50": "oklch(...)", "100": "oklch(...)", ... "950": "oklch(...)" },
+  "secondary": { ... },
+  "accent": { ... }
+}
+```
+
+Also generate palette preview links for the user:
+- `https://tints.dev/primary/{hex}` — interactive palette editor
+
+## Step 4: Write output
 
 Write the completed identity to `.design/brand/IDENTITY.md`.
+Write the generated palettes to `.design/brand/palettes.json`.
 
-## Step 4: Update state
+## Step 5: Update state
 
 Update `.design/STATE.md`:
 - Set Phase 2 (Brand) status to `complete`
 - Record completion date
 
-## Step 5: Route next
+## Step 6: Route next
 
 Display brand identity summary and end with:
 "Run `/gsp:system` to build the design system from this identity."

package/commands/gsp/build.md

@@ -8,13 +8,13 @@ allowed-tools:
   - Task
 ---
 <context>
-Phase 7 of the GSP design pipeline. Uses the Design-to-Code Translator prompt to convert Figma specs and design system into production-ready frontend components.
+Phase 7 of the GSP design pipeline. Uses the Design-to-Code Translator prompt to convert implementation specs and design system into production-ready frontend components.
 </context>
 
 <objective>
 Translate designs into production-ready frontend code.
 
-**Input:** `.design/specs/FIGMA-SPECS.md` + `.design/system/SYSTEM.md`
+**Input:** `.design/specs/SPECS.md` (or SCREENS.md + SYSTEM.md if spec was skipped) + `.design/system/SYSTEM.md`
 **Output:** `.design/build/CODE.md` + `.design/build/components/`
 **Agent:** `gsp-design-engineer`
 </objective>
@@ -27,24 +27,33 @@ Translate designs into production-ready frontend code.
 <process>
 ## Step 1: Load context
 
+Read `.design/config.json` to get `implementation_target`.
+
 Read:
-- `.design/specs/FIGMA-SPECS.md` — component specs
+- `.design/specs/SPECS.md` — implementation specs (primary input)
 - `.design/system/SYSTEM.md` — design system
 - `.design/system/tokens.json` — design tokens
 - `.design/BRIEF.md` — tech stack preference
 - `.design/review/CRITIQUE.md` — any fixes to incorporate
 
-If FIGMA-SPECS.md doesn't exist, tell the user to run `/gsp:spec` first.
+If SPECS.md doesn't exist, check if `implementation_target` is `skip`:
+- **If `skip`:** Read `.design/screens/SCREENS.md` + `.design/system/SYSTEM.md` as primary input instead
+- **If not `skip`:** Tell the user to run `/gsp:spec` first
 
 Determine tech stack from BRIEF.md config (default: React + Tailwind).
 
 ## Step 2: Spawn design engineer
 
 Spawn the `gsp-design-engineer` agent with:
-- All specs, system, and token files
+- All specs/screens, system, and token files
 - The Design-to-Code Translator prompt (09)
 - The build output template
 - The target tech stack
+- The `implementation_target` value
+
+**When `shadcn`:** Agent should use `npx shadcn@latest add` for components, extend with custom variants as defined in SPECS.md.
+
+**When `rn-reusables`:** Agent should use `npx @react-native-reusables/cli add` for components, configure NativeWind theming.
 
 The agent should deliver:
 1. Component hierarchy with props, state, data flow

package/commands/gsp/design.md

@@ -6,6 +6,8 @@ allowed-tools:
   - Write
   - Bash
   - Task
+  - Grep
+  - Glob
 ---
 <context>
 Phase 4 of the GSP design pipeline. Uses the UI/UX Pattern Master prompt to design core screens following Apple HIG and the project's design system.
@@ -32,16 +34,33 @@ Read:
 - `.design/BRIEF.md` — app type, audience, goals
 - `.design/system/SYSTEM.md` — design system to use
 - `.design/brand/IDENTITY.md` — brand personality
+- `.design/config.json` — get `implementation_target`
 
 If SYSTEM.md doesn't exist, tell the user to run `/gsp:system` first.
 
-## Step 2: Spawn UI designer
+## Step 2: Scan codebase for existing components
+
+When `implementation_target` is `shadcn`, `rn-reusables`, `existing`, or `code` (anything except `figma`):
+
+Scan the codebase for existing layouts and components:
+- Look for `components/`, `src/components/`, `components/ui/`, `lib/components/`
+- Look for shadcn `components/ui/` or RN Reusables `components/ui/`
+- Look for Expo `app/` layouts, Next.js `app/` layouts, or other layout files
+- Look for page/screen files to understand existing structure
+
+Build an **Existing Components** inventory summarizing what's already built and reusable.
+
+Pass this inventory to the agent so screen designs can reference existing components.
+
+## Step 3: Spawn UI designer
 
 Spawn the `gsp-ui-designer` agent with:
 - All prior artifacts
 - The UI/UX Pattern Master prompt (03)
 - The design output template
 - The Apple HIG patterns reference
+- The `implementation_target` value
+- The existing components inventory (if gathered in Step 2)
 
 The agent should deliver:
 1. User personas with goals and pain points
@@ -52,20 +71,26 @@ The agent should deliver:
 6. Accessibility specs (WCAG, VoiceOver, Dynamic Type)
 7. Micro-interactions and animations
 8. Responsive behavior across breakpoints
-9. Designer's notes
+9. **Component Plan** (when target is not `figma`)
+10. Designer's notes
 
-## Step 3: Write output
+## Step 4: Write output
 
 Write screens to `.design/screens/SCREENS.md`.
 
-## Step 4: Update state
+## Step 5: Update state
 
 Update `.design/STATE.md`:
 - Set Phase 4 (Design) status to `complete`
 - Record completion date
 
-## Step 5: Route next
+## Step 6: Route next
 
 Display screen summary (screen count, key flows) and end with:
-"Run `/gsp:spec` to generate Figma-ready specifications."
+
+**When `implementation_target` is `skip`:**
+"Run `/gsp:review` for design critique and accessibility audit."
+
+**Otherwise:**
+"Run `/gsp:spec` to generate implementation specifications."
 </process>

package/commands/gsp/help.md

@@ -30,7 +30,7 @@ DESIGN PIPELINE (run in order)
   /gsp:brand           Phase 2 — Brand identity (strategy, logo, color, type)
   /gsp:system          Phase 3 — Design system foundations + tokens
   /gsp:design          Phase 4 — UI/UX screens & interaction flows
-  /gsp:spec            Phase 5 — Figma-ready specifications
+  /gsp:spec            Phase 5 — Implementation specifications
   /gsp:review          Phase 6 — Design critique + accessibility audit
   /gsp:build           Phase 7 — Design-to-code translation
   /gsp:launch          Phase 8 — Marketing campaign assets
@@ -52,7 +52,7 @@ PROJECT STRUCTURE
   ├── system/SYSTEM.md            Design system
   ├── system/tokens.json          Design tokens
   ├── screens/SCREENS.md          UI/UX screens
-  ├── specs/FIGMA-SPECS.md        Figma specifications
+  ├── specs/SPECS.md              Implementation specifications
   ├── review/CRITIQUE.md          Design critique
   ├── review/ACCESSIBILITY.md     WCAG audit
   ├── build/CODE.md               Implementation guide

package/commands/gsp/new-project.md

@@ -54,6 +54,13 @@ Use the questioning techniques from the reference. Ask in 3 conversational round
 **Round 2 — Scope & Constraints:**
 - Platforms (web, iOS, Android)?
 - Tech stack preferences?
+- Implementation target — how will designs become code?
+  - Using a UI kit? (shadcn/ui → `shadcn`, React Native Reusables → `rn-reusables`)
+  - Existing design system already in the codebase? (`existing`)
+  - Need Figma handoff? (`figma`)
+  - Straight to code with no specific UI kit? (`code`)
+  - Skip specs entirely, build directly from screen designs? (`skip`)
+  - Default: `code`
 - Key screens/pages needed?
 - Accessibility level (default: WCAG 2.2 AA)?
 - Timeline and constraints?
@@ -76,7 +83,7 @@ Using the templates, fill in the gathered information:
 1. Write `.design/BRIEF.md` from the project template with all gathered info
 2. Write `.design/ROADMAP.md` from the roadmap template with project name and date
 3. Write `.design/STATE.md` from the state template
-4. Write `.design/config.json` from the config template with preferences
+4. Write `.design/config.json` from the config template with preferences (including `implementation_target` from Round 2)
 
 ## Step 5: Confirm and route
 

package/commands/gsp/progress.md

@@ -29,7 +29,7 @@ Read `.design/STATE.md` and `.design/BRIEF.md`.
 
 ## Step 3: Calculate prettiness
 
-Count completed phases out of 8. Calculate percentage.
+Count completed and skipped phases out of 8. Both count toward progress. Calculate percentage.
 
 ## Step 4: Display progress
 
@@ -52,7 +52,7 @@ Phase Progress:
 Review Loops: {COUNT}
 ```
 
-Use ✅ for complete, 🔄 for in-progress/needs-revision, ⬜ for pending.
+Use ✅ for complete, ⏭️ for skipped, 🔄 for in-progress/needs-revision, ⬜ for pending.
 
 ## Step 5: Route next
 

package/commands/gsp/review.md

@@ -30,14 +30,18 @@ Critique design quality and audit accessibility compliance.
 <process>
 ## Step 1: Load context
 
+Read `.design/config.json` to get `implementation_target`.
+
 Read all prior artifacts:
 - `.design/BRIEF.md`
 - `.design/brand/IDENTITY.md`
 - `.design/system/SYSTEM.md`
 - `.design/screens/SCREENS.md`
-- `.design/specs/FIGMA-SPECS.md`
+- `.design/specs/SPECS.md` (if it exists)
+
+If SCREENS.md doesn't exist, tell the user to complete the design phase first.
 
-If SCREENS.md or FIGMA-SPECS.md don't exist, tell the user to complete design and spec phases first.
+If SPECS.md doesn't exist and `implementation_target` is not `skip`, tell the user to run `/gsp:spec` first. When target is `skip`, review SCREENS.md + SYSTEM.md without requiring SPECS.md.
 
 ## Step 2: Spawn critics (parallel)
 

package/commands/gsp/spec.md

@@ -1,26 +1,28 @@
 ---
 name: gsp:spec
-description: Generate Figma-ready specifications with auto-layout and tokens
+description: Generate implementation specifications — map design to your UI framework
 allowed-tools:
   - Read
   - Write
   - Bash
   - Task
+  - Grep
+  - Glob
 ---
 <context>
-Phase 5 of the GSP design pipeline. Uses the Figma Auto-Layout Expert prompt to convert screen designs into Figma-ready specifications.
+Phase 5 of the GSP design pipeline. Converts screen designs into implementation specifications tailored to the project's UI framework (shadcn, RN Reusables, existing DS, Figma, or raw code specs).
 </context>
 
 <objective>
-Generate Figma-ready specifications from screen designs.
+Generate implementation specifications from screen designs.
 
-**Input:** `.design/screens/SCREENS.md` + `.design/system/SYSTEM.md`
-**Output:** `.design/specs/FIGMA-SPECS.md`
+**Input:** `.design/screens/SCREENS.md` + `.design/system/SYSTEM.md` + `.design/config.json`
+**Output:** `.design/specs/SPECS.md`
 **Agent:** `gsp-spec-engineer`
 </objective>
 
 <execution_context>
-@/Users/jubs/.claude/get-shit-pretty/prompts/05-figma-auto-layout-expert.md
+@/Users/jubs/.claude/get-shit-pretty/prompts/05-implementation-spec-expert.md
 @/Users/jubs/.claude/get-shit-pretty/templates/phases/spec.md
 </execution_context>
 
@@ -28,40 +30,58 @@ Generate Figma-ready specifications from screen designs.
 ## Step 1: Load context
 
 Read:
+- `.design/config.json` — get `implementation_target` (default: `code`)
 - `.design/screens/SCREENS.md` — screen designs to convert
 - `.design/system/SYSTEM.md` — design system (tokens, components)
 - `.design/system/tokens.json` — token values
 
 If SCREENS.md doesn't exist, tell the user to run `/gsp:design` first.
 
-## Step 2: Spawn spec engineer
+## Step 2: Check for skip
+
+If `implementation_target` is `skip`:
+1. Update `.design/STATE.md` — set Phase 5 (Spec) status to `skipped`
+2. Display: "Spec phase skipped — implementation target is set to `skip`. Designs will feed directly into build."
+3. Route: "Run `/gsp:review` for design critique and accessibility audit."
+4. Stop here.
+
+## Step 3: Gather target context
+
+**When `existing`:** Scan the codebase for existing design system files:
+- Look for `components/`, `src/components/`, `components/ui/`, `lib/components/`
+- Look for token/theme files: `tailwind.config.*`, `theme.*`, `tokens.*`, `globals.css`
+- Look for shadcn config: `components.json`
+- Summarize what's found for the agent
+
+**When `shadcn`:** Check for existing shadcn setup:
+- Look for `components.json`, `components/ui/`
+- Note which shadcn components are already installed
+
+**When `rn-reusables`:** Check for existing RN Reusables setup:
+- Look for `components/ui/`, NativeWind config, `tailwind.config.*`
+- Check Expo app structure (`app/`, navigation config)
+- Note which reusables are already installed
+
+## Step 4: Spawn spec engineer
 
 Spawn the `gsp-spec-engineer` agent with:
 - SCREENS.md, SYSTEM.md, and tokens.json
-- The Figma Auto-Layout Expert prompt (05)
+- The Implementation Spec Expert prompt (05)
 - The spec output template
+- The `implementation_target` value
+- Any target-specific context gathered in Step 3
 
-The agent should deliver:
-1. Frame structure with grids and constraints
-2. Responsive rules
-3. Auto-layout specs per component (direction, padding, spacing, alignment, resizing)
-4. Component architecture with variants and properties
-5. Design tokens mapped to Figma tokens
-6. Prototype flows (triggers, animations)
-7. Dev handoff setup (CSS, exports, naming)
-8. Accessibility notes
-
-## Step 3: Write output
+## Step 5: Write output
 
-Write specs to `.design/specs/FIGMA-SPECS.md`.
+Write specs to `.design/specs/SPECS.md`.
 
-## Step 4: Update state
+## Step 6: Update state
 
 Update `.design/STATE.md`:
 - Set Phase 5 (Spec) status to `complete`
 - Record completion date
 
-## Step 5: Route next
+## Step 7: Route next
 
 Display spec summary and end with:
 "Run `/gsp:review` for design critique and accessibility audit."

package/commands/gsp/system.md

@@ -30,9 +30,11 @@ Build a complete design system from the brand identity.
 
 Read:
 - `.design/brand/IDENTITY.md` — brand colors, type, personality
+- `.design/brand/palettes.json` — tints.dev generated color palettes (11-stop OKLCH scales)
 - `.design/BRIEF.md` — platforms, tech stack, constraints
 
 If IDENTITY.md doesn't exist, tell the user to run `/gsp:brand` first.
+If palettes.json exists, use its OKLCH values as the foundation for the color system tokens.
 
 ## Step 2: Spawn system architect
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "get-shit-pretty",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A design engineering system for Claude Code, OpenCode, Gemini, and Codex. Research → Brand → System → Design → Spec → Review → Build → Launch.",
   "bin": {
     "get-shit-pretty": "bin/install.js"

package/prompts/05-implementation-spec-expert.md

@@ -0,0 +1,42 @@
+# The Implementation Spec Expert
+
+**Category:** Design-to-Code Bridge
+**Use when:** Mapping design decisions to a specific implementation target (UI kit, existing DS, Figma, or raw code specs)
+
+---
+
+## Prompt
+
+Act as an Implementation Spec Engineer. Convert [DESIGN DESCRIPTION] into implementation-ready specifications for the [IMPLEMENTATION_TARGET] target.
+
+**When target is `figma`:**
+Define frame structure, grids, constraints, and responsive rules. Detail auto-layout (direction, padding, spacing, alignment, resizing). Build component architecture with variants and properties. Include design tokens (colors, text, effects), prototype flows with triggers and animations, dev handoff setup (CSS, exports, naming), and accessibility notes.
+
+**When target is `shadcn`:**
+Map each component to shadcn/ui primitives. Define variant overrides and custom props. Map design tokens to shadcn CSS variables. List required `npx shadcn@latest add` installs. Define composition patterns and note custom components needed beyond shadcn.
+
+**When target is `rn-reusables`:**
+Map each component to React Native Reusables primitives (reusables.dev). Define variant overrides and custom props. Map design tokens to NativeWind theme config. List required `npx @react-native-reusables/cli add` installs. Define composition patterns for RN screens. Handle platform differences (iOS vs Android). Note custom native components needed.
+
+**When target is `existing`:**
+Read the existing design system from the codebase. Map design decisions to existing components and tokens. Identify gaps and define adaptation strategy (extend vs create new).
+
+**When target is `code`:**
+Define component architecture with props, state, and data flow. Map tokens to CSS custom properties. Specify responsive rules and breakpoint behavior. No tool-specific specs.
+
+---
+
+## Variables
+
+- `[DESIGN DESCRIPTION]` — Description of the design to convert to implementation specs
+- `[IMPLEMENTATION_TARGET]` — One of: `figma`, `shadcn`, `rn-reusables`, `existing`, `code`
+
+## Expected Output
+
+- Component mapping to target primitives
+- Token mapping to target theming format
+- Component architecture (hierarchy, props, state, composition)
+- Responsive behavior specifications
+- Interaction and animation specs
+- Target-specific setup and installation notes
+- Accessibility annotations

package/scripts/gsp-statusline.js

@@ -106,6 +106,57 @@ process.stdin.on('end', () => {
       } catch (e) {}
     }
 
+    // ── Update check ──
+    let updateTag = '';
+    try {
+      const gspDir = path.join(homeDir, '.claude', 'get-shit-pretty');
+      const versionFile = path.join(gspDir, 'VERSION');
+      const cacheFile = path.join(gspDir, '.update-cache.json');
+
+      if (fs.existsSync(versionFile)) {
+        const installed = fs.readFileSync(versionFile, 'utf8').trim();
+        let latest = null;
+        let shouldCheck = true;
+
+        // Read cache (check once per 24h)
+        if (fs.existsSync(cacheFile)) {
+          try {
+            const cache = JSON.parse(fs.readFileSync(cacheFile, 'utf8'));
+            const age = Date.now() - (cache.ts || 0);
+            if (age < 86400000) {
+              latest = cache.latest || null;
+              shouldCheck = false;
+            }
+          } catch (e) {}
+        }
+
+        // Background check if cache is stale
+        if (shouldCheck) {
+          const { execFile } = require('child_process');
+          execFile('npm', ['view', 'get-shit-pretty', 'version', '--json'], { timeout: 5000 }, (err, stdout) => {
+            if (!err && stdout) {
+              try {
+                const ver = JSON.parse(stdout.trim());
+                fs.writeFileSync(cacheFile, JSON.stringify({ latest: ver, ts: Date.now() }));
+              } catch (e) {}
+            }
+          });
+        }
+
+        // Compare versions if we have cached latest
+        if (latest && latest !== installed) {
+          const iParts = installed.split('.').map(Number);
+          const lParts = latest.split('.').map(Number);
+          const isNewer = lParts[0] > iParts[0] ||
+            (lParts[0] === iParts[0] && lParts[1] > iParts[1]) ||
+            (lParts[0] === iParts[0] && lParts[1] === iParts[1] && lParts[2] > iParts[2]);
+          if (isNewer) {
+            updateTag = ` \x1b[33m\u2191 v${latest}\x1b[0m`;
+          }
+        }
+      }
+    } catch (e) {}
+
     // ── Output ──
     const dirname = path.basename(dir);
     const parts = [`\x1b[2m${model}\x1b[0m`];
@@ -125,7 +176,7 @@ process.stdin.on('end', () => {
       parts.push(`\x1b[2m${dirname}\x1b[0m`);
     }
 
-    process.stdout.write(parts.join(' \u2502 ') + ctx);
+    process.stdout.write(parts.join(' \u2502 ') + ctx + updateTag);
   } catch (e) {
     // Silent fail
   }

package/templates/config.json

@@ -10,6 +10,7 @@
     "tech_stack": "React + Tailwind",
     "accessibility_level": "WCAG 2.2 AA",
     "design_tool": "Figma",
+    "implementation_target": "code",
     "auto_review": true
   },
   "phases": {

package/templates/phases/spec.md

@@ -1,60 +1,46 @@
-# Figma Specifications
+# Implementation Specifications
 
 ## Project: {PROJECT_NAME}
 **Date:** {DATE}
+**Implementation Target:** {TARGET}
 
 ---
 
-## Frame Structure
-<!-- Page organization and frame hierarchy -->
+<!-- Output sections vary by implementation_target. See agent instructions for target-specific sections. -->
 
-## Grid & Constraints
-- **Grid:** {GRID_SPEC}
-- **Constraints:** {CONSTRAINTS}
-- **Responsive rules:** {RULES}
+## Component Mapping
+<!-- Maps design components to implementation target primitives -->
 
-## Auto-Layout Specs
-
-### {COMPONENT_NAME}
-- **Direction:** Vertical/Horizontal
-- **Padding:** {TOP} {RIGHT} {BOTTOM} {LEFT}
-- **Spacing:** {GAP}px
-- **Alignment:** {ALIGNMENT}
-- **Resizing:** {HORIZONTAL_RESIZE} / {VERTICAL_RESIZE}
-
-<!-- Repeat for each component -->
-
-## Component Architecture
-<!-- Variants, properties, and slot definitions -->
-
-| Component | Variants | Properties |
-|-----------|----------|------------|
+| Design Component | Target Primitive | Notes |
+|-----------------|-----------------|-------|
 | | | |
 
-## Design Tokens
+## Token Mapping
+<!-- Maps GSP design tokens to target's theming format -->
 
 ### Colors
-| Token | Value | Usage |
-|-------|-------|-------|
+| GSP Token | Target Variable | Value |
+|-----------|----------------|-------|
 | | | |
 
-### Text Styles
-| Token | Font | Size | Weight | Line Height |
-|-------|------|------|--------|-------------|
+### Typography
+| GSP Token | Target Variable | Font | Size | Weight |
+|-----------|----------------|------|------|--------|
 | | | | | |
 
-### Effects
-| Token | Type | Value |
-|-------|------|-------|
+### Spacing & Effects
+| GSP Token | Target Variable | Value |
+|-----------|----------------|-------|
 | | | |
 
-## Prototype Flows
-| Flow | Trigger | Animation | Duration |
-|------|---------|-----------|----------|
-| | | | |
+## Component Architecture
+<!-- Component hierarchy, props, state, composition -->
+
+## Responsive Specs
+<!-- Breakpoints, layout shifts, component adaptations -->
+
+## Interaction Specs
+<!-- Triggers, state transitions, animations -->
 
-## Dev Handoff
-- **Naming convention:** {CONVENTION}
-- **Export formats:** {FORMATS}
-- **CSS mapping:** {CSS}
-- **Accessibility notes:** {A11Y}
+## Implementation Notes
+<!-- Target-specific setup, installation, and integration notes -->

package/templates/roadmap.md

@@ -36,9 +36,9 @@
 ## Phase 5: Spec
 **Status:** pending
 **Command:** `/gsp:spec`
-**Input:** SCREENS.md + SYSTEM.md
-**Output:** `.design/specs/FIGMA-SPECS.md`
-**Goal:** Generate Figma-ready specifications with auto-layout and tokens.
+**Input:** SCREENS.md + SYSTEM.md + config.json
+**Output:** `.design/specs/SPECS.md`
+**Goal:** Map design decisions to implementation target (UI kit, existing DS, or code specs).
 
 ## Phase 6: Review
 **Status:** pending
@@ -50,7 +50,7 @@
 ## Phase 7: Build
 **Status:** pending
 **Command:** `/gsp:build`
-**Input:** FIGMA-SPECS.md + SYSTEM.md
+**Input:** SPECS.md + SYSTEM.md (or SCREENS.md + SYSTEM.md when spec is skipped)
 **Output:** `.design/build/CODE.md` + `components/`
 **Goal:** Translate design into production-ready frontend code.
 

package/templates/state.md

@@ -15,7 +15,7 @@
 | 2 | Brand | pending | — | — |
 | 3 | System | pending | — | — |
 | 4 | Design | pending | — | — |
-| 5 | Spec | pending | — | — |
+| 5 | Spec | pending/skipped | — | — |
 | 6 | Review | pending | — | — |
 | 7 | Build | pending | — | — |
 | 8 | Launch | pending | — | — |
@@ -26,6 +26,10 @@
 | Loop | Date | Issues Found | Issues Fixed | Resubmitted |
 |------|------|-------------|-------------|-------------|
 
+## Status Values
+<!-- pending | in-progress | complete | needs-revision | skipped -->
+<!-- Skipped phases count as complete for prettiness calculation -->
+
 ## Decisions
 <!-- Key design decisions and rationale -->
 

package/prompts/05-figma-auto-layout-expert.md

@@ -1,27 +0,0 @@
-# The Figma Auto-Layout Expert
-
-**Category:** Design Tools & Specs
-**Use when:** Converting designs into Figma-ready specifications
-
----
-
-## Prompt
-
-Act as a Figma Design Ops Specialist. Convert [DESIGN DESCRIPTION] into Figma-ready specs. Define frame structure, grids, constraints, and responsive rules. Detail auto-layout (direction, padding, spacing, alignment, resizing). Build component architecture with variants and properties. Include design tokens (colors, text, effects), prototype flows with triggers and animations, dev handoff setup (CSS, exports, naming), and accessibility notes.
-
----
-
-## Variables
-
-- `[DESIGN DESCRIPTION]` — Description of the design to convert to Figma specs
-
-## Expected Output
-
-- Frame structure with grids and constraints
-- Responsive rules
-- Auto-layout specs (direction, padding, spacing, alignment, resizing)
-- Component architecture with variants and properties
-- Design tokens (colors, text styles, effects)
-- Prototype flows (triggers, animations)
-- Dev handoff setup (CSS, exports, naming conventions)
-- Accessibility notes