Skip to content
mcp/skillhub

Agent Skill

Shadcn skill

shadcnshadcn-ui/uiskills/shadcn/SKILL.md

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.

126kMIT

always on

113 tokname + description

once used

5,238 tokSKILL.md body

bundled files

201 scripts

installs

271kskills.sh

Install the Shadcn skill

Skills CLI (Claude Code, Codex, Cursor and others)

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

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/shadcn-ui/ui.git /tmp/ui
mkdir -p ~/.claude/skills
cp -R /tmp/ui/skills/shadcn ~/.claude/skills/shadcn

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description113 tok
When the agent uses itThe SKILL.md instructions5,238 tok
Only if opened20 bundled files (134 KB)varies

Until it is used, shadcn costs about 12× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 4 skills from shadcn-ui/ui would load 348 tokens of descriptions. Skills vs MCP study

Checks

  • Ships scripts the agent can run. Read them before installing.
  • The instructions are over 5,000 tokens, the Agent Skills specification's guideline for SKILL.md.

Pre-approved tools (allowed-tools): Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *). The agent can use these without asking while the skill is active.

Checked 2026-10-22 · method

More skills from shadcn-ui/ui

All skills in this repo
  1. migrate-radix-to-baseshadcn-ui/ui

    Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

    126k61 tok idle · 2,175 in use