Instruction file imported from taufikraden29/ibadah-tracker-react-supabase (
.cursor/rules/best-practices.mdc). Copyright stays with the author.
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