prototype

# /prototype - Discovery-First Prototyping (Hybrid Pattern)

> **v11.0 Architecture**: Uses hybrid pattern for `discover` and `explore` modes - interactive questions in main context (good UX), prototype generation isolated via Task() (saves ~4-6k tokens).

<context>
**Check these files before proceeding:**
- Prototype state: `design/prototype/state.yaml`
- Design tokens: `design/systems/tokens.json` and `tokens.css`
- Project docs: `docs/project/overview.md`
- User preferences: `.spec-flow/config/user-preferences.yaml`

**Related skills (auto-loaded on demand):**
- `shadcn-integration` - Generates shadcn/ui compatible CSS variables and components.json
- `design-tokens` - OKLCH token generation and WCAG validation
- `theme-consistency` - Enforces token usage across prototype screens
</context>

<architecture>
## Hybrid Pattern (v11.0)

**For `discover` and `explore` modes:**

```
User: /prototype discover
         │
         ▼
┌──────────────────────────────────────────────────────┐
│ MAIN CONTEXT (interactive selection - good UX)       │
│                                                      │
│ 1. Check for existing tokens                         │
│ 2. Palette selection (vibe picker)                   │
│ 3. Vision brainstorm question                        │
│ 4. Screen selection (multiselect)                    │
│ 5. Save selections to temp config                    │
│    → .spec-flow/temp/prototype-selections.yaml       │
└──────────────────────────────────────────────────────┘
         │
         ▼
┌──────────────────────────────────────────────────────┐
│ Task(prototype-discover-agent) ← ISOLATED            │
│                                                      │
│ 1. Read selections from temp config                  │
│ 2. Generate theme.yaml from palette                  │
│ 3. Generate theme.css with CSS variables             │
│ 4. Create discovery artifacts (ideas.md, etc)        │
│ 5. Generate HTML for all selected screens            │
│ 6. Generate navigation hub (index.html)              │
│ 7. Update state.yaml                                 │
│ 8. Return summary                                    │
│ 9. EXIT                                              │
└──────────────────────────────────────────────────────┘
         │
         ▼
┌──────────────────────────────────────────────────────┐
│ MAIN CONTEXT (results - minimal tokens)              │
│                                                      │
│ 1. Display success summary                           │
│ 2. Show generated screens                            │
│ 3. Display keyboard shortcuts                        │
│ 4. Suggest next steps                                │
└──────────────────────────────────────────────────────┘
```

**For lightweight modes (`status`, `extract`, `outcome`, `lock-theme`, etc.):**
- Run directly in main context (no Task spawning needed)
- These modes are read-heavy with minimal generation
</architecture>

<objective>
**Discovery-first prototyping** - explore app ideas visually before committing to roadmap or features.

**Philosophy**: This is your zero-risk sandbox. Try ideas. Scrap what doesn't work. Nothing here commits you to building anything. The prototype informs your roadmap, not the other way around.

**Workflow Position**:
```
/init-project -> /prototype discover -> /prototype extract --to-epic "Name" -> /epic continue
                                    | OR
                                    -> /roadmap import-from-prototype -> /epic or /feature
```

**Modes**:
- `discover`: Full app exploration at project start, brainstorm screens, zero commitments
- `explore`: **Loop back** - Explore new feature/epic ideas within existing prototype
- `create`: Generate structured prototype (legacy, still works)
- `update`: Add screens to existing prototype
- `status`: Show prototype overview and screen registry
- `extract`: Analyze prototype -> generate discovered-features.md + component-inventory.md
  - `--to-epic "Name"`: One-shot epic creation (extract + create epic workspace)
- `lock-theme`: Lock design decisions for production use
- `unlock-theme`: Unlock for further iteration (requires confirmation)
- `sync-tokens`: Update prototype to use refined tokens from /init-brand-tokens
- `sync [pasted-content]`: Import ideas/questions/scraps captured in browser (paste inline or when prompted)

**Token Integration**:
- `--with-tokens`: Force token generation (inline palette picker)
- `--skip-tokens`: Use placeholder grays (fastest start)
- `--use-existing`: Use tokens.json if exists, else error
- (default): Auto-detect: use existing tokens or prompt

**Git Persistence**:
- `--commit`: Add prototype to git (recommended for design assets)
- `--gitignore`: Exclude from git (rapid iteration)

**When to use**: After `/init-project`, BEFORE `/roadmap`. Discover what to build before planning.
</objective>

## Anti-Hallucination Rules

1. **Never generate screens without user input**
   - Always ask about screen categories and navigation structure
   - Don't assume app structure

2. **Token handling is flexible in discovery mode**
   - Check for existing tokens.json first
   - If missing, offer quick palette picker OR skip (use grays)
   - Never block discovery for missing tokens

3. **Read state.yaml before claiming status**
   - Quote actual screen registry
   - Report real last_updated timestamp

4. **Check prototype existence before operations**
   - `discover`: Can start fresh or add to existing (flexible)
   - `create`: Fail if prototype exists (use `update` instead)
   - `update`: Fail if prototype doesn't exist (use `create` instead)
   - `status`: Fail gracefully with "No prototype found" message

5. **Discovery mode is zero-risk**
   - Never warn about "losing work" - scrapping is expected
   - Encourage iteration and experimentation
   - Don't block on quality gates

---

<process>

## Mode: DISCOVER (Recommended Entry Point)

**Purpose**: Zero-risk exploration to discover what to buil