Skills
Give your AI assistant deep knowledge of shadcn/ui components, patterns, and best practices.
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.
Example Assistant Prompts
- "Add a login form with email and password fields."
- "Create a settings page with a form for updating profile information."
- "Build a dashboard with a sidebar, stats cards, and a data table."
- "Switch to --preset [CODE]"
- "Can you add a hero from @tailark?"
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.
Install
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.
What's Included
Project Context
On every interaction, the skill runs shadcn info --jsonto get your project's configuration: framework, Tailwind version, aliases, base library, icon library, installed components, and resolved file paths.
CLI Commands
Full reference for all CLI commands: init, add, search, view, docs, diff, info, and build.
Theming and Customization
How CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants work. Includes guidance for both Tailwind v3 and v4.
Registry Authoring
How to build and publish custom component registries: registry.json format, item types, file objects, dependencies, CSS variables, building, hosting, and user configuration.
How It Works
Project detection
The skill activates when it finds a components.json file in your project root.
Context injection
It runs shadcn info --jsonto read your project configuration and injects the result into the assistant's context.
Pattern enforcement
The assistant follows shadcn/ui composition rules: using FieldGroup for forms, ToggleGroup for option sets, semantic colors, and correct base-specific APIs.
Component discovery
The assistant uses shadcn docs, shadcn search, or MCP tools to find components and their documentation before generating code.