Import Variables: shadcncraft Agent Skill

Import variables pulls design tokens from wherever they live and writes them into your globals.css as a complete shadcn token set for light (:root) and dark (.dark), without disturbing anything you hand-authored.

The skill#

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

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-import-variables
• Cursor / Codex: name it in your prompt, e.g. "use the shadcncraft-import-variables skill to sync my Figma variables"

When it triggers#

• "Sync my Figma variables into globals.css"
• "Update my theme from Figma"
• "Import these brand colors"
• "Regenerate my CSS variables for light and dark"

What it does#

1. Resolves the token source in priority order, stopping at the first available:

   1. UI Rules MCP (coming soon, never required)
   2. The official Figma MCP variables from the shadcncraft kit
   3. An existing globals.css or exported tokens file you point to

2. Maps to shadcn token names by meaning (a brand surface becomes --background, brand becomes --primary, and so on) for both modes.

3. Merges into a managed region. Updates live only inside a marked block:

   /* shadcncraft:tokens:start */
   :root {
     /* ...mapped light tokens... */
   }
   .dark {
     /* ...mapped dark tokens... */
   }
   /* shadcncraft:tokens:end */

   Everything outside that region (your @theme, @imports, custom utilities, and bespoke variables) is preserved byte-for-byte.

4. Reports which source was used, how many tokens changed, and anything that did not map.

What it syncs#

• Colors: the full shadcn set (--background, --primary, --card, --border, --ring, sidebar and chart tokens, plus the shadcncraft status colors --info / --success / --warning), for light and dark.
• Radius: the base --radius.
• Typography: --font-sans / --font-serif / --font-mono and base letter spacing, when the source provides them.
• Shadows: the --shadow-* scale (including the decomposed tweakcn form), when provided.
• Spacing: the base --spacing unit, when provided.

Extended tokens are opt-in by presence: the skill never invents fonts or shadows a source does not define.

Merge safety#

• It never touches content outside the managed region.
• Every :root token gets a matching .dark counterpart.
• On a first run it carves your existing :root/.dark into the managed region rather than creating a duplicate, and shows you a diff first for non-trivial files.

Notes#

• Format follows your file: if your tokens are OKLCH, it writes OKLCH; if HSL, HSL.
• The shadcncraft Figma kit expresses spacing and text via its build-time token layer, so a Figma-sourced import usually carries colors and radius; typography and shadows typically come from a tweakcn theme or a brand token file.