Figma to react

Skill gbasin/figma-to-react/skills/figma-to-react

Convert Figma designs to pixel-perfect React components with Tailwind CSS.From its SKILL.md

Install

npx -y skills add gbasin/figma-to-react --skill figma-to-react

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

7 stars7 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.7 KB, as published. Nobody here has run it

Figma to React

Convert Figma designs to pixel-perfect React components with Tailwind CSS.

Workflow

The workflow is a status-driven loop. Always check status before and after each step:

LOOP:
  1. Run: $SKILL_DIR/scripts/status.sh
  2. Read the step file for current_step (e.g., step-4b-validate-dimensions.md)
  3. Execute that step's instructions
  4. Go to step 1 (until step 8 complete)

Step Reference

Create a TodoWrite list with these steps (Glob to find each file):

1. Setup - step-1-setup.md
2. Detect structure - step-2-detect-structure.md
3. Confirm config - step-3-confirm-config.md
3b. Create preview route - step-3b-preview-route.md
4. Generate screens (parallel) - step-4-generation.md
4b. Validate dimensions - step-4b-validate-dimensions.md
5. Import tokens - step-5-import-tokens.md
6. Validate screens (parallel) - step-6-validation.md
7. Rename assets - step-7-rename-assets.md
8. Disarm hook - step-8-disarm-hook.md

Pre-flight Checks

Each step file has a pre-flight check. If status.sh says you're on step 4b but you're trying to execute step 5:

STOP - don't execute step 5
Update TodoWrite to uncheck wrongly-completed steps
Read the correct step file (step 4b)

This prevents skipping steps, which was a common failure mode.

Recovery After Compaction

If context is compacted, run $SKILL_DIR/scripts/status.sh to see exactly where you are. The script infers state from /tmp files - no context needed.

State files used by status.sh:

/tmp/figma-to-react/capture-active - Skill is active
/tmp/figma-to-react/config.json - Config with screens/screenNames mapping
/tmp/figma-to-react/steps/4b/*.json - Dimension validation results
/tmp/figma-to-react/steps/4b/user-decisions.json - User decisions on missing dims
/tmp/figma-to-react/steps/5/complete.json - Token import done
/tmp/figma-to-react/validation/*/result.json - Visual validation results
/tmp/figma-to-react/steps/7/complete.json - Asset rename done