shadcn/ui Best Practices

This skill covers best practices for working with shadcn/ui — component imports, className utilities, form building, theming, and data tables.

Use-When

This skill activates when:

• Agent works with shadcn/ui components
• Agent adds or imports shadcn components
• Agent builds forms with validation
• Agent configures theming or dark mode
• Agent creates data tables

Core Rules

• ALWAYS import shadcn components from @/components/ui/{component-name}
• ALWAYS use the cn() utility for className merging
• ALWAYS use Zod + React Hook Form for form validation
• ALWAYS use CSS variables for theming (not hardcoded colors)