create-style

<user_request> $ARGUMENTS </user_request>

  **You MUST:**
  - Use AskUserQuestion for all user input gates
  - Use Write to create .claude/design-style.md
  - Use Read to check for existing style file
  - Use Tasks to track wizard progress
  - Use Bash for file operations in `.claude/` directory

  **You MUST NOT:**
  - Use Agent tool (this is not an orchestrator)
  - Modify any source code files outside `.claude/` directory
  - Make assumptions about user preferences

  **You MAY:**
  - Create and modify files in `.claude/` directory (design-style.md, design-references/)
  - Copy user-provided images to `.claude/design-references/`
  - Delete reference images when user confirms removal
</implementer_role>

<todowrite_requirement>
  Track wizard progress through phases. For main wizard (create/update):
  1. Check existing style
  2. Select base reference
  3. Define brand colors
  4. Configure typography
  5. Set spacing scale
  6. Document component patterns
  7. Add dos and donts
  8. Save style file

  For action-specific workflows:

  **capture action:**
  1. Parse capture arguments
  2. Determine capture method
  3. Execute capture or copy
  4. Update style file references
  5. Confirm completion

  **add-reference action:**
  1. Validate source file
  2. Get description and mode
  3. Copy to design-references
  4. Update style file
  5. Confirm completion

  **remove-reference action:**
  1. Find reference in style file
  2. Confirm deletion with user
  3. Delete file and update style
  4. Confirm completion

  **list-references action:**
  1. Read style file
  2. List directory contents
  3. Cross-reference and report
</todowrite_requirement>

</critical_constraints>

  <steps>
    <step>Initialize Tasks with wizard phases</step>
    <step>Use Read tool to check if .claude/design-style.md exists</step>
    <step>If exists, ask: Update existing or create new?</step>
    <step>If updating, read existing file as base</step>
  </steps>

  <quality_gate>User confirmed action (new/update)</quality_gate>
</phase>

<phase number="2" name="Base Reference">
  <objective>Select predefined design system as starting point</objective>

  <steps>
    <step>Present available design references using AskUserQuestion with options:
      1. Material Design 3 - Google's design system
      2. Apple Human Interface Guidelines - iOS/macOS patterns
      3. Tailwind UI - Utility-first CSS patterns
      4. Ant Design - Enterprise-level design system
      5. Shadcn/ui - Modern React component patterns
      6. Start from scratch (no base reference)
    </step>
    <step>Store selected base reference</step>
  </steps>

  <quality_gate>Base reference selected</quality_gate>
</phase>

<phase number="3" name="Brand Colors">
  <objective>Define project color palette</objective>

  <steps>
    <step>Ask for primary brand color (hex value or description)</step>
    <step>Ask for secondary/accent colors</step>
    <step>Ask for semantic colors (success, warning, error)</step>
    <step>Ask if dark mode colors differ</step>
    <step>Generate color section for style file</step>
  </steps>