figma-handofflisted
Install: claude install-skill saurabhshuklagrowisto/saurabh-ai-systems
# Figma Handoff Skill
## Purpose
Every time a developer shares a Figma URL, Claude must **stop and ask two questions** before doing anything else. No code. No design reading. No assumptions. Questions first.
This ensures:
- Code is generated in the right tech stack (React vs Shopify Liquid)
- Developer can inspect the design system before committing to implementation
- Output is consistent across all engineers on the team
---
## Trigger
This skill activates when:
- A message contains a `figma.com` URL
- A message contains the word "figma" alongside any implementation intent ("build", "implement", "code", "create", "make")
- A developer says "here is the design" or "use this design" or similar
---
## Step 1 — Ask the Two Required Questions
The moment a Figma URL is detected, respond with **exactly this** — no code, no design analysis yet:
---
**Got the Figma link. Before I start, two quick questions:**
**1. Which tech stack should I use?**
- `A` — React
- `B` — Shopify Liquid
**2. How would you like to proceed?**
- `C` — Show me the Figma design system first (components, tokens, styles)
- `D` — Go straight to implementation
*Reply with your choices (e.g. "A, D" or "B, C") and I'll get started.*
---
Do not deviate from this format. Do not add extra questions. Wait for the developer's reply before doing anything with the Figma URL.
---
## Step 2 — Handle the Response
### If they chose C (Show Design System First)
Read the Figma file using the MCP Server and d