What is the shadcn skill?
The shadcn skill is a SKILL.md maintained inside the shadcn-ui/ui repository. It reads your project through the shadcn CLI's info command, then makes your agent use existing components, compose them, use variants and semantic colors, and follow written rules for forms, styling, composition and icons. It does not design anything for you.
The shadcn skill lives in the skills/shadcn folder of the shadcn-ui/ui repository, next to the library's own code. It is the maintainers' own guidance for agents that work with shadcn/ui, where components are added to your project as source code through the CLI.
The skill's frontmatter marks it user-invocable: false, so it works as background knowledge instead of a command you call. The docs say it activates when it finds a components.json file in your project.
What changes in your agent's output
- The skill injects the result of
npx shadcn@latest info --json, so the agent sees your framework, aliases, Tailwind version, base library, icon library and resolved paths. - It tells the agent to search registries before writing custom UI, then compose, for example a settings page from Tabs, Card and form controls.
- Semantic colors replace raw ones. The skill names bg-primary and text-muted-foreground and rejects values such as bg-blue-500.
- Forms use FieldGroup and Field instead of a div with space-y classes, and validation uses data-invalid together with aria-invalid.
- Dialog, Sheet and Drawer always get a title, and a loading button composes a Spinner because Button has no isPending prop.
What the rules cover
The critical rules each link to a rules file with incorrect and correct code pairs: styling, forms, composition, icons, and a base-versus-radix file for the differences between the two base libraries. There is also a chat-interface section for components such as MessageScroller, Message, Bubble, Attachment and Marker.
Who the shadcn skill is for
Best for
- Projects that already use shadcn/ui, or that start from its CLI.
- Agents that keep writing space-y stacks, raw color classes or untitled dialogs.
- Teams that switch visual presets and want the agent to use the CLI's preset commands instead of hand-editing tokens.
Not for
- Choosing a visual direction. The skill enforces component usage rather than taste. Pair it with design-taste-frontend or ui-ux-pro-max for that.
- Projects without shadcn/ui. The docs say the skill activates when it finds a components.json file.
- Searching and installing from registries as a live tool. That job belongs to the shadcn MCP server.
Use it with UiChemy
shadcn/ui output is React code, so it suits a front end you ship yourself. If your target is a WordPress site, UiChemy builds there instead: UiChemy AI to WordPress imports an existing AI build, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install shadcn Skill: shadcn/ui Rules for AI Agents
git clone https://github.com/shadcn-ui/ui.gitpnpm dlx skills add shadcn/ui as the install command, using the skills CLI. The copy route above takes the same folder without that tool.Clone the repository
Run
git clone https://github.com/shadcn-ui/ui.git. The skill is the skills/shadcn folder.Copy the skill folder
Copy skills/shadcn into the folder where your agent loads skills, for your project or globally. The folder holds SKILL.md and a rules folder, and the rules files are linked from SKILL.md.
Start from a shadcn project
The docs say the skill activates when it finds components.json. If your project lacks one, the skill's CLI section covers
initand its templates: next, vite, start, react-router, astro and laravel.Ask for UI work
Try a prompt from the docs, such as adding a login form with email and password fields, or switching to a named preset.
Check that it loaded
Ask the agent to add a settings form. The result should use FieldGroup and Field, semantic color classes and gap utilities, and no space-y stacks or raw color values.
Key features
- Project context injectionSKILL.md runs npx shadcn@latest info --json. The result covers aliases, framework, Tailwind version, base library, icon library, package manager and resolved paths.
- Four principlesUse existing components first, compose instead of reinventing, use built-in variants before custom styles, and use semantic colors.
- Styling rulesNo space-x or space-y, so use flex with gap. Use size-* when width and height match, cn() for conditional classes, no manual dark: color overrides and no z-index on overlay components.
- Form rulesForms use FieldGroup and Field. InputGroup takes InputGroupInput. Option sets of 2 to 7 choices use ToggleGroup, and related checkboxes use FieldSet with FieldLegend.
- Composition rulesItems go inside their Group, Dialog and Sheet need a Title, Card uses its full header, content and footer parts, and TabsTrigger sits inside TabsList.
- Icon and chat rulesIcons in buttons use data-icon, and a dedicated chat section covers MessageScroller, Message, Bubble, Attachment and Marker.
- Base-versus-radix handlingThe agent reads the base field from the info output and follows a rules file for the differences, such as asChild on radix and render on base.
- Preset commandsThe skill covers preset decode, url, open and resolve, apply with --only for theme or font, and init --preset. It lists the named presets nova, vega, maia, lyra, mira and luma.
- Safe updatesUpdating a component uses add --dry-run and --diff to preview changes. The workflow says never to pass --overwrite without your approval and to ask which registry to use.
Frequently asked questions
What is the shadcn skill?
It is the skills/shadcn folder in the shadcn-ui/ui repository. Its SKILL.md gives your agent the project context from the shadcn CLI plus written rules for forms, styling, composition, icons and presets, so generated code uses shadcn/ui the way its maintainers intend.
How do I install the shadcn skill?
The shadcn docs give pnpm dlx skills add shadcn/ui. To avoid that tool, clone shadcn-ui/ui and copy skills/shadcn into your agent's skills folder. The skill then loads when your project has a components.json file.
Which AI agents can use the shadcn skill?
The shadcn docs describe skills as giving AI assistants such as Claude Code project-aware context, and they list Claude Code, Cursor, VS Code, Codex and OpenCode as clients for the MCP server. The skill docs do not publish a separate per-agent matrix, so check how your agent loads skill folders.
What is the difference between the shadcn skill and the shadcn MCP server?
The skill is guidance text and rules your agent reads. The shadcn MCP server is a running tool that searches, views and installs items from registries. The skill's docs include setup for both, and the MCP docs say project config such as aliases comes from the CLI info command.
Does the shadcn skill change my design?
It does not choose a style. It makes the agent use the right components, variants and tokens. You can ask for a preset change, and the skill describes apply with --only theme,font for partial updates. For direction, use a design skill such as ui-ux-pro-max.
Can the skill overwrite my components?
The workflow tells the agent to preview with add --dry-run and --diff and never to use --overwrite without your approval. It also tells the agent to ask which registry to use. Commit your work before you let any agent run CLI commands.
What license does the shadcn skill use?
The shadcn-ui/ui repository uses the MIT license, as GitHub shows. The install count of 356K on this page comes from a third-party skills listing and is not stated in the repository.