shadcn skill: what it does and how to install it

Source: shadcn-ui/ui · Maintainer: shadcn/ui (official) · License: MIT · Checked: 23 October 2026

What is the shadcn skill?

The shadcn skill is the official Agent Skill from the shadcn/ui project. It gives your coding agent your project's real shadcn/ui setup and a set of rules for adding, composing and styling components the way shadcn/ui intends. It is for anyone building a React app with shadcn/ui and an agent who is tired of fixing hand-rolled markup, wrong imports and raw Tailwind colors.

The shadcn/ui docs put it this way: "Skills give AI assistants like Claude Code project-aware context about shadcn/ui." The skill's description opens by saying it manages shadcn components and projects (adding, searching, fixing, debugging, styling and composing UI, including chat interfaces), then continues: "Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", "switch to --preset", and for building a design system or applying a DESIGN.md or brand spec to shadcn/ui."

As of 23 October 2026, its skills.sh page listed about 120,800 installs.

What does it do?

It injects your project's config. The SKILL.md contains the line !`npx shadcn@latest info --json`. In Claude Code that is dynamic context injection: the command runs before Claude sees the skill, and its output replaces the line. The result tells the agent your framework, Tailwind version, import aliases, base library (radix or base), icon library, installed components, file paths, package manager and preset, so it stops guessing things like @/ versus ~/ or assuming lucide-react.

It sets principles and rules. Four principles: use existing components first, compose instead of reinventing, use built-in variants before custom styles, and use semantic colors such as bg-primary, never raw values like bg-blue-500. Then "critical rules" with incorrect and correct examples in linked files. A few of them:

• Use flex with gap-*, not space-y-*, and size-10 instead of w-10 h-10.
• Build forms with FieldGroup and Field, and mark invalid fields with data-invalid and aria-invalid.
• Dialog, Sheet and Drawer always need a title, visually hidden with sr-only if needed.
• Button has no isLoading prop; compose it with Spinner and disabled.
• Use Alert, Empty, Skeleton, Badge and Separator instead of custom styled divs.
• Chat UIs use the chat primitives (MessageScroller, Message, Bubble, Trace) rather than hand-rolled bubbles.

It sets a workflow. Check what's installed, search registries, run npx shadcn@latest docs <component> and read the docs before writing code, then add components. When updating a component, preview with --dry-run and --diff, and "never use --overwrite without the user's explicit approval." After adding anything from a community registry, the agent should read the new files and fix imports. If you ask for a block without naming a registry, it should ask which one rather than guess. Switching presets starts with a question: overwrite, partial, merge or skip.

What's in the folder:

• SKILL.md: the context line, principles, rules, workflow and a CLI quick reference.
• rules/: six files of incorrect and correct pairs (styling, forms, composition, icons, chat, base vs radix).
• cli.md, customization.md, registry.md, mcp.md: references for CLI flags, theming, building registries and the shadcn MCP server.
• design-system.md and design-system-page.md: how to turn a DESIGN.md or brand spec into a themed app and a design system page.
• scripts/showcase-coverage.mjs: a Node script that lists installed UI components no showcase file imports.
• assets/, evals/evals.json and agents/openai.yml: showcase examples, test cases and Codex display metadata.

The same repo's skills/ folder also holds a second skill, migrate-radix-to-base, for moving components from Radix UI to Base UI.

How do you install the shadcn skill?

The shadcn/ui docs give this command for the skills CLI:

npx skills add shadcn/ui

It installs into your project, and the CLI lets you choose which of the repo's skills to add. To install only this one, use the command from skills.sh:

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

Add -g to install it for every project, or -a claude-code to skip the agent prompt. For Claude Code, the folder lands in .claude/skills/shadcn/ in your project, or ~/.claude/skills/shadcn/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

claude.ai. Custom skills can be uploaded as a ZIP (Claude Help Center), but Anthropic's docs say dynamic context injection doesn't work in claude.ai chat, and the skill is built around running the shadcn CLI inside your project. Use it in a coding agent.

Want the MCP server too? It is separate. The skill's mcp.md gives shadcn mcp init to write the config for your editor, which for Claude Code is .mcp.json. See the shadcn MCP docs and our list of MCP servers.

How do you use it?

You don't call it by name. Its frontmatter sets user-invocable: false, so Claude Code hides it from the / menu and loads it when the task fits: a project with components.json, a mention of shadcn, a preset code, or a registry like @tailark.

The shadcn/ui docs suggest prompts like these:

• "Add a login form with email and password fields."
• "Create a settings page with a form for updating profile information."
• "Build a dashboard with a sidebar, stats cards, and a data table."
• "Can you add a hero from @tailark?"

A few more ideas (suggestions, not quotes):

• "Update the dialog component from upstream but keep my local changes."
• "Apply this DESIGN.md to the app and build a design system page."

You need Node.js and a package runner (npm, pnpm or bun), plus a shadcn/ui project with a components.json file for the context line to have something to read.

Tips and limits

• It runs a command on load. The context line runs shadcn@latest every time the skill loads, so you always get the newest CLI. The allowed-tools field pre-approves npx, pnpm dlx and bunx runs of shadcn@latest for that turn. Per Claude Code's docs, if an injected command fails or a deny rule blocks it, the whole skill invocation aborts.
• Security audit. As of 23 October 2026, skills.sh showed Pass from Gen Agent Trust Hub and Snyk, and Warn from Socket. Socket's 15 October 2026 audit lists one low-severity anomaly in SKILL.md: load-time command execution, the mutable @latest package, and support for installing third-party registry code, while concluding "it is not malware." Its skills.sh page also flags that the skill contains shell command directives.
• Third-party code is your call. Community registries install code you didn't write. The skill tells the agent to review added files, but read them yourself too.
• It follows the current shadcn/ui. Rules assume today's components (Field, Spinner, Empty, chat primitives). On an older project, the agent may need to add some of those before it can follow its own rules.
• License. The shadcn/ui repo is MIT licensed.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md and its files; for a repo with many skills it shows a list to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with shadcn or the shadcn/ui project.

Similar skills

• Web artifacts builder skill: Anthropic's skill that scaffolds a React, Tailwind and shadcn/ui app and bundles it into one HTML file.
• React best practices skill: Vercel's React and Next.js performance rules.
• UI UX Pro Max skill: a design database with a shadcn/ui stack among its 22.
• Frontend design skill: Anthropic's guidance for a distinctive visual direction on top of any component library.