Agent skill · design visual · sickn33
shadcn
Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
Why this skill is useful
Provides specific usage patterns and critical rules for managing shadcn/ui components that the AI wouldn't reliably generate on its own.
What it needs
Requires shadcn installed locally. About 8k tokens when loaded. Last updated 2026-08-07. 44,571 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. When to Use Use when adding new components from shadcn/ui or community registries. Use when styling, composing, or debugging existing shadcn/ui components. Use when initializing a new project or switching design system presets. Use to retrieve component documentation, examples, and API references. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/shadcn