---
description: Best practices to implement for the tech stack used
globs: 
---
React Best Practices:

Use functional components and hooks instead of class components
Implement proper React memo and useMemo for performance optimization
Follow the React hooks rules strictly
Utilize React.lazy and Suspense for code-splitting and lazy loading
Implement proper error boundaries to handle and display errors gracefully

React Hook Form Best Practices:

Use the useForm hook for form state management and validation
Implement custom validation rules using the validate option
Utilize the watch function for real-time form value monitoring
Use the reset function to clear form state when needed
Implement proper error handling and display for form validation

Zod Best Practices:

Use Zod for runtime type checking and validation
Define schemas using Zod's type-safe API
Utilize Zod's infer utility to derive TypeScript types from schemas
Implement custom validation rules using Zod's refine method
Use Zod's superRefine for complex, asynchronous validation

Supabase Best Practices:

Use Supabase for real-time data synchronization
Implement proper error handling for Supabase operations
Utilize Supabase's authentication features securely
Implement proper data validation before storing in Supabase
Use Supabase's row-level security features for data protection

React Query Best Practices:

Use React Query for data fetching and caching
Implement proper query keys for efficient caching and refetching
Utilize React Query's mutation API for data updates
Implement proper error handling for queries and mutations
Use React Query's staleTime and cacheTime options for performance optimization

Tailwind CSS Best Practices:

Use Tailwind's utility classes for consistent styling
Implement custom themes using Tailwind's configuration
Utilize Tailwind's responsive design utilities
Implement proper accessibility practices with Tailwind
Use Tailwind's @apply directive for component-specific styles

Radix UI Best Practices:

Use Radix UI components for accessible and customizable UI elements
Implement proper ARIA attributes for accessibility
Utilize Radix UI's composition API for custom component creation
Implement proper state management for Radix UI components
Use Radix UI's styling API for consistent theming

Date-fns Best Practices:

Use date-fns for lightweight date manipulation
Implement proper timezone handling with date-fns-tz
Utilize date-fns' format and parse functions for consistent date formatting
Implement proper error handling for date operations
Use date-fns' interval functions for date range calculations

Recharts Best Practices:

Use Recharts for responsive and customizable charts
Implement proper data formatting for chart rendering
Utilize Recharts' event handling for interactive charts
Implement proper accessibility practices for charts
Use Recharts' animation features for smooth transitions

Framer Motion Best Practices:

Use Framer Motion for performant animations
Implement proper animation variants for reusable animations
Utilize Framer Motion's gesture recognition for interactive animations
Implement proper performance optimization for complex animations
Use Framer Motion's layout animations for smooth UI transitions

General Standards:

Keep components small and focused for better maintainability
Follow proper state management patterns for scalability
Implement proper testing practices for code reliability
Use TypeScript for improved type safety and developer experience
Implement proper security measures, such as input validation and sanitization