Agent skill · shadcn

shadcn/ui skill for Claude Code, Codex and Cursor

Adds, searches, styles and debugs shadcn/ui components with project-aware docs.

Officialname: shadcn★ 126k (repo)pushed 2026-10-24MITSKILL.md on GitHubchecked 2026-11-07

What it does, in the publisher's words

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.

The description field of the SKILL.md. The agent reads only this at startup and decides from it when to load the full skill.

Install shadcn/ui

The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs

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

Copy the skill folder into ~/.claude/skills (all projects) or .claude/skills (this repo). Claude Code picks it up without a restart. docs

npx skills add shadcn-ui/ui --skill shadcn -a claude-code

# or by hand:
git clone --depth 1 https://github.com/shadcn-ui/ui.git /tmp/shadcn-src
cp -r /tmp/shadcn-src/skills/shadcn ~/.claude/skills/shadcn

Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs

git clone --depth 1 https://github.com/shadcn-ui/ui.git /tmp/shadcn-src
cp -r /tmp/shadcn-src/skills/shadcn ./shadcn
zip -r shadcn.zip shadcn

Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs

npx skills add shadcn-ui/ui --skill shadcn -a codex

gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs

gh skill install shadcn-ui/ui shadcn

Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs

npx skills add shadcn-ui/ui --skill shadcn -a cursor

Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs

gemini skills install https://github.com/shadcn-ui/ui.git --path skills/shadcn

OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs

npx skills add shadcn-ui/ui --skill shadcn -a opencode

Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs

npx skills add shadcn-ui/ui --skill shadcn -a windsurf

Works with

Claude Code, Claude.ai and Claude Desktop, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and other agents that read the open Agent Skills format.

Uses user-invocable in its frontmatter: Claude Code extensions to the Agent Skills format. Other agents load the skill but may not honor that field.
Pre-approves these tools (allowed-tools, experimental in the spec): Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *).
Bundles 1 JavaScript script the agent can run, so it needs JavaScript on the machine. In the Claude apps, code execution must be on.

What's in the SKILL.md

19 sections

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

Bundled files

agents/openai.yml
assets/shadcn-small.png
assets/shadcn.png
assets/showcase/color-pair.tsx
assets/showcase/preview-states.css
assets/showcase/state-matrix.tsx
cli.md
customization.md
design-system-page.md
design-system.md
evals/evals.json
mcp.md
registry.md
rules/base-vs-radix.md
rules/chat.md
rules/composition.md
rules/forms.md
rules/icons.md
rules/styling.md
scripts/showcase-coverage.mjs

Loaded only when the instructions point to them.

Facts

Skill name: shadcn
Publisher: shadcn (official)
Repo: shadcn-ui/ui
License: MIT
SKILL.md size: 2,229 words, 290 lines
Bundled files: 20, 1 scripts (JavaScript), 12 docs
Repo stars: 126k (as of 2026-10-24)
SKILL.md checked: 2026-11-07

Pairs with the shadcn/ui MCP server: the server gives the agent the tools, the skill teaches it how to use them.

Related frontend & design skills

FAQ

What does the shadcn skill do?+

Adds, searches, styles and debugs shadcn/ui components with project-aware docs. In its own SKILL.md, shadcn describes it as: "Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples."

How do I install the shadcn skill?+

Run npx skills add shadcn-ui/ui --skill shadcn and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/shadcn/SKILL.md; in Codex and Cursor in .agents/skills/shadcn/.

Does shadcn/ui work in Codex, Cursor and Copilot, or only Claude?+

It's a standard SKILL.md, so any agent that reads the Agent Skills format can use it: Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more. It also sets user-invocable, which are Claude Code extensions; other agents may ignore it.

Who maintains shadcn/ui?+

shadcn, the company or project behind it, in the shadcn-ui/ui repo on GitHub, last pushed 2026-10-24. License: MIT.

Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. Claude skills marketplace · How to install skills · MCP servers