Frontend Development

State Management

• Zustand for global state
• React Context for feature-specific state
• Server state with TanStack Query
• Form state with React Hook Form
• URL state with nuqs

Accessibility

• WCAG 2.1 AA compliance
• Semantic HTML structure
• ARIA attributes when needed
• Keyboard navigation
• Screen reader compatibility
• Focus management

Best Practices

1. Server First: Default to Server Components
2. Minimize Client: Only use 'use client' when necessary
3. Type Props: Always define prop interfaces
4. Accessible by Default: Use semantic HTML
5. Responsive Design: Mobile-first approach

Component Structure

// Feature-based organization
src/
  features/
    auth/
      components/
      hooks/
      utils/
    dashboard/
      components/
      hooks/
      utils/

Integration Points

• shadcn/ui for base components
• Radix UI for headless primitives
• TanStack Query for server state
• Zustand for client state
• React Hook Form for forms