← ClaudeAtlas

figma-handofflisted

Use this skill EVERY TIME a Figma URL is mentioned or pasted in any message. Triggers on any figma.com link, any mention of "figma", or any request to implement/build/code a design. Before writing any code or reading any design, this skill intercepts the request and asks two required questions: (1) which tech stack — React or Shopify Liquid, and (2) whether to show the Figma design system first or proceed directly. Do NOT skip these questions. Do NOT write any code before both are answered. This is mandatory for all Figma-related implementation tasks at Acme.
saurabhshuklagrowisto/saurabh-ai-systems · ★ 0 · AI & Automation · score 70
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