mockup-extraction

Purpose: Bridge the gap between visual mockups and production code by:

1. Identifying repeated UI patterns across mockup screens
2. Mapping mockup CSS classes to Tailwind utilities
3. Documenting component variants and states
4. Creating extraction tasks for systematic implementation

When to invoke: At the start of /implement phase when mockups exist and are approved (UI-first features).

<quick_start> Before extraction, verify:

1. Mockups exist in specs/NNN-slug/mockups/ or design/prototype/screens/
2. Mockup approval gate passed in state.yaml
3. Theme files exist (theme.yaml, theme.css)

<basic_workflow>

1. Inventory - List all mockup HTML files
2. Scan - Parse HTML for component patterns
3. Classify - Categorize by component type
4. Count - Track occurrence frequency
5. Map - Convert CSS to Tailwind utilities
6. Document - Populate prototype-patterns.md
7. Generate Tasks - Create extraction tasks for tasks.md </basic_workflow>

<extraction_output> Generate prototype-patterns.md in feature directory:

# Prototype Patterns: {FEATURE_NAME}

## Component Inventory
| Component | Source Screens | Occurrences | Priority |
|-----------|---------------|-------------|----------|
| Button Primary | login, signup, dashboard | 12 | Must extract |
| Card | dashboard, settings | 8 | Must extract |
| Form Input | login, signup, profile | 15 | Must extract |
| Alert | all screens | 6 | Consider extraction |

## Component Details

### Button Primary
- **CSS Classes**: `.btn`, `.btn-primary`
- **Tailwind**: `px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-hover`
- **States**: default, hover, focus, disabled, loading
- **Props**: `variant`, `size`, `icon`, `loading`

### Card
- **CSS Classes**: `.card`, `.card-elevated`
- **Tailwind**: `bg-surface p-4 rounded-lg shadow-md`
- **Variants**: default, elevated, bordered
- **Props**: `padding`, `shadow`, `header`, `footer`

## CSS to Tailwind Mapping
| CSS Variable | Tailwind Utility |
|--------------|------------------|
| var(--color-primary) | bg-primary, text-primary |
| var(--space-4) | p-4, m-4, gap-4 |
| var(--radius-md) | rounded-md |
| var(--shadow-md) | shadow-md |

## Visual Fidelity Checklist
- [ ] Spacing matches 8pt grid
- [ ] Colors use design tokens
- [ ] All states implemented (hover, focus, disabled)
- [ ] Typography uses scale
- [ ] Responsive breakpoints match

</extraction_output> </quick_start>

<detailed_procedures> <component_identification>

Component Identification Rules

Scan mockup HTML for these patterns: