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, Cursor, Codex, OpenCode, and any AI tool that supports the open agent skills format — and the design skills additionally work inside the Figma agent 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 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 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 packages.
  • pro-blocks-setup · pro-blocks-select · pro-blocks-page · pro-blocks-create · pro-blocks-brand

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 now.
2. Find and copy your license key. You can find it in the Customer 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.

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

5. Install the Figma MCP server (used by the Figma-related skills) and the shadcn MCP server (used by the code-generation skills).
6. Install the 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

Installation (Plus package)

Plus customers receive the three Design in Figma skills as a ZIP download in the Customer 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 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.
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.

shadcn-design-figma

Teaches the agent to design properly with the shadcn/ui kit for Figma: 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.

/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.

/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 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.

/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.

/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.

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

Pro Blocks

React and Premium packages. For Next.js projects using 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.

/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.

/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.

/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.

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