shadcn

Complete shadcn/ui component management for adding, searching, fixing, styling, and composing UI.

Core Capabilities

• Adding, updating, and debugging components using CLI commands
• Applying presets and managing project configurations
• Composing UI using existing components rather than custom markup
• Enforcing styling and structural best practices

Critical Rules

Styling

• Use semantic colors (bg-primary, not bg-blue-500)
• Apply gap-* for spacing, never space-x-* or space-y-*
• Use size-* when width equals height
• Apply cn() for conditional classes
• Avoid manual dark: overrides or manual z-index

Forms

• Structure forms with FieldGroup + Field, never raw divs
• Use ToggleGroup for 2–7 option sets

Components

• Keep items inside their containers (SelectItem → SelectGroup)
• Always include accessibility elements (DialogTitle, AvatarFallback)
• Use data-icon for button icons, no sizing classes on icons
• Compose with Spinner instead of pseudo-loading states via CSS

Icons

• Pass icons as objects, never string lookups
• Do not add size classes to icon components — use data-icon

Workflow

1. Get your project context (run npx shadcn@latest info if needed)
2. Check installed components before adding new ones
3. Run npx shadcn@latest docs <component> for current APIs
4. Use --dry-run and --diff before updating existing components
5. Verify all added files match the critical rules above

Key Project Context Fields

Your project context includes:

• isRSC — whether React Server Components are enabled
• packageManager — npm, pnpm, yarn, bun
• iconLibrary — lucide-react, radix-icons, etc.
• base — radix or base registry
• aliases — path aliases for components, utils, etc.
• resolvedPaths — actual filesystem paths for each alias

Common CLI Commands

# Add a component
npx shadcn@latest add button

# Check what's installed
npx shadcn@latest info

# View component documentation
npx shadcn@latest docs button

# Preview changes before applying
npx shadcn@latest update button --dry-run
npx shadcn@latest update button --diff

Multiple Registries

The skill supports multiple registries and automatically injects project context when running CLI commands to give accurate, project-specific guidance.

Installation

npx skills add https://github.com/shadcn/ui --skill shadcn

Mirrored from https://github.com/shadcn/ui — original author: shadcn, license: MIT. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.