Figma Component

---
description: Generate a component from Figma design with full validation
allowed-tools: 
  - mcp__figma__get_code
  - mcp__figma__get_design_context  
  - mcp__figma__get_screenshot
  - Read
  - Write
  - Bash
---

# Figma Component Generation Workflow

## Phase 1: Gather Context
1. Get design context from Figma for the selected frame
2. Get screenshot from Figma and save to `.claude/tmp/figma-reference.png`
3. Read COMPONENTS.md for our component patterns
4. Search codebase for similar existing components: `find src/components -name "*.tsx" | head -20`
5. If similar components exist, read 1-2 as reference for our patterns

## Phase 2: Plan Before Coding
Before writing any code, output:
- Component name and file locations
- Props interface with types
- Tailwind classes you plan to use (verify against allowed tokens)
- Any Radix primitives needed
- Edge cases to handle

Ask me to confirm the plan before proceeding.

## Phase 3: Generate Code
1. Create component file following COMPONENTS.md structure
2. Create Storybook story with:
   - Default story matching Figma exactly
   - Variants if the design shows multiple states

## Phase 4: Validation Loop
Run these commands and fix any issues:
```bash
# TypeScript check
npx tsc --noEmit

# Lint check  
npx eslint src/components/[ComponentName] --fix

# Check for disallowed tokens
npm run check-tokens -- src/components/[ComponentName]

# Build storybook to catch render errors
npm run build-storybook -- --quiet

If any check fails, fix the issue and re-run until all pass.

Phase 5: Visual Comparison

1. Start Storybook if not running: npm run storybook
2. Capture screenshot of the component story
3. Compare with Figma reference screenshot
4. List specific discrepancies (spacing, colors, typography, alignment)
5. Fix discrepancies and repeat until visually matching

Output

When complete, summarize:

• Files created
• Any deviations from Figma design (with justification)
• Any patterns that should be added to COMPONENTS.md