chore: update best practices documentation for various technologies

- Refine and expand best practices for:
  - AI SDK
  - Date-fns
  - Next.js
  - Radix UI
  - React
  - React Hook Form
  - Stripe
  - Tailwind CSS
  - TypeScript
  - Zustand
- Improve guidelines with more specific and actionable recommendations
- Enhance type safety and performance suggestions across different technologies

.cursor/rules/ai-sdk-best-practices.mdc

@@ -1,9 +1,11 @@
 ---
 description: Best practices for using Vercel AI SDK
 globs: **/*.{ts,tsx}
+alwaysApply: false
 ---
 
-- Use the AI SDK to simplify OpenAI API integration
-- Implement proper error handling and rate limiting for API calls
-- Utilize streaming responses for improved user experience in chat applications
-- Follow OpenAI's guidelines for responsible AI usage and data privacy
+- Use the `createClient` function to initialize your OpenAI client.
+- Implement proper error handling and rate limiting for API requests.
+- Utilize streaming responses for better user experience in long-running tasks.
+- Leverage the `ai` package for easy integration with React components.
+- Follow OpenAI's guidelines for responsible AI usage and data privacy

.cursor/rules/date-fns-best-practices.mdc

@@ -0,0 +1,10 @@
+---
+description: Best practices for date and time manipulation with date-fns
+globs: **/*.{ts,tsx,js,jsx}
+alwaysApply: false
+---
+
+- Use the `format` function for consistent date formatting across your application.
+- Implement proper timezone handling using the `utcToZonedTime` function.
+- Utilize the `intervalToDuration` function for calculating time differences.
+- Leverage the `isWithinInterval` function for date range checks.

.cursor/rules/nextjs-best-practices.mdc

@@ -1,9 +1,11 @@
 ---
 description: Best practices for Next.js applications and routing
 globs: **/*.{ts,tsx}
+alwaysApply: false
 ---
 
 - Utilize Next.js 15's new features like Server Actions for improved performance and security
 - Implement proper error handling with `error.tsx` and `not-found.tsx` for better user experience
 - Use `next-safe-action` for secure form submissions and API calls
+- Use the `use client` directive for client components to optimize server-side rendering
 - Leverage `next-themes` for easy theme management and dark mode support

.cursor/rules/radix-ui-best-practices.mdc

@@ -1,9 +1,11 @@
 ---
 description: Best practices for using Radix UI components
 globs: **/*.{ts,tsx}
+alwaysApply: false
 ---
 
 - Use Radix UI primitives for building custom, accessible components
-- Follow Radix UI's composition patterns for consistent component structure
+- Utilize Radix UI's composition patterns for creating complex, reusable UI elements
 - Implement proper ARIA attributes and keyboard navigation for accessibility
 - Utilize Radix UI's built-in state management for complex components
+- Customize Radix UI components using the `asChild` prop for better flexibility

.cursor/rules/react-best-practices.mdc

@@ -1,9 +1,12 @@
 ---
 description: Best practices for React component development
 globs: **/*.{ts,tsx,js,jsx}
+alwaysApply: false
 ---
 
-- Use functional components with hooks instead of class components
-- Implement proper state management using `useState` and `useReducer`
+- Use functional components with hooks instead of class components for better performance and readability
+- Implement proper state management using using libraries like Zustand for complex state scenarios
+- Utilize React 19's new features like `use` hook for better data fetching and suspense integration
+- Ensure proper prop type validation using TypeScript for enhanced type safety
 - Utilize `useCallback` and `useMemo` for performance optimization
 - Leverage `react-hook-form` for efficient form handling and validation

.cursor/rules/react-hook-form-best-practices.mdc

@@ -1,9 +1,10 @@
 ---
 description: Best practices for form handling with React Hook Form
 globs: **/*.{ts,tsx}
+alwaysApply: false
 ---
 
-- Use the `useForm` hook with TypeScript for better type safety.
-- Implement validation using Zod or Yup for complex form schemas.
-- Utilize the `Controller` component for controlled inputs.
-- Use `formState` to handle form state changes efficiently.
+- Use the `useForm` hook for efficient form state management.
+- Implement validation using Zod with `@hookform/resolvers` for type-safe form validation.
+- Utilize the `Controller` component for integrating with custom inputs.
+- Leverage the `useFormContext` hook for sharing form state across components.

.cursor/rules/stripe-best-practices.mdc

@@ -1,9 +1,11 @@
 ---
 description: Best practices for integrating Stripe payments
 globs: **/*.{ts,tsx}
+alwaysApply: false
 ---
 
-- Use `@stripe/stripe-js` for client-side Stripe integration
-- Implement proper error handling and user feedback for payment flows
-- Utilize Stripe's Elements for secure and customizable payment forms
+- Use the `@stripe/stripe-js` package for client-side Stripe integration.
+- Implement proper error handling and user feedback for payment flows.
+- Utilize Stripe's Elements for secure, customizable payment inputs.
+- Leverage Stripe's Webhooks for real-time payment status updates.
 - Follow Stripe's best practices for PCI compliance and security

.cursor/rules/tailwindcss-best-practices.mdc

@@ -1,9 +1,12 @@
 ---
 description: Best practices for styling with Tailwind CSS
 globs: **/*.{ts,tsx,css}
+alwaysApply: false
 ---
 
 - Use utility-first approach for rapid development and maintainability
-- Implement responsive design using Tailwind's responsive modifiers
+- Implement responsive design using Tailwind's built-in breakpoints
+- Utilize the `@apply` directive for creating custom utility classes
+- Leverage Tailwind's JIT mode for improved performance and smaller bundle sizes
 - Utilize `tailwind-merge` for efficient class merging and overriding
 - Leverage `tailwindcss-animate` for easy animation implementation

.cursor/rules/typescript-best-practices.mdc

@@ -1,9 +1,13 @@
 ---
 description: TypeScript coding standards and type safety guidelines
 globs: **/*.{ts,tsx}
+alwaysApply: false
 ---
 
 - Enable strict mode in your `tsconfig.json` for better type checking.
 - Use interfaces for object shapes and types for unions or intersections.
 - Leverage type inference where possible to reduce type annotations.
 - Use generics for reusable components and functions.
+- Use strict null checks to prevent null and undefined errors
+- Implement proper type inference using generics for reusable components.
+- Utilize type guards and assertions for runtime type checking.

.cursor/rules/zustand-best-practices.mdc

@@ -0,0 +1,10 @@
+---
+description: Best practices for state management with Zustand
+globs: **/*.{ts,tsx}
+alwaysApply: false
+---
+
+- Use the `create` function to define your store for simplicity and performance.
+- Implement middleware like `persist` for persisting state across sessions.
+- Utilize the `useStore` hook for accessing store state in components.
+- Leverage the `immer` middleware for easier state updates with mutable syntax.