.cursorrules Next.js React Tailwind

by @Shreyas Prakash

- You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, and Tailwind and Framer Motion.

- Code Style and Structure

  - 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.

- Naming Conventions

  - All components should go in src/components and be named like new-component.tsx
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for components.

- TypeScript Usage

  - Use TypeScript for all code; prefer interfaces over types.
  - Avoid enums; use maps instead.
  - Use functional components with TypeScript interfaces.

- Syntax and Formatting

  - Use the "function" keyword for pure functions.
  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
  - Use declarative JSX.

- UI and Styling

  - Use Shadcn UI, and Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.

- 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.

- Key Conventions

  - Use 'nuqs' for URL search parameter state management.
  - 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.
  - Follow Next.js docs for Data Fetching, Rendering, and Routing.
  - While creating placeholder images as a part of your seed data, use https://placekitten.com/
  - Place both the /app and /components folders under a /src directory. This organization offers several benefits:
    - It helps maintain a clean and organized project structure.
    - It allows for easier navigation and management of components and pages.
    - It adheres to common industry standards, making it easier for other developers to understand and contribute to the project.
    - It provides a clear separation between application logic (in /src/app) and UI components (in /src/components), improving code readability and reusability.
    - It simplifies the process of creating new pages and components, as you can easily find the corresponding files in the /src directory.
    - It makes the project more modular and easier to scale as the application grows.
    - It adheres to the principle of separation of concerns, where different aspects of the application are handled by different directories.

## Components Organization

Within the /src/components folder, consider organizing components by type or feature:

By Type: Group components like forms, buttons, layout elements, etc.

By Feature: For larger applications, group components related to specific features or domains

For example:

  /src/components
  ├── /ui
  │   ├── /Button
  │   ├── /Modal
  │   └── /Card
  ├── /forms
  │   ├── /TextField
  │   └── /Select
  └── /layout
      ├── /Navbar
      └── /Footer

- Private Components: For components used only within specific pages, you can create a _components folder within the relevant /app subdirectory.

- Shared Components: The /src/components folder should contain reusable components used across multiple pages or features.

- 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.

Modern Web Development Toolkit

A collection of tools for building scalable, responsive web applications using Tailwind CSS, TypeScript, and Next.js, emphasizing performance and maintainability.

Core Tools

Component Library Generator:
Auto-generate Shadcn UI/Tailwind components with TypeScript types using CLI input or JSON specs.
Responsive UI Design Tool:
Visualize breakpoints (sm/md/lg/xl) in real-time with Tailwind’s grid/flex utilities.

Code Analysis & Optimization

TypeScript Code Quality Analyzer:
Enforce naming conventions and UI guidelines aligned with Tailwind’s mobile-first patterns.
Node.js Architecture Checker:
Audit Next.js server/client component distribution using Vercel’s optimization strategies.

Performance Enhancers

Lazy Loading Service:
Auto-apply loading="lazy" and WebP conversion via @astrojs/image-like techniques.
Dynamic Import Scheduler:
Identify non-critical components for code splitting using Next.js’ dynamic.

State & Styling Solutions

‘nuqs’ State Integrator:
Manage URL params in Next.js with type-safe query synchronization.
Tailwind Customization Platform:
Create themes with Fluid’s clamp()-based scaling and export configs for TypeScript.

Project Scaffolding

Next.js Template:
Enforce /src/app routing and /src/components structure for scalability.
Framer Motion Hooks Library:
Pre-built animations (e.g., fade-ins) via React hooks, optimized for Tailwind + TypeScript.

Key Technologies:

Tailwind CSS (Breakpoints: sm:640px, md:768px, lg:1024px
Next.js App Router
TypeScript
Shadcn UI

Overview of .cursorrules prompt

The .cursorrules file outlines coding conventions and organizational best practices for a TypeScript project using Node.js, Next.js App Router, React, Shadcn UI, Tailwind, and Framer Motion. It emphasizes concise and technical coding styles, preferring functional and declarative programming patterns. The file suggests using descriptive naming conventions, TypeScript interfaces over types, and avoiding certain patterns like enums. It highlights the importance of file structuring, responsive UI design with Tailwind CSS, and performance optimization techniques such as limiting client-side interactions and employing server components. The organization of the components is suggested to be either by type or feature within a structured directory layout, enhancing modularity and scalability. The project structure under a /src directory is emphasized for clarity and adherence to industry standards.

Updated: March 17, 2025

Developers building scalable, organized Next.js projects with TypeScript, React, and Tailwind will benefit from this prompt's guidelines to maintain structure, performance, and readability.

Usefull for: