Getting Started with shadcncraft Agent Skills

shadcncraft Agent Skills give your AI coding agent (Claude Code, Cursor, or Codex) the exact context it needs to work with the shadcncraft design system correctly. Instead of generating an approximation, the agent reuses your hand-tuned registry blocks, stays on your design tokens, and follows shadcncraft conventions.

The skills#

Access & tiers#

The skill files install freely for everyone, but what each one can do depends on what it touches:

• Import variables works for everyone: it only reads tokens and writes globals.css, with no Pro blocks involved.
• Generate code is a Pro + React feature: it installs Pro React registry blocks, which the registry serves only to a valid Pro + React SHADCNCRAFT_LICENSE_KEY. Without one it can't produce real output and will point you to pricing instead. This mirrors the Figma plugin's generate-code restriction.

Prerequisites#

• An agent that supports Agent Skills: Claude Code, Cursor, or Codex.
• A shadcncraft project: one with a components.json that has the @shadcncraft registry configured.
• The official Figma MCP connected, for Generate code and for syncing variables from Figma.
• A Pro + React license for Generate code: set SHADCNCRAFT_LICENSE_KEY in your environment. Generate code installs Pro React blocks, so it needs a valid Pro + React key to produce real output (it mirrors the Figma plugin's generate-code restriction). Import variables works for everyone, no key needed. See Access & tiers.

Quickstart#

Step 1: Install the skills#

From your project root, install both (see Installation for per-skill, multi-tool, and manual options):

pnpmyarnnpmbun
$ pnpm dlx @shadcncraft/skills add all

By default this copies the skills into the agent tools it detects in your project (.claude, .cursor, .codex, .agents), falling back to .claude/skills/.

Step 2: Restart your agent#

Open a new chat window (or restart Claude Code / Cursor) so it picks up the newly installed skills.

Step 3: Just ask#

The skills trigger automatically. Describe what you want in plain language and the matching skill activates:

• "Turn this Figma frame into code: <figma url>"
• "Build this whole Figma page from our blocks"
• "Sync my Figma variables into globals.css"

When a skill activates, the agent announces it (for example, Launching skill: shadcncraft-generate-code) and then follows the skill's workflow.

You can also invoke a skill explicitly by its name. In Claude Code, type the skill as a slash command:

/shadcncraft-generate-code
/shadcncraft-import-variables

In Cursor or Codex, reference the skill by name in your prompt (for example, "use the shadcncraft-generate-code skill"). Each skill's page lists its name and how to call it.

How it works#

Each skill is a folder with a SKILL.md (when to trigger + the workflow) and modular reference files the agent reads on demand: component mappings, token rules, and layout and image handling. The agent loads only what the task needs, so the skills stay fast while carrying a lot of shadcncraft-specific knowledge.

Two ideas run through all of them:

• Reuse beats regeneration. Your registry already contains production blocks. The skills install the real component (npx shadcn@latest add @shadcncraft/...) rather than approximating it from scratch.
• Stay on your system. Generated code uses your design tokens and your configured icon library, never hardcoded colors or a foreign icon set.

Next steps#

• Install the skills
• Read the guide for the skill you need: Generate code, Import variables
• Hitting a snag? See Troubleshooting