---
description: Figma design implementation guide with pixel-perfect precision
---

# Figma Implement Design Skill

## Context
Use this skill when you need to transform a design specification from Figma into functional React/Web components.

## Requirements
1. **Pixel Perfection**:
   - Respect spacing (padding, margin) exactly as defined.
   - Use the specified color palette and typography tokens.
   - Do NOT use magic numbers; use Tailwind utilities or CSS variables.

2. **Component Structure**:
   - Deconstruct the design into reusable atoms/molecules.
   - Identify repeating patterns (Cards, Lists, Buttons).

3. **Responsiveness**:
   - Implement responsive breakpoints as per the design system (Mobile -> Tablet -> Desktop).
   - Use `flex` and `grid` for fluid layouts.

## Workflow
1. **Analyze**: Look at the Figma node/image. Identify layout strategy (Flexbox vs Grid).
2. **Scaffold**: Create the file structure.
3. **Style**: Apply global styles/tokens first to match the theme.
4. **Build**: Implement the DOM structure.
5. **Verify**: Compare screenshot of result vs Figma design.

## Checklist
- [ ] Are fonts correct?
- [ ] Is spacing consistent?
- [ ] Does it work on mobile?
- [ ] Are hover/active states implemented?