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 Pro Blocks. 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 shadcn/ui kit for Figma:

• 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 Customer Portal unlocks the registry. The documentation has the step-by-step setup for every package and editor, including the MCP servers each skill group needs.

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 pricing page has the full breakdown of what each package includes.