Cursor rule

1---
2description: Best practices to implement for the tech stack used
3globs: 
4---
5React Best Practices:
6 
7Use functional components and hooks instead of class components
8Implement proper React memo and useMemo for performance optimization
9Follow the React hooks rules strictly
10Utilize React.lazy and Suspense for code-splitting and lazy loading
11Implement proper error boundaries to handle and display errors gracefully
12 
13React Hook Form Best Practices:
14 
15Use the useForm hook for form state management and validation
16Implement custom validation rules using the validate option
17Utilize the watch function for real-time form value monitoring
18Use the reset function to clear form state when needed
19Implement proper error handling and display for form validation
20 
21Zod Best Practices:
22 
23Use Zod for runtime type checking and validation
24Define schemas using Zod's type-safe API
25Utilize Zod's infer utility to derive TypeScript types from schemas
26Implement custom validation rules using Zod's refine method
27Use Zod's superRefine for complex, asynchronous validation
28 
29Supabase Best Practices:
30 
31Use Supabase for real-time data synchronization
32Implement proper error handling for Supabase operations
33Utilize Supabase's authentication features securely
34Implement proper data validation before storing in Supabase
35Use Supabase's row-level security features for data protection
36 
37React Query Best Practices:
38 
39Use React Query for data fetching and caching
40Implement proper query keys for efficient caching and refetching
41Utilize React Query's mutation API for data updates
42Implement proper error handling for queries and mutations
43Use React Query's staleTime and cacheTime options for performance optimization
44 
45Tailwind CSS Best Practices:
46 
47Use Tailwind's utility classes for consistent styling
48Implement custom themes using Tailwind's configuration
49Utilize Tailwind's responsive design utilities
50Implement proper accessibility practices with Tailwind
51Use Tailwind's @apply directive for component-specific styles
52 
53Radix UI Best Practices:
54 
55Use Radix UI components for accessible and customizable UI elements
56Implement proper ARIA attributes for accessibility
57Utilize Radix UI's composition API for custom component creation
58Implement proper state management for Radix UI components
59Use Radix UI's styling API for consistent theming
60 
61Date-fns Best Practices:
62 
63Use date-fns for lightweight date manipulation
64Implement proper timezone handling with date-fns-tz
65Utilize date-fns' format and parse functions for consistent date formatting
66Implement proper error handling for date operations
67Use date-fns' interval functions for date range calculations
68 
69Recharts Best Practices:
70 
71Use Recharts for responsive and customizable charts
72Implement proper data formatting for chart rendering
73Utilize Recharts' event handling for interactive charts
74Implement proper accessibility practices for charts
75Use Recharts' animation features for smooth transitions
76 
77Framer Motion Best Practices:
78 
79Use Framer Motion for performant animations
80Implement proper animation variants for reusable animations
81Utilize Framer Motion's gesture recognition for interactive animations
82Implement proper performance optimization for complex animations
83Use Framer Motion's layout animations for smooth UI transitions
84 
85General Standards:
86 
87Keep components small and focused for better maintainability
88Follow proper state management patterns for scalability
89Implement proper testing practices for code reliability
90Use TypeScript for improved type safety and developer experience
91Implement proper security measures, such as input validation and sanitization