The official shadcn/ui agent skill. It gives coding agents project context, CLI and registry know-how and composition rules, and now has a DESIGN.md workflow that turns a preset plus a brand spec into a fully themed app with a design system page.
Install it with:
npx skills add shadcn/uiThe base skill grounds the agent in your actual project. It runs shadcn info --json to read the framework, Tailwind version, aliases, base library, icon library and installed components. It also covers the CLI (init, add, search, view, docs, diff, build), theming with CSS variables and OKLCH colors, custom registries and the shadcn MCP server. It enforces composition rules too, such as FieldGroup for forms and ToggleGroup for option sets.
The new part is the DESIGN.md workflow. You say "build me a design system using <preset>" or "apply this DESIGN.md". If you don't give a preset code, the agent picks the style closest to the spec's geometry (vega, nova, maia, lyra, mira, luma, rhea or sera) and states why. It then scaffolds the app, runs add --all and reads the DESIGN.md frontmatter and its Do's and Don'ts. It maps colors, radius scale, elevation, fonts and type scale onto the shadcn theme, and restyles the components by editing their cva variants.
It finishes with a generated design system page: contrast-checked color pairs, type specimens, pinned state matrices and do/don't pairs. A coverage script checks that every installed component is rendered. Then it verifies the result in a browser, including dark mode and horizontal overflow.