10 Cursor Rules Every React Developer Should Add to Their Project

If you're using Cursor without a .cursorrules file, you're leaving half the tool's power on the table. Cursor rules tell the AI exactly how your team writes code — your conventions, your patterns, your opinions. After tuning rules across a dozen React projects, these are the ten I never ship without.

What Are Cursor Rules?

Cursor reads a .cursorrules file in your project root to understand your coding standards. Think of it as a system prompt scoped to your codebase. Without it, Cursor generates generic React code. With it, Cursor generates your React code.

Rule 1: Enforce Server Components by Default

The single most impactful rule for Next.js App Router projects:

## Component Architecture
- All components are React Server Components by default
- Only add "use client" directive when the component needs:
  - useState, useEffect, or other React hooks
  - Browser-only APIs (window, document, localStorage)
  - Event handlers (onClick, onChange, onSubmit)
  - Third-party client libraries (framer-motion, react-hook-form)
- When "use client" is needed, push it as deep as possible in the tree
- Prefer passing server-fetched data as props over client-side fetching

Rule 2: TypeScript Strict Patterns

## TypeScript
- Never use  type. Use  with type guards if type is uncertain.
- Always define explicit return types for functions that are exported.
- Use  for object shapes that may be extended,  for unions/intersections.
- Prefer  assertions over enum for string unions.
- Use discriminated unions for state machines and variant types.
- Zod schemas are the source of truth for runtime validation; infer TS types from them.

Rule 3: File and Naming Conventions

Consistency matters more than any specific convention. Pick one and enforce it:

## Naming
- Files: kebab-case (e.g., user-profile-card.tsx)
- Components: PascalCase (e.g., UserProfileCard)
- Hooks: camelCase with "use" prefix (e.g., useUserProfile)
- Server Actions: camelCase with verb prefix in [entity].actions.ts
- Types/Interfaces: PascalCase, no "I" prefix
- Constants: UPPER_SNAKE_CASE for true constants only

Rule 4: Data Fetching Strategy

This rule prevents Cursor from generating useEffect + fetch patterns when server-side fetching is available — one of the most common AI code generation mistakes.

Rule 5: Error Handling Boundaries

Tell Cursor about your error handling strategy so it generates proper error boundaries and try-catch blocks in Server Actions rather than leaving errors unhandled.

Rule 6: Import Organization

Cursor tends to dump all imports in random order. A rule enforcing grouped imports (React, Next.js, external libs, internal modules, types) keeps diffs clean.

Rule 7: Testing Conventions

Specify whether you use Vitest or Jest, React Testing Library patterns, and what level of testing you expect. Without this, Cursor will guess differently every time.

Rule 8: State Management Rules

If your project uses Zustand, say so. If you prefer URL state with nuqs, make that explicit. This prevents Cursor from defaulting to useState for everything or suggesting Redux when your project uses something else entirely.

Rule 9: Styling Approach

## Styling
- Use Tailwind CSS utility classes exclusively. No CSS modules or styled-components.
- Use  utility (clsx + tailwind-merge) for conditional classes.
- Follow mobile-first responsive design (sm → md → lg → xl).
- Use shadcn/ui components as the base. Extend via className prop, don't wrap.
- Design tokens: use CSS variables from globals.css, not hardcoded colors.

Rule 10: Project-Specific Context

This is the rule most people miss. Tell Cursor about your domain:

## Project Context
- This is a B2B SaaS dashboard for logistics companies
- Key entities: Shipment, Carrier, Route, Invoice
- All monetary values stored as integers (cents), displayed with formatCurrency()
- Multi-tenant: every query must include organizationId filter
- Dates stored UTC, displayed in user's timezone via useTimezone() hook

Putting It All Together

Create a .cursorrules file in your project root and combine all relevant rules. Keep it under 2000 tokens for best results — Cursor performs better with focused, specific rules than with exhaustive documentation.

Key Takeaways

• A .cursorrules file transforms Cursor from a generic AI into a project-aware assistant
• Enforce Server Components by default — this single rule prevents the most common Next.js mistakes
• Include domain-specific context, not just coding patterns
• Keep rules concise and actionable — under 2000 tokens total
• Version control your rules file — it's a team knowledge asset