Skills

Core Idea

The shadcn/ui Skill gives AI coding assistants (e.g. Claude Code) project-aware context by reading components.json and running shadcn info --json, so generated code uses the project's actual framework, aliases, base library, icon library, and installed components on the first try.

Key Concepts

• Install: npx skills add shadcn/ui installs the skill; the assistant auto-loads it when working with shadcn/ui components.
• Project detection: the skill activates when it finds a components.json file in the project.
• Context injection: runs shadcn info --json (framework, Tailwind version, aliases, base library base|radix|aria, icon library, installed components, resolved paths) and injects the result into the assistant's context.
• Pattern enforcement: assistant follows shadcn/ui composition rules, e.g. FieldGroup for forms, ToggleGroup for option sets, semantic colors, base-specific APIs.
• Component discovery: assistant uses shadcn docs, shadcn search, or MCP tools to find components/docs before generating code.

Code Examples

npx skills add shadcn/ui

• O que demonstra: comando único de instalação da skill no projeto.

Anti-patterns

• Expecting the skill to work without components.json: activation is gated on that file being present.

Key Takeaways

1. The skill is essentially a wrapper around shadcn info --json plus documented composition conventions, not a separate knowledge source.
2. It covers four knowledge areas: project context, full CLI command reference, theming/customization (CSS vars, OKLCH, dark mode, v3 vs v4), and registry authoring.
3. It also documents the MCP server for AI-driven registry search/browse/install.

Connects To

• cli: the info, docs, search subcommands the skill relies on.
• components-json: the file whose presence activates the skill.