What are Agent Skills?

Agent Skills are curated instruction sets that your AI coding tool follows to complete Figma-to-code tasks. When you give a command like /generate-code or /import-variables along with a Figma link, the agent knows exactly how to fetch the design, map it to your project's components, and produce ready-to-use output.

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.

Two skills are included:

Generate Code — turns any Figma frame into a React component built with your project's shadcn/ui components, Tailwind CSS, and proper icon imports.
Import Variables — reads design tokens from a Figma Style Guide and writes them into your CSS file as custom properties, complete with light/dark mode and Tailwind v4 theme registration.

Prerequisites

Agent Skills rely on two MCP (Model Context Protocol) servers that your AI tool uses behind the scenes to talk to Figma and to the shadcn/ui ecosystem. You need both of them running before the skills can do anything useful.

Figma MCP

The Figma MCP server gives your AI tool the ability to read designs, extract variables, and take screenshots directly from your Figma files.

Follow Figma's official setup for your editor:

Cursor — type /add-plugin figma in the agent chat, or add the server manually in .cursor/mcp.json
Claude Code — run claude plugin install figma@claude-plugins-official, or add it manually with claude mcp add --transport http figma https://mcp.figma.com/mcp
VS Code — add "figma": { "url": "https://mcp.figma.com/mcp", "type": "http" } to your .vscode/mcp.json
Codex — run codex mcp add figma --url https://mcp.figma.com/mcp

Full instructions: Figma MCP Server documentation

shadcn/ui MCP

The shadcn MCP server lets the agent browse registries, search for components, install them, and run audits — all without you having to type CLI commands yourself.

Add this to your project's MCP config (the exact file depends on your editor):

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Full instructions: shadcn/ui MCP Server documentation

Installation

Once both MCP servers are running, you can install the skills themselves. The process has four steps: setting up shadcn/ui, adding your license key, configuring the registry, and running the install command.

1. Set up shadcn/ui

Make sure shadcn/ui is installed in your project. If you haven't done that yet, follow the official installation guide.

2. Add your license key

After purchasing the Premium package, you'll receive a license key via email. You can also find it in the customer portal by logging in with your purchase email.

Create a .env.local file in your project root (or add to the existing one):

SHADCNFIGMA_LICENSE_KEY=your_license_key

3. Configure the registry

Update the registries section of your components.json to point to the shadcnfigma registry and pass your license key as a header:

{
  "registries": {
    "@shadcnfigma": {
      "url": "https://shadcnfigma.io/api/registry/{name}",
      "headers": {
        "X-License-Key": "${SHADCNFIGMA_LICENSE_KEY}"
      }
    }
  }
}

The shadcn CLI reads the environment variable from .env.local and sends it with every request. This is how the server knows you have a valid license.

4. Install the skills for your editor

Run the command that matches your AI coding tool:

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

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

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

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

The CLI downloads two SKILL.md files and places them in the correct directory for your tool (e.g., .cursor/skills/ for Cursor, .claude/skills/ for Claude Code). Your agent picks them up automatically — no restart required in most editors.

Verifying the installation

After installing, you can confirm everything is working:

Open your AI tool's chat or agent panel.
Type /generate-code or /import-variables — your tool should recognize the command.
If the command is not recognized, restart your editor and try again. Some tools need a restart to pick up new skill files.

If you still have issues, check the FAQ below.

Updating skills

When we release updates to the skills, run the same install command again. The CLI will overwrite the old SKILL.md files with the latest version.

npx shadcn@latest add @shadcnfigma/skills-cursor

FAQ

Do I need both MCP servers running at the same time? Yes. The Figma MCP provides design data (layouts, variables, screenshots) and the shadcn MCP handles component discovery and installation. Without either one, the skills cannot complete their workflow.

Can I use the skills without the Figma Kit? The skills work with any Figma file. However, they produce the best results when the file uses the ShadcnFigma.io Figma Kit, because the variables are structured specifically to map to shadcn/ui CSS variables.

What if I already have @shadcnfigma in my registry for Pro Blocks? If you set up the registry for Pro Blocks before, you only need to make sure the header includes X-License-Key. The URL stays the same. Both blocks and skills are served from the same registry.

Which editors are supported? Any editor that supports the open agent skills format (SKILL.md). We provide dedicated install targets for Claude Code, Cursor, Codex, and OpenCode. If your tool reads skill files from a standard directory, it will work.

My agent says it cannot find the Figma MCP tools. This usually means the Figma MCP server is not connected or not authenticated. Open your MCP settings, check the connection status, and re-authenticate if needed. In Cursor, you can check under Settings > MCP. In Claude Code, run /mcp to see the status.

I get a 401 error when installing skills. This means your license key is missing or invalid. Double-check that .env.local contains the correct key, that components.json references the right environment variable name (SHADCNFIGMA_LICENSE_KEY), and that your license has not expired.

Setup