shadcn/ui

Install

npx skills add shadcn/ui

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.

Example request

Build a profile settings page with shadcn: tabs, cards and a validated form

Limitations

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.

Security check

• The agent runs npx shadcn and writes component files into the project
• Component code is downloaded from external registries

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.

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.

Related