Component Layer Skill

Scope

• components/ui/*.tsx - shadcn/ui base components (Radix primitives)
• components/features/*.tsx - Feature-specific components
• components/shared/*.tsx - Reusable shared components
• components/layout/*.tsx - Layout components
• components/mdx/*.tsx - MDX-specific components
• components/providers/*.tsx - Context providers

Decision Tree

Creating a new UI primitive?

1. Check if shadcn/ui has it: Visit ui.shadcn.com first
2. If available: Use npx shadcn@latest add <component>
3. If custom: Create in components/ui/ following CVA pattern
4. Export from component file (no barrel exports needed)