Agent Skills
Ship shadcncraft from your AI editor.
Skills that give Claude Code, Cursor, and Codex the exact context to work with shadcncraft correctly. Turn Figma into code and sync your design tokens, by just asking.
npx @shadcncraft/skills add allInstall guidegenerate-codePro + 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, a tokens file, or UI Rules (coming soon).
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.
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
Claude Code, Cursor, and Codex. The skills follow the open Agent Skills standard and are tool-agnostic; the installer auto-detects .claude, .cursor, and .codex (override with --tool).
