shadcn/ui skill
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
- 126,880 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent runs npx shadcn and writes component files into the project
- Component code is downloaded from external registries
Install
- Works in
Manual install
npx skills add shadcn/uiInstalls the skill into agents that support SKILL.md.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent runs npx shadcn and writes component files into the project
- Component code is downloaded from external registries
This is third-party code. Review the repository files before installing.
What it does
The skill loads the project's components.json config and installed components into the agent's context. The agent then looks for an existing component with shadcn search, pulls docs with shadcn docs and adds code through the CLI instead of writing markup from scratch. Its rule set blocks common mistakes such as raw colors instead of semantic tokens, space-y instead of gap, or ad hoc forms without Field. The repository also ships the shadcn MCP server, which lets the agent browse and install items from any registry, private ones included.
Who it is for. For React and Tailwind developers who build interfaces on shadcn/ui with a coding agent.
Good fit when
- The project has components.json and the agent adds or edits components
- You want to assemble a page from existing blocks instead of hand-written markup
- You need to connect a third-party or company component registry
Not a fit when
- The project uses another component library such as MUI or Ant Design
- The interface is not built with React
Example request
Build a profile settings page with shadcn: tabs, cards and a validated formLimitations
The skill calls npx shadcn@latest, so it needs Node.js plus access to npm and the ui.shadcn.com registry. The rules target the current shadcn/ui with Tailwind; older projects may not match some advice.
How to disable. Remove the shadcn folder from the agent's skills directory. Remove the MCP server from the client config, for example .mcp.json.
FAQ
How does the skill differ from the MCP server?
The skill teaches the agent the library's rules and CLI usage. The MCP server provides tools to search and install registry items. You can use both.
Does it work with private registries?
Yes, the MCP server reads registries from components.json, and the docs cover authentication.
Discussion
No questions or reviews yet.
Related
SkillsShadcn UI MCP Server
Shadcn UI v4 MCP Server
An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native
shadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| shadcn/ui (this entry) | no | 126,880 | |
| shadcn-vue skill for agents | yes | 10,749 | the shadcn-vue skill reads your project settings and teaches an agent |
| shadcn-svelte skill for agents | yes | 9,222 | a shadcn-svelte skill |
| beUI | yes | 1,896 | a skill that picks and installs beUI animated React components |
README in short
The root README is brief and points to the docs at ui.shadcn.com. The Skills page covers installing with npx skills add shadcn/ui and what the skill contains: project context, CLI commands, theming, registry authoring and the MCP link. The MCP page lists mcp init commands for Claude Code, Cursor, VS Code, Codex and OpenCode with config examples. MIT licensed.
README badge
Original SKILL.md
--- name: shadcn description: 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", or "switch to --preset". user-invocable: false allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *) --- # shadcn/ui A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. > **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. ## Current Project Context ```json !`npx shadcn@latest info --json` ``` The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component. ## Principles 1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too. 2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. 3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc. 4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`. ## Critical Rules These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.