AI Skills

AI skills and rule files teach your AI editor how to work with Shadcn UI Kit. With one file in your project, the assistant knows to look for a kit block before writing UI from scratch, installs items with the Shadcn CLI and follows the kit conventions.

The MCP Server gives your editor access to the catalog. The skill tells it when and how to use it. They work best together, but the skill also works on its own with the Shadcn CLI.

What the skill covers

  • Use a kit block or component first when you ask for a page, section, dashboard or UI element.
  • Find items with the MCP server, or by registry name such as hero1, pricing3 or stat-card12.
  • Install items with npx shadcn@latest add @shadcnuikit/<name> and set up the registry in components.json when it is missing.
  • Never edit components/ui, use the theme tokens from globals.css, merge classes with cn() and keep responsive layouts and dark mode.
  • Keep your API key in .env only. The assistant never writes it into components.json, your code or the chat, and asks you for a key instead of guessing one.

Every file has the same content. Only the location and the header change for each editor. Run the command from the root of your project.

Claude Code

Claude Code loads the skill when your request matches its description.

mkdir -p .claude/skills/shadcnuikit
curl -fsSL https://shadcnuikit.com/ai/claude/SKILL.md \
  -o .claude/skills/shadcnuikit/SKILL.md

Or download SKILL.md and save it as .claude/skills/shadcnuikit/SKILL.md. To use it in every project, save it under ~/.claude/skills/shadcnuikit/ instead.

Cursor

Cursor applies the rule when the agent decides it is relevant to the request.

mkdir -p .cursor/rules
curl -fsSL https://shadcnuikit.com/ai/cursor/shadcnuikit.mdc \
  -o .cursor/rules/shadcnuikit.mdc

Or download shadcnuikit.mdc and save it in .cursor/rules/.

GitHub Copilot

Copilot in VS Code reads instruction files from .github/instructions/.

mkdir -p .github/instructions
curl -fsSL https://shadcnuikit.com/ai/copilot/shadcnuikit.instructions.md \
  -o .github/instructions/shadcnuikit.instructions.md

Or download shadcnuikit.instructions.md and save it in .github/instructions/.

Windsurf

mkdir -p .windsurf/rules
curl -fsSL https://shadcnuikit.com/ai/windsurf/shadcnuikit.md \
  -o .windsurf/rules/shadcnuikit.md

Or download shadcnuikit.md and save it in .windsurf/rules/.

Codex and other editors

Codex and many other coding agents read AGENTS.md from the project root. This command adds the kit section to the end of your file and creates the file if it does not exist:

curl -fsSL https://shadcnuikit.com/ai/AGENTS.md >> AGENTS.md

Or download AGENTS.md and paste its content into your own file.

Try it

After you add the file, ask your editor something like:

  • “Build a SaaS landing page with a hero, features, pricing and FAQ.”
  • “Add a settings page with a form layout and a danger zone.”
  • “Create a dashboard overview with stat cards, a revenue chart and a recent orders table.”

Premium items need an API key. Add REGISTRY_TOKEN to your .env as described in Shadcn CLI. When the key is missing, the assistant asks you for one instead of guessing.

MCP ServerComponents