figmalisted

# Skill: figma ## When to Use Use this skill when implementing UI from a Figma design. Invoke with `/figma [URL]` where the URL is a Figma design link, or `/figma` to start without a specific URL. Use `$ARGUMENTS` as the Figma URL or file key. If empty, ask the user for the Figma URL. Do NOT use this skill for general frontend work that doesn't involve a Figma design. ## Method ### MCP Tools Are Mandatory If you have a Figma URL or file key, you MUST call these tools before writing any code. Never implement from memory, verbal description alone, or assumptions about what a design "probably" looks like. **Required sequence:** 1. **`get_design_context`** - Fetch structured design representation (layout, spacing, colors, typography). This is your primary source of truth. 2. **`get_screenshot`** - Get a visual reference of the target design. Always do this alongside `get_design_context`. 3. **`get_metadata`** - If `get_design_context` returns too much data, use this first to get a lightweight structural outline, then re-fetch only the nodes you need. 4. **`get_variable_defs`** - When the design uses Figma variables/tokens, fetch them. Map to CSS custom properties or Tailwind theme values instead of hardcoding. Only after you have both design context AND a screenshot should you start implementation. **If any tool call fails or returns incomplete data:** Tell the user. Do not fill in the gaps from assumptions. ### Responsive Gate - Fetch All Breakpoints First If the de