apps/v4/content/docs/(root)/skills.mdx
Skills give AI assistants like Claude Code project-aware context about shadcn/ui. When installed, your AI assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.
For example, you can ask your AI assistant to:
The skill reads your project's components.json and provides the assistant with your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.
npx skills add shadcn/ui
This installs the shadcn skill into your project. Once installed, your AI assistant automatically loads it when working with shadcn/ui components.
Learn more about skills at skills.sh.
The skill provides your AI assistant with the following knowledge:
On every interaction, the skill runs shadcn info --json to get your project's configuration: framework, Tailwind version, aliases, base library (radix or base), icon library, installed components, and resolved file paths.
Full reference for all CLI commands: init, add, search, view, docs, diff, info, and build. Includes flags, dry-run mode, smart merge workflows, presets, and templates.
How CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants work. Includes guidance for both Tailwind v3 and v4.
How to build and publish custom component registries: registry.json format, item types, file objects, dependencies, CSS variables, building, hosting, and user configuration.
Setup and tools for the shadcn MCP server, which lets AI assistants search, browse, and install components from registries.
components.json file in your project.shadcn info --json to read your project configuration and injects the result into the assistant's context.FieldGroup for forms, ToggleGroup for option sets, semantic colors, and correct base-specific APIs.shadcn docs, shadcn search, or MCP tools to find components and their documentation before generating code.