shadcn
shadcn is the shadcn/ui project's own agent skill: it reads your components.json, then guides the agent to find, install, compose and style shadcn/ui components with the shadcn CLI and the project's rules.
Install shadcn
Install the skill with the skills CLI
npx skills add shadcn-ui/ui --skill shadcnOr use the command from the shadcn/ui docs, which installs the repository's skills
npx skills add shadcn/uiOr paste this into your coding agent: Install the agent skill shadcn from github.com/shadcn-ui/ui.
A skill can include scripts that run on your computer, so read its source first.
What shadcn does
shadcn is the agent skill published in the shadcn/ui repository and recommended in its documentation. It loads in any project with a components.json file and gives the agent your setup: framework, Tailwind version, path aliases, base library (Radix, Base UI or React Aria), icon library and the components already installed. The agent then uses the shadcn CLI to search registries, read component docs and add components instead of writing custom markup.
The skill enforces rules with incorrect and correct code pairs in separate files. Forms use FieldGroup and Field, option sets use ToggleGroup, dialogs always get a title, colors come from semantic tokens instead of raw Tailwind values, spacing uses gap instead of space-y, and icons inside buttons take a data-icon attribute instead of size classes. Chat interfaces are built from the library's message and bubble primitives.
It also covers maintenance. To update a component you have edited, the agent previews upstream changes with dry-run and diff and merges them, and never overwrites without your approval. Preset codes are applied through the CLI, and when you ask for a block without naming a registry, the agent asks which one instead of guessing.
When to use shadcn
- You want your agent to build a settings page or dashboard from shadcn/ui parts instead of custom divs.
- Your agent writes shadcn/ui code that ignores your aliases, icon library or Radix versus Base UI setup.
- You want to pull a block from a community registry and have its imports fixed.
- You need to update edited components from upstream without losing your changes.
When to pick something else
- Projects that do not use shadcn/ui: the skill only activates around a components.json file.
Which agents shadcn works in
shadcn/ui documents shadcn for Claude Code, Any agent that reads SKILL.md files, through the skills CLI. The open skills CLI also installs it into 78 agents, including Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode (we listed it with the CLI on October 1, 2026). See where each agent looks for skills.
The SKILL.md injects live project context by running npx shadcn@latest info --json through a command-substitution line that Claude Code executes when the skill loads. In agents without that feature the agent has to run the command itself, which the skill also tells it to do when context is stale.
shadcn license
shadcn is published under MIT.
Related skills for frontend and design
- Brand Guidelines: Brand Guidelines is Anthropic's open-source agent skill that holds Anthropic's own brand colors and fonts, so an agent can give a document, slide deck or web artifact the Anthropic look.
- Design taste frontend: design-taste-frontend, the main skill in Leon Lin's Taste Skill repository, makes an AI agent read the brief, pick a design direction and build landing pages, portfolios and redesigns that avoid templated defaults.
- Frontend Design: Frontend Design is Anthropic's open-source agent skill that steers an AI agent toward a look made for your product and away from the templated pages AI tends to produce.
- Impeccable: Impeccable is Paul Bakaus's agent skill for frontend design: one skill with 24 commands such as audit, critique and polish, plus a launcher that runs deterministic checks for common AI design mistakes.