Agent Skills

Introduction

Agent Skills are curated instruction sets that your AI coding tool follows to complete Figma-to-code tasks. They work with Claude Code, Cursor, Codex, OpenCode, and any AI tool that supports the open agent skills format. Agent Skills are included exclusively in our Premium Package.

Installation

Our agent skills utilize Figma MCP and shadcn MCP. You need to install these MCP servers before using our skills.

1. Ensure shadcn/ui is installed in your project. If not, install it now.
2. Find and copy your license key. If you purchased the Premium package, you can find it in Customer Portal page after logging in with your email.
3. In your project root, create .env.local file with the content: SHADCNDESIGN_LICENSE_KEY=your_license_key
4. Update your components.json file by adding our registry as presented below.

{
  ...,
  "registries": {
    "@shadcndesign": {
      "url": "https://www.shadcndesign.com/api/registry/{name}",
      "headers": {
        "X-License-Key": "${SHADCNDESIGN_LICENSE_KEY}"
      }
    }
  }
}

5. Install Figma MCP.
6. Install shadcn MCP.
7. Install our skills for your editor of choice:

# Claude Code
npx shadcn@latest add @shadcndesign/skills-claude

# Cursor
npx shadcn@latest add @shadcndesign/skills-cursor

# Codex
npx shadcn@latest add @shadcndesign/skills-codex

#OpenCode
npx shadcn@latest add @shadcndesign/skills-opencode

Available skills

Generate Code

Turn any Figma frame into a production-ready React component using your project's shadcn/ui components, Tailwind CSS classes, and proper icon imports.

The skill automatically:

• Detects Pro Blocks and installs them from the registry
• Maps Figma components to your local shadcn/ui components
• Installs missing shadcn/ui components via the CLI
• Downloads image and logo assets to public/
• Handles icons from Lucide, Tabler, and other icon libraries
• Runs a full audit checklist to verify the output

Usage

To use this skill, for example, in Claude Code:

1. Copy the link to a Figma frame you want to have the code generated.
2. In Claude Code, run the command:

/generate-code [link-to-figma-frame]

Import Variables

Sync your Figma design tokens — colors, radius, typography, shadows, spacing — as CSS custom properties directly into your globals.css.

The skill supports:

• Color formats: oklch, hsl, and hex — auto-detected from your existing CSS
• Border radius: Figma values converted to rem
• Font families: Wired through next/font with proper Tailwind v4 theme tokens
• Shadows: Mapped to --shadow-* custom properties
• Dark mode: Auto-derived when only light mode tokens are available from Figma

Usage

To use this skill, for example, in Claude Code:

1. Copy the link to a Figma page that contains the Style Guide (Style Guide page was introduced in shadcn/ui kit for Figma - March 2026).
2. In Claude Code, run the command:

/import-variables [link-to-figma-frame]