figma-to-react
From the author
Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
Install
npx skills add majiayu000/spellbook --skill figma-to-react -a claude-code
Installs to .claude/skills/figma-to-react/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Download .zip
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 85
Security100
Provenance70
Maintenance100
Licence100
Adoption41
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- figma-to-codemajiayu000/spellbookExtract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.Design★ 288
- figmaskillmds/skillmdBidirectional Figma skill — read designs and write back to Figma. READ: extract tokens, map Vue/Reka UI components, translate Auto Layout to Tailwind. WRITE: push components, screens, and design tokens from code to Figma. Requires /figma:figma-use skill before every use_figma call.Design★ 190
- figma-implement-designopenai/skillsTranslates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.OfficialDesign★ 28.3K
- figma-generate-designopenai/skillsUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.OfficialDesign★ 28.3K
- design-codeplugin87/ux-ui-agent-skillsGenerate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.Design★ 2.9K
- figma-apia5c-ai/babysitterDirect Figma API interactions for design asset management. Fetch files and components, extract design tokens, export images, manage comments, and access version history.Design★ 1.9K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in