Update .cursorrules

.cursorrules

@@ -1,36 +1,126 @@
-You are an expert in TypeScript, Node.js, Next.js 15 App Router, and React 19.
+You are an expert full-stack TypeScript developer specializing in modern React applications.
 
-Key Principles
+CORE EXPERTISE:
-- Write concise, technical TypeScript code with accurate examples.
+- TypeScript
-- Use functional and declarative programming patterns; avoid classes.
+- Next.js 15 with App Router
-- Prefer iteration and modularization over code duplication.
+- React 19
-- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
+- Server Components
-- Structure files: exported component, subcomponents, helpers, static content, types.
+- Server Actions
+- Parallel and Intercepting Routes
+- CSS Modules
+- Prisma as a Database ORM
+- MDX for blog content
+- Zod for runtime type validation
 
-TypeScript Usage
+CODE ARCHITECTURE:
-- Use TypeScript for all code; prefer interfaces over types.
+1. Directory Structure:
-- Avoid enums; use maps instead.
+   /
-- Use functional components with TypeScript interfaces.
+   ├── app/           # Next.js App Router pages
+   ├── components/    # Reusable React components
+   ├── contexts/      # React contexts
+   ├── hooks/         # React hooks
+   ├── lib/           # Utility functions
+   │   ├── config/    # Configuration constants
+   │   ├── helpers/   # Utility functions
+   ├── notes/         # Blog posts in markdown/MDX format
+   ├── static/        # Static files such as images and videos
+   └── prisma/        # Database schema in Prisma format
 
-Syntax and Formatting
+2. Component Organization:
-- Use declarative JSX.
+   - Keep reusable components in ./components/.
-- Follow Prettier and ESLint rules.
+   - Each component should have its own folder containing a `.tsx` file of the same name (e.g. `ComponentName/ComponentName.tsx`)
-- Follow .editorconfig rules.
+   - Each of these folders should also have an index.ts file which exports the component for convenience (e.g. `ComponentName/index.tsx` contains `export * from "./ComponentName"` and `export { default } from "./ComponentName"`)
+   - Implement atomic design principles
 
-UI and Styling
+CODING STANDARDS:
-- Use CSS Modules for components and styling.
+1. TypeScript:
+   - Use strict type checking
+   - Use const assertions for literals
+   - Implement proper error handling
+   - Use discriminated unions for complex states
 
-Performance Optimization
+2. React Patterns:
-- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
+   - Follow Next.js App Router conventions
-- Wrap client components in Suspense with fallback.
+   - Default to Server Components
-- Use dynamic loading for non-critical components.
+   - Use `"use client"` only when necessary
-- Optimize images: use WebP format, include size data, implement lazy loading.
+   - Implement proper error boundaries
+   - Use React.Suspense for loading states
 
-Key Conventions
+3. State Management:
-- Optimize Web Vitals (LCP, CLS, FID).
+   - Use React Server Components for server state
-- Limit 'use client':
+   - Implement local state with useState
-- Favor server components and Next.js SSR.
+   - Use context sparingly and strategically
-- Use only for Web API access in small components.
-- Avoid for data fetching or state management.
 
-Follow Next.js docs for Data Fetching, Rendering, and Routing.
+4. Styling:
+   - Follow mobile-first responsive design
+   - Implement dark mode with CSS variables
+   - Use CSS modules for component-specific styles (e.g. `import styles from ./ComponentName.module.css`)
+   - Maintain consistent color schemes via existing CSS variables declared in ./app/themes.css
+
+5. Data Fetching & Mutations:
+   - Prefer Server Actions over API Routes
+   - Implement proper request caching and revalidation
+   - Use proper error handling for data fetching
+   - Implement optimistic updates where appropriate
+   - Use Zod for API input validation
+
+6. Security:
+   - Implement proper CSRF protection
+   - Use proper Content Security Policy (CSP)
+   - Sanitize user inputs
+   - Follow OWASP security guidelines
+   - Use environment variables for sensitive data
+
+PERFORMANCE OPTIMIZATION:
+- Implement proper image optimization, namely with Next.js's Image component
+- Minimize `use client`, `useEffect`, `setState`, etc; favor React Server Components (RSC).
+- Prefer server-side rendering via Server Components
+- Optimize Web Vitals (LCP, FID, CLS)
+- Implement proper caching strategies
+- Use proper lazy loading techniques
+- Implement proper route segments
+- Use parallel routes for complex layouts
+- Implement proper streaming with Suspense
+- Use partial prerendering (next/partial-prerendering)
+- Implement proper ISR strategies
+- Implement proper metadata for SEO
+
+TOOLING:
+- ESLint with strict rules
+- Prettier for code formatting
+- TypeScript strict mode enabled
+- CSS Modules for styling
+
+WHEN WRITING CODE:
+1. Prioritize:
+   - Type safety
+   - Performance
+   - Accessibility
+   - Reusability
+   - Clean code principles
+   - SEO
+
+2. Avoid:
+   - `any` type assertions
+   - Class components
+   - Prop drilling
+   - Unnecessary client-side JavaScript
+   - Direct DOM manipulation
+
+3. Prefer:
+   - Arrow function expressions
+   - Server Components where possible
+   - CSS variables for theming
+   - Composition over inheritance
+   - Early returns for conditionals
+   - Environment variables for configuration
+
+DOCUMENTATION:
+- Document any workarounds or gotchas
+
+ERROR HANDLING:
+- Implement proper error boundaries
+- Use typed error handling
+- Provide meaningful error messages
+- Log errors appropriately
+- Implement fallback UI states