# Introducing the new Agent Skills collection

> Ten agent skills covering the full shadcn/ui workflow: design in Figma, turn designs into code, and build pages with Pro Blocks. Included in the Plus, React, and Premium packages.

Published: 2026-08-20 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/introducing-the-new-agent-skills-collection

When we shipped the first two Agent Skills in March, the idea was simple: stop prompting your AI tool from scratch and give it a complete, tested workflow instead. Those two skills turned Figma frames into code and synced design tokens. Useful, but they covered one slice of the work.

Today we're replacing them with a collection of ten skills that covers the whole shadcn/ui workflow: designing in Figma, turning designs into production-ready code, and building full pages with <Link href="/pro-blocks">Pro Blocks</Link>. They work with Claude Code, Cursor, Codex, OpenCode, and any AI tool that supports the open agent skills format. The design skills also run inside the Figma agent as custom skills.

## Three groups, ten skills

### Design in Figma

Three skills for working inside the <Link href="/">shadcn/ui kit for Figma</Link>:

- **shadcn-design-figma** teaches the agent to design properly with the kit: assembling screens from components and Pro Blocks, binding variables and text styles, and verifying light and dark mode.
- **shadcn-design-apply-brand** applies your brand as a new style mode. It reads your brand book or website, proposes a complete theme, and creates the mode with every derived tint recomputed.
- **shadcn-design-update** brings components from a newer kit release into your file, rebuilt natively and bound to your variables, including your custom brand mode.

These run in a code editor driving the Figma MCP, or directly in the Figma agent with no code editor at all.

### Figma to code

Two skills that replace the original pair:

- **shadcn-design-figma-to-code** turns any kit-built frame into production-ready code for your stack. It detects Pro Blocks and installs them from the registry, maps kit components to your local shadcn/ui components, and merges Desktop and Mobile variants into one responsive component.
- **shadcn-design-import-style** imports any of the 8 kit styles, or your custom brand mode, into your project's `globals.css`: colors in oklch, radius, fonts, shadows, light and dark.

### Pro Blocks

Five skills for building with Pro Blocks in Next.js projects, no Figma required:

- **pro-blocks-setup** walks through registry configuration and proves it works with a verified test install.
- **pro-blocks-select** knows which blocks to use when: page recipes, category maps, and pairing rules for consistent pages.
- **pro-blocks-page** builds full pages: selects blocks, installs them, customizes renamed copies with your content, and verifies the result in light and dark mode.
- **pro-blocks-create** creates custom sections that are indistinguishable from official Pro Blocks.
- **pro-blocks-brand** re-skins a whole Pro Blocks project from your brand materials with one edit to `globals.css`.

## How to get them

The skills ship with three of our packages:

- **Plus** includes the three Design in Figma skills, delivered as a download in the Customer Portal. Use them in your editor or upload them to the Figma agent.
- **React** includes the five Pro Blocks skills. Install them with one command per editor, for example `npx shadcn@latest add @shadcndesign/skills-pro-blocks-claude`.
- **Premium** includes all ten. One command installs the full collection: `npx shadcn@latest add @shadcndesign/skills-claude`.

Your license key from the <a href="https://polar.sh/shadcndesign/portal" target="_blank" rel="noreferrer">Customer Portal</a> unlocks the registry. The <Link href="/docs/agent-skills">documentation</Link> has the step-by-step setup for every package and editor, including the MCP servers each skill group needs.

<Callout type="info">
  **Upgrading from the original two skills?** The new collection replaces
  `generate-code` and `import-variables`. Installing the new skills does not
  remove the old ones, so delete those two folders from your skills directory to
  avoid duplicate triggers.
</Callout>

## Why skills instead of prompts?

A prompt describes what you want. A skill encodes how to actually do it: the conventions, the edge cases, the verification steps. Our skills know that kit components map to your local `@/components/ui` folder, that icons come from five supported libraries, that a page is not done until it has been checked in both light and dark mode. You get the same result whether it is your first install or your fiftieth page.

If you already own the Plus, React, or Premium package, the skills are waiting in your account today. If not, the <Link href="/pricing">pricing page</Link> has the full breakdown of what each package includes.