shadcn Skill for Claude: What It Does and How to Install It

Makes Claude use the shadcn CLI and your project's components.json to add, fix and style shadcn/ui components the way the library intends.

Installs: 271.1K; on skills.sh
Stars: 127.1K; on GitHub
Files: 20; besides SKILL.md
Updated: Oct 2026; last repo commit

The shadcn skill makes Claude check what you already have before it writes UI. It reads your project's shadcn config, searches registries for an existing component, looks up that component's docs, then adds it with the shadcn CLI. It also carries hard rules, such as gap-* instead of space-y-*, semantic colors like bg-primary, and FieldGroup for forms.

Claude loads it on its own when you work with shadcn/ui, component registries, presets or any project with a components.json file. It is marked as not user-invocable, so there is no slash command to type. It runs the shadcn CLI through npx, pnpm dlx or bunx, so you need Node or Bun and a project to run it in.

Good for

Frontend developers building with shadcn/ui
Teams turning a DESIGN.md or brand spec into a themed shadcn app
Developers building chat interfaces from shadcn components

Install shadcn

Claude Code

Copy this prompt.

Install the shadcn skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. 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.

Sections in SKILL.md

Current Project Context
Principles
Critical Rules
Styling & Tailwind → [styling.md](./rules/styling.md)
Forms & Inputs → [forms.md](./rules/forms.md)
Component Structure → [composition.md](./rules/composition.md)
Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
Icons → [icons.md](./rules/icons.md)
Chat & Messaging → [chat.md](./rules/chat.md)
CLI
Key Patterns
Component Selection
Key Fields
Component Docs, Examples, and Usage
Workflow
Design Systems from DESIGN.md

Key facts

Author: shadcn
Repo: shadcn/ui (skills/shadcn)
Installs on skills.sh: 271,099 (Nov 2026)
GitHub stars: 127,115 (Nov 2026)
License: MIT
Last repo commit: Oct 31, 2026
Files in the skill folder: 21 including SKILL.md
skills.sh audits: Gen Agent Trust Hub: pass, Socket: warn, Snyk: pass
Runs: The shadcn CLI (npx, pnpm dlx or bunx), including one command when the skill loads
Slash command: None; Claude loads it itself (user-invocable: false)

What it includes

Runs the shadcn info command on load to read your config and installed components
Runs code · Project context
Looks for an existing component in shadcn and community registries first
Runs code · Search registries
Gets doc and example URLs for a component, then reads them before using the component
Runs code · Component docs
Adds component source files; previews changes with --dry-run and --diff first
Runs code · Add and update components
Starts a project from a preset or applies one, asking you how to merge
Runs code · Presets
Builds a themed app and a design system page from a DESIGN.md or brand spec
Runs code · Design system from DESIGN.md
Always-on rules for styling, forms, composition, icons and chat interfaces
Critical rules

From the official docs

Permissions

Medium risk

Claude can add, overwrite or restyle component files in your project and pull in code from community registries. Work on a git branch and read what it added before you commit.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It writes component files into your project
Commands like add, init and apply create or change files. Use git so you can review and undo the changes.
Community registry code lands in your project
SKILL.md tells Claude to read added files and fix hardcoded import paths. Do the same review yourself.
Presets and design-system runs change many files
`apply <code>` overwrites detected components, fonts and CSS variables, and the DESIGN.md flow runs `init ... -y`, `add --all -y` and the bundled scripts/showcase-coverage.mjs. SKILL.md tells Claude to ask you first about overwrite, partial, merge or skip when switching presets.
It runs a shadcn command as soon as it loads
The skill runs the shadcn info command to read project context. It reads your config and installed components.

Technical details

Talks to	npm registry (npx shadcn@latest). shadcn registries and any community registry you name

Questions

How do I install the shadcn skill?

Use the install box above. The skill reads a components.json file, so use it inside a project that already uses shadcn/ui or one you are about to create.

How do I use it?

You do not call it: SKILL.md sets user-invocable: false. Its description says it applies when you work with shadcn/ui, component registries, presets, --preset codes or a project with a components.json file, so just ask for the UI change you want.

Does it need an API key?

SKILL.md asks for no API key. It runs the shadcn CLI, which fetches components and docs from registries over the network.

Is the shadcn skill safe?

Its allowed-tools line lists only shadcn CLI commands (npx, pnpm dlx or bunx with shadcn@latest), but those commands write component files into your project and can pull code from community registries. SKILL.md says to read every added file and never to use --overwrite without your approval. Work on a git branch so you can review the diff.

Why use this instead of just asking Claude about shadcn?

It gives Claude your project config (injected by running npx shadcn@latest info --json when the skill loads), a rule to fetch component docs before using a component, and fixed rules for styling, forms, composition, icons and chat UI.

Information

updated Nov 2, 2026

Repository: shadcn/ui
Folder: skills/shadcn

shadcn/ui skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 1

shadcn SKILL.md · github.com