Tutorials4 min read

How to Write Great .cursorrules Files

Master the art of .cursorrules configuration. Learn patterns, best practices, and examples that will supercharge your AI-assisted development.

ShareXInFb
How to Write Great .cursorrules Files
Table of Contents

How to Write Great .cursorrules Files

The .cursorrules file is your secret weapon for AI-assisted development. It tells Cursor (and similar AI-powered editors) exactly how to understand and work with your codebase. Here's how to write one that actually makes a difference.

What is a .cursorrules File?

A .cursorrules file is a configuration file placed in your project's root directory. When Cursor's AI reads your codebase, it uses these rules to:

  • Understand your coding conventions
  • Know what patterns to follow
  • Avoid common mistakes in your stack
  • Generate code that fits your architecture

Basic Structure

# Project Overview
Brief description of what this project does and its main purpose.

## Tech Stack
- Framework: Next.js 14 (App Router)
- Language: TypeScript (strict mode)
- Styling: Tailwind CSS
- Database: PostgreSQL with Prisma
- Auth: NextAuth.js

## Coding Conventions
- Use named exports for components
- Prefer async/await over .then()
- All API routes return typed responses

## File Organization
/app - Next.js App Router pages
/components - Reusable React components
/lib - Utility functions and configurations
/types - TypeScript type definitions

## Important Patterns
Example patterns specific to your codebase...

Essential Sections

1. Project Overview

Start with context about what your project does:

# Project: E-commerce Platform

This is a multi-vendor marketplace built for selling digital products. 
Key features:
- User authentication with role-based access (buyer/seller/admin)
- Stripe payment processing
- Digital file delivery system

2. Tech Stack Details

Be specific about versions and configurations:

## Tech Stack
- Next.js 15.2.4 with App Router (NOT Pages Router)
- React 19 with Server Components by default
- TypeScript 5.x with strict mode enabled
- Tailwind CSS v4 (use @apply sparingly)
- Prisma ORM with PostgreSQL
- NextAuth.js v5 (Auth.js)

3. Code Style Rules

Tell the AI your preferences:

## Code Style

### Components
- Use function declarations, not arrow functions for components
- Always define prop types with interfaces, not type aliases
- Colocate component styles in the same file

### Naming
- Components: PascalCase (UserProfile.tsx)
- Hooks: camelCase with 'use' prefix (useAuth.ts)
- Utils: camelCase (formatDate.ts)
- Constants: SCREAMING_SNAKE_CASE

### Imports
- Use absolute imports with @ alias
- Order: React, Next, third-party, local, styles

4. Patterns to Follow

Include examples of your patterns:

## API Route Pattern

All API routes should follow this structure:

\`\`\`typescript
import { NextResponse } from 'next/server'
import { getServerSession } from 'next-auth'
import { authOptions } from '@/lib/auth'

export async function POST(request: Request) {
  try {
    const session = await getServerSession(authOptions)
    if (!session) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
    }
    
    const body = await request.json()
    // ... implementation
    
    return NextResponse.json({ success: true, data })
  } catch (error) {
    console.error('API Error:', error)
    return NextResponse.json({ error: 'Internal error' }, { status: 500 })
  }
}
\`\`\`

5. Things to Avoid

Explicitly list anti-patterns:

## Avoid

- DO NOT use the Pages Router (/pages directory)
- DO NOT use inline styles, use Tailwind classes
- DO NOT import from 'next/router', use 'next/navigation'
- DO NOT use 'any' type, define proper interfaces
- DO NOT put business logic in components, use lib/ functions

Pro Tips

Be Specific About Your Stack

Instead of: "We use React" Write: "We use React 19 with Server Components. Client components must have 'use client' directive."

Include Error Handling Patterns

## Error Handling

All async functions should use try/catch:
- Log errors with console.error
- Return user-friendly error messages
- Use Sentry for production error tracking

Define Your Testing Approach

## Testing

- Unit tests with Vitest
- Component tests with Testing Library
- E2E tests with Playwright
- Test files: *.test.ts or *.spec.ts

Ready-Made .cursorrules

Don't want to write your own? Browse our marketplace for professionally crafted .cursorrules files for:

  • Next.js projects
  • Python/FastAPI backends
  • React Native apps
  • Full-stack TypeScript
  • And more...

Each one is battle-tested and continuously updated by the community.