Generate Code: shadcncraft Agent Skill

Generate code converts a selected shadcncraft Figma node into React + shadcn/ui code that drops into your project clean, on your tokens, your icons, your conventions. The headline idea: the kit and the registry are the same library, so most frames already exist as a hand-tuned registry block. Reuse beats regeneration.

The skill#

• Skill name: shadcncraft-generate-code
• Installed at: your tool's skills folder, e.g. .claude/skills/shadcncraft-generate-code/

You normally don't need to call it by name; it triggers automatically when you describe a matching task (see When it triggers). To run it explicitly:

• Claude Code: type /shadcncraft-generate-code
• Cursor / Codex: name it in your prompt, e.g. "use the shadcncraft-generate-code skill on this frame"

When it triggers#

Describe a Figma-to-code task in natural language. For example:

• "Turn this Figma frame into code: <figma url>"
• "Implement this component from our Figma file"
• "Generate the React for node 52584-56368"
• "Make this mockup real"

Prerequisites#

• A Pro + React license (SHADCNCRAFT_LICENSE_KEY set). Generate code installs Pro React registry blocks, which the registry serves only to a valid Pro + React key, so it's a Pro + React feature (mirroring the Figma plugin's generate-code restriction). The skill checks for the key up front: without one it stops and points you to pricing rather than shipping a generic, un-themed approximation. (Import variables needs no key.)
• The official Figma MCP connected (so the agent can read the selected node).
• A project with components.json (the @shadcncraft registry configured) and a globals.css with the shadcn token block.

What it does#

1. Reads the node you selected or linked (name, data-slot, a screenshot).

2. Tries to reuse first. It resolves the frame to a registry item by its data-slot value or name, not its node ID, which differs between files. If it matches, it installs the real block instead of writing JSX:

   SHADCNCRAFT_LICENSE_KEY=your-key pnpm dlx shadcn@latest add @shadcncraft/expenses-1

3. Generates only when there is no match. It composes from shadcn/ui primitives and shadcncraft components, using your design tokens (no hardcoded colors, no arbitrary values) and emitting icons from your configured iconLibrary.

4. Returns the file(s), any install commands (in your package manager, with the license-key reminder for Pro items), and a short note of any assumptions.

Example#

You: Generate the React code for this Figma component: …?node-id=52584-56368

Agent: Resolves the frame ("Expenses", data-slot="expenses") to the registry item expenses-1, confirms with a screenshot, and recommends:

SHADCNCRAFT_LICENSE_KEY=your-key pnpm dlx shadcn@latest add @shadcncraft/expenses-1

rather than hand-rebuilding the chart card.

Notes#

• Reuse is the default. You get the maintained component, not a lookalike you now own.
• Tokens only. Generated code never contains hardcoded hex, rgb(), oklch(), or arbitrary Tailwind values.
• Icons come from your components.json iconLibrary, resolved to real export names (the libraries diverge: Bolt is Phosphor LightningIcon).
• A whole-page frame works too: it resolves every section to its block, then adapts each to the design (copy, images, layout) before composing.