Skip to content

What Is the shadcn/ui Skill? Setup for Claude Code, Codex and Cursor, SKILL.md Contents and Cost

You install the skill (`npx skills add shadcn/ui`); your coding agent reads the components.json file in your project to learn the framework, Tailwind version and installed components, then writes components following the documented rules (FieldGroup for forms, ToggleGroup for option sets, semantic colors). It is an official instruction pack in the shadcn/ui repository; the skill doesn't install components, the shadcn command-line tool run by the agent does. It is MIT-licensed and needs no account or key. Note: when the skill loads, it downloads and runs the latest version of shadcn from npm.

What it does
Makes the agent write shadcn/ui components by the rules
Type
Skill (instructions + small script)
Maker
shadcn/ui (official repository)
Account/key
Not needed
On load
Runs shadcn@latest from npm
Turkish
Instructions are in English
Cost
Free, MIT

What is the shadcn/ui skill for? What's in SKILL.md?

A skill is an instruction pack that teaches an agent how to work on a topic. shadcn/ui is a React UI kit that adds components to your project as source code. With this skill, before starting work the agent learns the framework, Tailwind version, aliases and installed components from the project's components.json file; it writes code by the documented rules, not by guesswork.

Agent writes shadcn code correctlyWhat you get: Component code that matches the project's settingsNeeds a separate setupEnforcing composition rulesWhat you get: Code that follows the rulesNeeds a separate setupDesign system with presets and DESIGN.mdWhat you get: Updated theme and componentsNeeds a separate setup
  • SKILL.md: principles, mandatory rules (FieldGroup in forms, ToggleGroup in option sets, gap for spacing, semantic colors, a title in Dialog and Sheet), a component selection table and the workflow.
  • 6 rule files: forms, composition, styling, icons, chat UI and radix vs. base differences; each contains pairs of wrong and right code.
  • Reference files: the command-line tool (cli), theming (customization), writing a custom registry, shadcn MCP.
  • Added in October 2026: a flow for building a design system from a DESIGN.md file, and chat UI components.
  • An evaluation file, images and a small Node script (counts component coverage).

This skill is not for non-coders: it doesn't kick in unless you have a web project using shadcn/ui with an agent (components.json). The skill doesn't install components; the shadcn commands run by the agent do.

Who it's for: Developers who have an agent write React or Next.js interfaces with shadcn/ui and are tired of the agent using wrong imports, wrong component structure or made-up APIs.

How do you install the shadcn/ui skill?

Requirements: Node.js (for npx), a shadcn/ui project with components.json and a coding agent. No account, API key or plan needed.

Install (shadcn docs)› npx skills add shadcn/ui

The repository holds two skills (shadcn and migrate-radix-to-base). To select only the shadcn skill, the installer's --skill flag is documented:

Only the shadcn skill (skills CLI README)› npx skills add shadcn/ui --skill shadcn

The documentation says the skill is installed into your project and activates automatically when components.json is found. It doesn't say which folder the files go to for each agent; the installer decides that.

The npx skills@1.7.1 version pin shown on the atlas card is not in the official documentation; the official command has no version. The installer (skills CLI) collects anonymous usage data; DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 turns it off.

How do you use the shadcn/ui skill?

You can't invoke the skill manually (SKILL.md: user-invocable false). In a project with components.json, when you ask for something shadcn-related, the agent activates the skill itself. Example requests from the documentation:

Add a form"Add a login form with email and password fields."
Build a dashboard"Build a dashboard with a sidebar, stats cards, and a data table."
Community component"Can you add a hero from @tailark?"If you didn't specify which registry to add a component from, the skill asks you; it doesn't choose on its own.

When changing a preset, the skill first asks what to do: overwrite, apply partially, merge or skip. When updating existing components, it first shows the difference with --dry-run and --diff; for --overwrite it asks for your explicit approval.

Apply a preset"Switch to --preset [code]. First tell me what you'll change and what my options are (overwrite, partial, merge, skip)."

Does the shadcn/ui skill work in Claude Code, Codex and Cursor?

Claude CodeYesThe documentation says "AI assistants like Claude Code" and uses it as the example.
CodexUnclearNot mentioned in the documentation. The skill folder has agents/openai.yml for Codex; it appears in the general agent list on skills.sh.
CursorUnclearNot mentioned in the documentation; it only appears in the general agent list on skills.sh.
Claude.ai (web chat)UnclearThe documentation says nothing.

"Not in the documentation" does not mean it doesn't work; it only means the official documentation doesn't state it.

What does the shadcn/ui skill run, and what does it access?

Every time the skill loads, it runs npx shadcn@latest info --json; that means downloading and executing the latest version of the shadcn package from npm at that moment. The allowed commands are also only in the shadcn@latest form. If you want to keep the package at a fixed version, there is no official option (issues #12036 and #11269 are open).

Reads

The project's components.json file and the info output (framework, Tailwind version, installed components, file paths); the component docs the agent fetches.

Writes

The skill doesn't write; when the agent runs the shadcn init, add and apply commands, component files are written to your project and dependencies are installed.

Deletes

The skill deletes nothing. SKILL.md forbids using --overwrite without your explicit approval.

Data

The scripts folder only holds a Node script that reads local files. The installer collects anonymous usage data.

The GitHub Security Advisories list is empty; OSV has no entry for the npm shadcn package. No recorded advisories appear; that does not mean "safe."

Is the shadcn/ui skill free?

Yes. The skill is published under the same MIT license as the shadcn/ui repository (Copyright 2023 shadcn); there is no paid version, plan or account requirement. The agent tool you use (Claude Code, Codex, etc.) has its own fees. Prices are in US dollars.

Common problems

What's happeningWhat to do
The skill never loads at the monorepo root Reported by usersThe info command run at load time has been reported to fail at the monorepo root (open issues #11271, #10283). There is no official fix; tell the agent explicitly which subproject it is working in.
The project slows down in Codex Reported by usersA single report (#10754). If you run into it, try removing the skill.
I want to keep my CLI version fixedThe skill only runs shadcn@latest; the request for a fixed version (#12036) is open.

How do you remove the shadcn/ui skill?

  1. With a command: npx skills remove shadcn (installer README). If you installed it globally, use the --global scope.
  2. Manually: Delete the skill folder from the agent's skills directory.

Frequently asked questions

What is the shadcn skill?

It is an official skill in the shadcn/ui repository: it has the agent read the project's components.json file and write shadcn/ui components by the documented rules. It doesn't install components; the shadcn commands run by the agent do that.

Does the shadcn skill work in Claude Code?

The documentation gives Claude Code as the example assistant and describes installation with the skills CLI. It doesn't name Codex or Cursor; the skill folder has agents/openai.yml for Codex, and both appear in the skills.sh agent list.

What's inside the shadcn skill (SKILL.md)?

SKILL.md plus 6 rule files (forms, composition, styling, icons, chat, radix vs. base differences), command-line, theming, registry and MCP references, a design-system flow from DESIGN.md, an evaluation file and a small Node script.

Are the shadcn skill and shadcn MCP the same thing?

No. The skill is an instruction pack that teaches the agent how to write; MCP is a separate server that offers tools to search and view component registries and get install commands. The skill's mcp.md file describes MCP but doesn't install it.

Is it paid?

No. It is MIT-licensed open source; no account or key needed.

Does the skill run anything on its own?

Yes. When it loads, it runs the "npx shadcn@latest info --json" command and downloads the latest version of shadcn from npm. The allowed commands are also only in the shadcn@latest form.

Related guides

shadcn MCPDESIGN.md21st MCPai-memoryawwwards-animationsBrave Search MCP

Sources

Not clear in the official sources: Whether it works in the Claude.ai web chat · documentation support for Codex and Cursor · the per-agent install folder for the skill files · whether the allowed-tools line actually removes permission prompts in Claude Code · the accuracy of the Codex memory report (#10754) · Turkish language support. Each is covered in the relevant section.