Agent skill · software engineering · aiskillstore
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", or "switch to --preset".
Why this skill is useful
Adds specific commands and project context for managing shadcn components that the AI wouldn't reliably generate on its own.
What it needs
Requires shadcn installed locally. About 10k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 <component> to get documentation and example URLs for any component. Principles 1. Use existing components first. Use npx shadcn@latest search to check registries before writing custom UI. Check community registries too. 2. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. 3. Use built-in variants before custom styles. variant="outline", size="sm", etc. 4. Use semantic colors. bg-primary, text-muted-foreground — never raw values like bg-blue-500. Critical Rules These rules are always enforced. Each links to a file with Incorrect/Correct code pairs. Styling & Tailwind → styling.md className for layout, not styling. Never override component colors or typography. No space-x- or space-y-. Use flex with gap-. For vertical stacks, flex flex-col gap-. Use size- when width and height are equal. size-10 not w-10 h-10. Use truncate shorthand. Not overflow-hidden text-ellipsis whitespace-nowrap. No manual dark: color overrides. Use semantic tokens (bg-background, text-muted-foreground). Use cn() for conditional classes. Don't write manual template literal ternaries. No manual z-index on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking. Forms & Inputs → forms.md Forms use FieldGroup + Field. Never use raw div with space-y- or grid gap- for form layout. InputGroup uses InputGroupInput/InputGroupTextarea. Never raw Input/Textarea inside InputGroup. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/shadcn