---
title: "shadcn skill: add, compose and fix shadcn/ui components"
canonical_url: https://cookiesforai.app/skills/shadcn-ui/shadcn
last_updated: 2026-10-02T01:58:30+02:00
type: skill
summary: "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: "npx skills add shadcn-ui/ui --skill shadcn"
related:
  - "https://cookiesforai.app/skills/anthropics/brand-guidelines"
  - "https://cookiesforai.app/skills/leonxlnx/design-taste-frontend"
  - "https://cookiesforai.app/skills/anthropics/frontend-design"
  - "https://cookiesforai.app/skills/pbakaus/impeccable"
---

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

| Fact | Value |
|---|---|
| Publisher | shadcn/ui (official, own GitHub account) |
| Source | https://github.com/shadcn-ui/ui/tree/HEAD/skills/shadcn |
| License | MIT |
| Repository stars | 124,973 on 2026-10-02 |
| Skill name | shadcn |
| Category | Frontend and design |
| Skill last changed | 2026-09-04 |
| Page updated | 2026-10-02 |
| Facts checked | 2026-10-02 |

## Install

Install the skill with the skills CLI:

```
npx skills add shadcn-ui/ui --skill shadcn
```

Or use the command from the shadcn/ui docs, which installs the repository's skills:

```
npx skills add shadcn/ui
```

## Ask your coding agent

A skill can include scripts that run on your computer, so read its source first: https://github.com/shadcn-ui/ui/tree/HEAD/skills/shadcn

```text
Install the agent skill shadcn from github.com/shadcn-ui/ui.
```

## What it 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 it

- 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 it works in

shadcn/ui documents it for Claude Code, Any agent that reads SKILL.md files, through the skills CLI. The open skills CLI also installs it into 78 agents (listed with the CLI on 2026-10-01).

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.

## License

MIT.

## Related

### Related skills for frontend and design

- [Brand Guidelines](https://cookiesforai.app/skills/anthropics/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](https://cookiesforai.app/skills/leonxlnx/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](https://cookiesforai.app/skills/anthropics/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](https://cookiesforai.app/skills/pbakaus/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.