Agent Skills
Ship shadcncraft from your AI editor.
Skills that give Claude Code, Cursor, and Codex the exact context to work with shadcncraft correctly. Bring React UI into Figma, turn Figma into code, and sync your design tokens.
npx @shadcncraft/skills add allInstall guidegenerate-codePro Figma + React
Turn a Figma frame into real code
Select a frame and get production React. Instead of approximating it, the skill resolves the frame to the matching registry block and installs the real, hand-tuned component.
Real registry blocks
Reuses the maintained block, so you ship real code, not a lookalike.
On your tokens
Stays on your design tokens, never hardcoded colors or arbitrary values.
Your icon library
Emits icons from your configured library with the correct export names.
import-variables
Sync design tokens into globals.css
Pull colors, radius, typography, shadows, and spacing into a complete shadcn token set for light and dark, merged into a managed region that never clobbers your customizations.
Source-agnostic
Figma variables or a local tokens file.
Mapped by meaning
Maps to shadcn token names by what they mean, for both modes.
Non-destructive
Preserves everything outside the managed block, byte for byte.
Install the skills. Then just ask.
React to Figma
Your developer built it. Bring it into Figma.
Get editable designs that closely match your React UI and follow the conventions of your shadcncraft kit. Save hours of manual checking and pixel pushing when bringing development work back into design.
Import App
Know what you can reuse before rebuilding anything. Get a clear plan for bringing your app into Figma, with kit matches and missing pieces identified.
Import Block
Bring a developer-built section or screen into Figma without recreating it by hand. Keep it close to React across desktop and mobile, using the kit’s components and variables.
Import Component
Give a custom React control a reusable Figma counterpart. Preserve its appearance and states while making it editable and consistent with the rest of your kit.
How it works
No new tool to learn. Install once, then describe what you want.
1
Install
Run one command to drop the skills into your project, or install them globally for every project.
2
Ask
Describe the task in plain language. The right skill triggers automatically, no commands to memorize.
3
Ship
The agent installs real blocks and writes code on your tokens and conventions, ready to commit.
Frequently Asked Questions
Use your AI editor with access to the React project, your shadcncraft kit copy, and Figma tools. Import App saves import-plan.md and import-plan.json for review. Import Block and Import Component require the approved plan and a running app with browser measurement tools, then build one unit at a time.
