shadcn
Complete shadcn/ui component management for adding, searching, fixing, styling, and composing UI.
- Manages the full component lifecycle: search registries, add components, view docs, preview changes with
--dry-runand--diff, and intelligently merge upstream updates while preserving local modifications - Enforces critical rules across forms (FieldGroup, Field, InputGroup, validation states), composition (Groups, overlays, Card structure), styling (semantic colors, gap spacing, size shorthand), and icons (data-icon attributes)
- Supports multiple registries (@shadcn, @magicui, @tailark, community presets) and provides component selection guidance via a reference table covering buttons, forms, overlays, navigation, charts, and layouts
- Injects project context automatically including aliases, framework, base library (radix vs base), icon library, Tailwind version, and resolved paths to ensure correct imports and APIs
This skill contains shell command directives (!`command`) that may execute system commands. Review carefully before installing.
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, orbunx --bun shadcn@latest— based on the project'spackageManager. Examples below usenpx shadcn@latestbut substitute the correct runner for the project.
Current Project Context
!`npx shadcn@latest info --json`
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
More in React
vercel-react-best-practices
69 prioritized React performance rules covering waterfalls, bundle size, re-renders, and advanced patterns
vercel-labs/agent-skillsvercel-composition-patterns
Compound components, render props, and context patterns for scalable component APIs
vercel-labs/agent-skillswebapp-testing
Testing React apps: unit, integration, and end-to-end patterns
anthropics/skillstypescript-advanced-types
Discriminated unions, conditional types, template literals, and utility type patterns
wshobson/agentstailwind-design-system
Design system implementation with Tailwind: tokens, variants, and component patterns
wshobson/agents