Introducing Agent Skills
AI agents are great at writing UI code. They are not great at writing your UI code. Ask one to build a pricing page and you get a plausible approximation: hardcoded hex values instead of your tokens, the wrong icon library, components rebuilt from scratch that you now own and have to maintain. It compiles, it looks roughly right, and it quietly drifts from everything else in your codebase.
Today we are fixing that. Agent Skills give your AI coding agent the exact context it needs to work with shadcncraft correctly. Install them once, then just describe what you want. The agent reuses your hand-tuned registry blocks, stays on your design tokens, and follows your conventions, because it now knows what they are.
They follow the open Agent Skills standard, so they work in Claude Code, Cursor, and Codex. They are free to install.
What each skill does
Generate code turns a selected Figma frame into production React. The important part is what it does not do: it does not regenerate the component from a screenshot. It resolves the frame to the matching registry block, by its data-slot and name rather than a brittle node ID, and installs the real, maintained component. Select your "Expenses" frame and, instead of a 150-line reconstruction, you get pnpm dlx shadcn@latest add @shadcncraft/expenses-1. You ship the component we maintain, not a lookalike you inherit.
Import variables syncs your design tokens into globals.css for light and dark: colors, radius, typography, shadows, and spacing. It writes only inside a managed region, so your @theme, your imports, and your custom variables are preserved byte for byte. Point it at a Figma file, a tokens export, or an existing globals.css, and it maps everything to the right shadcn token names.
Two ideas behind all of them
Reuse beats regeneration. Your registry already contains production blocks that someone tuned and maintains. The skills install those via the shadcn CLI instead of approximating them. The output is not div-soup you would never have written; it is the same component you would have picked, with the same props, in the same composition.
Stay on your system. Generated code uses your design tokens and your configured icon library, never a hardcoded hex or a foreign icon set. Dark mode works because the tokens already have dark values. The code drops in clean.
How you use them
You do not invoke a skill by name. You describe the task and the right one triggers:
- "Turn this Figma frame into code"
- "Build this whole Figma page from our blocks"
- "Sync my Figma variables into globals.css"
When a skill activates, your agent says so, then follows its workflow: read, resolve, install, compose, and hand you back the result with the commands you need to run.
Where they fit
Agent Skills are the in-editor companion to the Figma plugin. The plugin lives in Figma; the skills live in your editor. Together they are the design-to-code loop we have been building toward, made repeatable. Generate code uses the official Figma MCP to read your frames; Import variables does not need Figma at all.
Get started
Install all four into your project:
$ pnpm dlx @shadcncraft/skills add all
Restart your editor, open a chat, and ask. Pro blocks install with your SHADCNCRAFT_LICENSE_KEY set; free-tier blocks work without one.
Read the Agent Skills overview or jump into the getting started guide. This is the workflow we wanted for ourselves, and now it is yours.
