# Agent Skills

> Ten curated agent skills for the full shadcn/ui workflow — design in Figma, turn designs into code, and build pages with Pro Blocks.

Canonical: https://www.shadcndesign.com/docs/agent-skills

## Introduction

Agent Skills are curated instruction sets that your AI tool follows to complete shadcn/ui design and development tasks. They work with [Claude Code](https://claude.ai), [Cursor](https://cursor.com), [Codex](https://openai.com/codex), [OpenCode](https://opencode.ai), and any AI tool that supports the open agent skills format — and the design skills additionally work inside the [Figma agent](https://help.figma.com/hc/en-us/articles/40283639496599-Custom-skills-for-the-Figma-agent-and-Figma-Make) as custom skills.

The collection contains ten skills in three groups:

- **Design in Figma** — design, brand, and update with the shadcn/ui kit for Figma. Included in the [Plus and Premium](/pricing) packages.
  - `shadcn-design-figma` · `shadcn-design-apply-brand` · `shadcn-design-update`
- **Figma to code** — turn kit designs into production-ready code. Included in the [Premium](/pricing) package.
  - `shadcn-design-figma-to-code` · `shadcn-design-import-style`
- **Pro Blocks** — build pages and custom blocks with Pro Blocks for React. Included in the React and [Premium](/pricing) packages.
  - `pro-blocks-setup` · `pro-blocks-select` · `pro-blocks-page` · `pro-blocks-create` · `pro-blocks-brand`

<DocsCta
  title="Agent Skills need a license"
  description="The Design in Figma skills are included in the Plus and Premium packages, the Pro Blocks skills in the React and Premium packages, and the Premium package unlocks all ten. Sign in with the email you purchased with, or get a license to unlock them."
  primaryLabel="Get a license"
  primaryHref="/pricing"
/>

> **Upgrading from the previous skills?** This collection replaces the earlier `generate-code` and `import-variables` skills (their successors are `shadcn-design-figma-to-code` and `shadcn-design-import-style`). Re-running the install command adds the new skills but does not remove old ones — delete the old `generate-code` and `import-variables` folders from your skills directory to avoid duplicate triggers.

## Installation (Premium package)

Premium customers install all ten skills with one CLI command per editor.

1. Ensure shadcn/ui is installed in your project. If not, [install it](https://ui.shadcn.com/docs/installation) now.
2. Find and copy your license key. You can find it in the [Customer Portal](https://polar.sh/shadcndesign/portal) page after logging in with your email.
3. In your project root, create a `.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.

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

5. Install the [Figma MCP](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) server (used by the Figma-related skills) and the [shadcn MCP](https://ui.shadcn.com/docs/mcp#quick-start) server (used by the code-generation skills).
6. Install the skills for your editor of choice:

```bash
# 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
```

## Installation (React package)

React package customers install the five **Pro Blocks** skills with one CLI command per editor. The setup is the same as above: shadcn/ui installed in your project, your license key from the [Customer Portal](https://polar.sh/shadcndesign/portal) in `.env.local` as `SHADCNDESIGN_LICENSE_KEY`, and the `@shadcndesign` registry in `components.json`. You also need the [shadcn MCP](https://ui.shadcn.com/docs/mcp#quick-start) server; the Figma MCP is not required for the Pro Blocks skills.

```bash
# Claude Code
npx shadcn@latest add @shadcndesign/skills-pro-blocks-claude

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

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

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

The full ten-skill items (`@shadcndesign/skills-claude` and siblings) require a Premium license key. A React key installing the `skills-pro-blocks-*` items gets exactly the five skills included in the React package.

## Installation (Plus package)

Plus customers receive the three **Design in Figma** skills as a ZIP download in the [Customer Portal](https://polar.sh/shadcndesign/portal). Two ways to use them:

**In a code editor with Figma MCP** (Claude Code, Cursor, Codex, OpenCode):

1. Download and unzip the skills from the Customer Portal.
2. Copy the skill folders into your editor's skills directory: `~/.claude/skills/` (Claude Code), `~/.cursor/skills/` (Cursor), `~/.agents/skills/` (Codex), or `~/.opencode/skills/` (OpenCode).
3. Install the [Figma MCP](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) server. The skills are now available as slash commands (e.g. `/shadcn-design-apply-brand`).

**In the Figma agent** (no code editor needed):

1. In Figma, open the agent chat and go to **Add context → Skills → Manage skills**.
2. Upload each skill's `SKILL.md` file from the unzipped download as a [custom skill](https://help.figma.com/hc/en-us/articles/40283639496599-Custom-skills-for-the-Figma-agent-and-Figma-Make).
3. Invoke them with their slash command (e.g. `/shadcn-design-figma`) or let the agent pick them up from context.

## Design in Figma

_Plus and Premium packages. Work in the Figma agent, or in a code editor driving the [Figma MCP](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)._

### shadcn-design-figma

Teaches the agent to design properly with the [shadcn/ui kit for Figma](/components): assembling screens from kit components and Pro Blocks, binding variables and text styles correctly, using IconPlaceholder for icons, and verifying light and dark mode. Fires automatically whenever you ask the agent to design something in a kit file.

```bash
/shadcn-design-figma design a settings page for our app
```

### shadcn-design-apply-brand

Applies your brand to the kit as a new style mode: analyzes your brand book, screenshots, or website (or interviews you from scratch), proposes a complete theme — colors, radius, fonts, light and dark — and on approval creates the brand mode with every derived tint recomputed.

```bash
/shadcn-design-apply-brand [attach brand book or website URL]
```

### shadcn-design-update

Brings new components from a newer kit release into your kit file. Kit updates ship as new Figma files: download the latest release from the [Customer Portal](https://polar.sh/shadcndesign/portal) and add it to your Figma account first. The agent then diffs your copy of the new release against your current kit, asks which components you want, and rebuilds them natively in your file — bound to your variables and styles, including your custom brand mode.

```bash
/shadcn-design-update [link-to-your-copy-of-the-new-kit-release]
```

> The link must point to **your own copy** of the new kit release — the file you downloaded from the Customer Portal and opened in your Figma account. Don't use the public preview link from shadcndesign.com; the agent needs a file in your account, not the read-only preview.

## Figma to code

_Premium package. Requires a code editor with the Figma MCP and shadcn MCP servers._

### shadcn-design-figma-to-code

Turns any Figma frame built with the kit into production-ready code for your stack (Next.js, Vite, Astro, and other React frameworks). Detects Pro Blocks and installs them from the registry, maps kit components to your local shadcn/ui components, merges the kit's Desktop and Mobile variants into one responsive component, and handles icons and assets.

```bash
/shadcn-design-figma-to-code [link-to-figma-frame]
```

### shadcn-design-import-style

Imports a kit style — any of the 8 built-in styles or your custom brand mode — into your project's `globals.css`: colors in oklch (light and dark), radius, fonts, shadows, and the Pro Blocks utility classes. Reads the kit's variables directly, asks which style mode to use, and verifies the written CSS against the Figma values.

```bash
/shadcn-design-import-style [link-to-figma-file]
```

## Pro Blocks

_React and Premium packages. For Next.js projects using [Pro Blocks](/pro-blocks)._

### pro-blocks-setup

Walks through the full Pro Blocks setup and proves it works: registry configuration, license key (kept out of the chat), the styles package, and a verified test install with a symptom-based troubleshooting table.

```bash
/pro-blocks-setup
```

### pro-blocks-select

Teaches the agent which blocks to use when: page recipes (landing page, storefront, product page, app screens), category map, pairing rules for consistent pages, and how to search the registry. Consulted automatically whenever the agent picks blocks.

### pro-blocks-page

Builds full pages from Pro Blocks: selects blocks, installs them, customizes renamed copies with your content (originals stay pristine for reuse and updates), shares navbar and footer across pages, and verifies the result in light and dark.

```bash
/pro-blocks-page build a landing page for [your product]
```

### pro-blocks-create

Creates custom sections that are indistinguishable from official Pro Blocks — starting from the empty-section scaffolds and following the system's tokens, utility classes, and structure conventions.

```bash
/pro-blocks-create a logo wall section with a centered heading
```

### pro-blocks-brand

Applies your brand to a Pro Blocks project: interviews you (or reads your brand materials), proposes a theme, then rewrites the shadcn tokens, radius, fonts, and Pro Blocks heading utilities in `globals.css` — one edit that re-skins every block.

```bash
/pro-blocks-brand [attach brand book or website URL]
```