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.
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:
# 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...
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
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)
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
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 })
}
}
\`\`\`
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
Instead of: "We use React" Write: "We use React 19 with Server Components. Client components must have 'use client' directive."
## 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
## Testing
- Unit tests with Vitest
- Component tests with Testing Library
- E2E tests with Playwright
- Test files: *.test.ts or *.spec.ts
Don't want to write your own? Browse our marketplace for professionally crafted .cursorrules files for:
Each one is battle-tested and continuously updated by the community.