shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", "switch to --preset", and for building a design system or applying a DESIGN.md or brand spec to shadcn/ui.
Install
With your agent
Install OMGSkills skill "shadcn-ui/ui:shadcn" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/shadcn-ui/ui /tmp/ui && ln -s /tmp/ui/skills/shadcn ~/.claude/skills/shadcnFrom README
shadcn/ui A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. IMPORTANT: Run all CLI commands using the project's package runner: npx shadcn@latest, pnpm dlx shadcn@latest, or bunx --bun shadcn@latest — based on the project's packageManager. Examples below use npx shadcn@latest but substitute the correct runner for the project. Current Project Context The JSON above contains the project config and installed components. Use npx shadcn@latest docs to get documentation and example URLs for any component. Principles Use existing components first. Use npx shadcn@latest search to check registries before writing custom UI. Check community registries too. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. Use built-in variants before custom styles. variant="outline", size="sm", etc. Use semantic colors.