{"filename":"nextjs-react-tailwind-cursorrules-prompt-file.mdc","content":"---\ndescription: \"Cursor rules for Next.js development with React and Tailwind CSS integration.\"\nglobs: **/*\nalwaysApply: false\n---\n- You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, and Tailwind and Framer Motion.\n\n- Code Style and Structure\n\n  - Write concise, technical TypeScript code with accurate examples.\n  - Use functional and declarative programming patterns; avoid classes.\n  - Prefer iteration and modularization over code duplication.\n  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).\n  - Structure files: exported component, subcomponents, helpers, static content, types.\n\n- Naming Conventions\n\n  - All components should go in src/components and be named like new-component.tsx\n  - Use lowercase with dashes for directories (e.g., components/auth-wizard).\n  - Favor named exports for components.\n\n- TypeScript Usage\n\n  - Use TypeScript for all code; prefer interfaces over types.\n  - Avoid enums; use maps instead.\n  - Use functional components with TypeScript interfaces.\n\n- Syntax and Formatting\n\n  - Use the \"function\" keyword for pure functions.\n  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.\n  - Use declarative JSX.\n\n- UI and Styling\n\n  - Use Shadcn UI, and Tailwind for components and styling.\n  - Implement responsive design with Tailwind CSS; use a mobile-first approach.\n\n- Performance Optimization\n\n  - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).\n  - Wrap client components in Suspense with fallback.\n  - Use dynamic loading for non-critical components.\n  - Optimize images: use WebP format, include size data, implement lazy loading.\n\n- Key Conventions\n\n  - Use 'nuqs' for URL search parameter state management.\n  - Optimize Web Vitals (LCP, CLS, FID).\n  - Limit 'use client':\n    - Favor server components and Next.js SSR.\n    - Use only for Web API access in small components.\n    - Avoid for data fetching or state management.\n  - Follow Next.js docs for Data Fetching, Rendering, and Routing.\n  - While creating placeholder images as a part of your seed data, use local fixtures or a stable project-approved image source instead of deprecated placeholder services.\n  - Place both the /app and /components folders under a /src directory. This organization offers several benefits:\n    - It helps maintain a clean and organized project structure.\n    - It allows for easier navigation and management of components and pages.\n    - It adheres to common industry standards, making it easier for other developers to understand and contribute to the project.\n    - It provides a clear separation between application logic (in /src/app) and UI components (in /src/components), improving code readability and reusability.\n    - It simplifies the process of creating new pages and components, as you can easily find the corresponding files in the /src directory.\n    - It makes the project more modular and easier to scale as the application grows.\n    - It adheres to the principle of separation of concerns, where different aspects of the application are handled by different directories.\n\n## Components Organization\n\nWithin the /src/components folder, consider organizing components by type or feature:\n\nBy Type: Group components like forms, buttons, layout elements, etc.\n\nBy Feature: For larger applications, group components related to specific features or domains\n\nFor example:\n\n  /src/components\n  ├── /ui\n  │   ├── /Button\n  │   ├── /Modal\n  │   └── /Card\n  ├── /forms\n  │   ├── /TextField\n  │   └── /Select\n  └── /layout\n      ├── /Navbar\n      └── /Footer\n\n- Private Components: For components used only within specific pages, you can create a _components folder within the relevant /app subdirectory.\n\n- Shared Components: The /src/components folder should contain reusable components used across multiple pages or features.\n\n- Modular Approach: As your project grows, consider adopting a more modular structure, where each feature or domain has its own folder containing components, hooks, and utilities specific to that feature.\n"}