From 94e82d4c65dc1ea431bc1ad90d920591c138cff7 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Thu, 6 Mar 2025 09:13:21 -0500 Subject: [PATCH] Update .cursorrules --- .cursorrules | 148 +++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 119 insertions(+), 29 deletions(-) diff --git a/.cursorrules b/.cursorrules index be4afd6a..0a31680d 100644 --- a/.cursorrules +++ b/.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 -- Write concise, technical TypeScript code with accurate examples. -- Use functional and declarative programming patterns; avoid classes. -- Prefer iteration and modularization over code duplication. -- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). -- Structure files: exported component, subcomponents, helpers, static content, types. +CORE EXPERTISE: +- TypeScript +- Next.js 15 with App Router +- React 19 +- Server Components +- Server Actions +- Parallel and Intercepting Routes +- CSS Modules +- Prisma as a Database ORM +- MDX for blog content +- Zod for runtime type validation -TypeScript Usage -- Use TypeScript for all code; prefer interfaces over types. -- Avoid enums; use maps instead. -- Use functional components with TypeScript interfaces. +CODE ARCHITECTURE: +1. Directory Structure: + / + ├── 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 -- Use declarative JSX. -- Follow Prettier and ESLint rules. -- Follow .editorconfig rules. +2. Component Organization: + - Keep reusable components in ./components/. + - Each component should have its own folder containing a `.tsx` file of the same name (e.g. `ComponentName/ComponentName.tsx`) + - 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 -- Use CSS Modules for components and styling. +CODING STANDARDS: +1. TypeScript: + - Use strict type checking + - Use const assertions for literals + - Implement proper error handling + - Use discriminated unions for complex states -Performance Optimization -- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC). -- Wrap client components in Suspense with fallback. -- Use dynamic loading for non-critical components. -- Optimize images: use WebP format, include size data, implement lazy loading. +2. React Patterns: + - Follow Next.js App Router conventions + - Default to Server Components + - Use `"use client"` only when necessary + - Implement proper error boundaries + - Use React.Suspense for loading states -Key Conventions -- Optimize Web Vitals (LCP, CLS, FID). -- Limit 'use client': -- Favor server components and Next.js SSR. -- Use only for Web API access in small components. -- Avoid for data fetching or state management. +3. State Management: + - Use React Server Components for server state + - Implement local state with useState + - Use context sparingly and strategically -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