Official shadcn/ui skill for managing components and design systems. Covers adding, searching, fixing, styling, and composing UI components with correct patterns.
What it does
Claude guesses at shadcn/ui component APIs because its training data contains many different versions of the library. It generates wrong import paths, incorrect Combobox composition patterns, missing Registry configurations, and component usage that worked in older versions but not the current one. This is the official shadcn/ui skill — built and maintained by the shadcn team — covering correct component APIs, composition patterns for complex components (Command, Combobox, DataTable), theming via CSS variables, and the CLI workflow for adding new components.
Use case
Any project using shadcn/ui. The failure mode this prevents most often: Claude generates a Combobox or DataTable that looks right but uses incorrect composition — state in the wrong place, wrong event handlers, missing accessibility attributes. Made by the shadcn/ui team.
"Add a data table with server-side sorting, filtering, and pagination." "Build a command palette with keyboard navigation and fuzzy search." "Create a multi-step form with a step indicator using shadcn/ui." "The Combobox isn't closing when I select an item — fix it using the correct pattern." "Set up dark/light theme switching with next-themes and shadcn/ui."
Install in your project. Claude generates correct shadcn/ui component usage — right import paths, correct composition, proper API usage.
For new components: Claude generates the shadcn CLI command to add them and the correct usage code.
For theming: describe your brand colours and Claude generates the CSS variable overrides for globals.css.
Input
A description of the UI component or pattern you need, or existing shadcn/ui code that needs fixing or extending.
Output
Correct shadcn/ui code: accurate import paths, proper component composition, right event handler patterns, and accessible markup. No guessed props or deprecated API usage.
npx skillsadd shadcn-ui/ui/skills/shadcn
npx skillsadd shadcn-ui/skills/shadcn-ui
Requires skills.sh CLI