shadcn/ui Component Usage

Purpose

Provide comprehensive patterns for implementing shadcn/ui components in Next.js 16 applications with Atlas-specific conventions. Focus on composition over props, accessibility-first design, and type-safe integration with tRPC and react-hook-form.

When To Use This Skill

Component Implementation:

• Adding new shadcn/ui components to the project
• Customizing component variants and styles
• Building composite components from primitives (Dialog, Form, Table)
• Implementing responsive mobile/desktop patterns

Form Integration:

• Integrating react-hook-form with shadcn Form components
• Validating forms with Zod schemas
• Connecting forms to tRPC mutations
• Handling form state and errors