SkillsAdd

smithery.ai

figma-to-react

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

First seen Mar 30, 2026

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
figma-use Similar name
figma/mcp-server-guide

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEV…

6.9K installs
figma-implement-design Similar name
openai/skills

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use w…

5.6K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

Version0.9.27
LicenseMIT
CompatibilityRequires Figma MCP server (mcp__figma__*). React + Tailwind CSS project. Uses oxlint for fast linting.
Allowed toolsBash Read Write Edit Glob Grep Task WebFetch TodoWrite AskUserQuestion mcp__plugin_figma_figma__get_metadata mcp__plugin_figma_figma__get_screenshot mcp__plugin_figma_figma__get_design_context mcp__plugin_figma_figma-desktop__get_metadata mcp__plugin_figma_figma-desktop__get_screenshot mcp__plugin_figma_figma-desktop__get_design_context mcp__figma__get_metadata mcp__figma__get_screenshot mcp__figma__get_design_context

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,722 B
  • docs SUMMARY.md 96 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 2 installs

SKILL.md

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:

  1. STOP - don't execute step 5
  2. Update TodoWrite to uncheck wrongly-completed steps
  3. 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