How to Define Cursor Rules

Cursor Rules (.cursorrules) are a powerful way to customize how Cursor's AI interacts with your codebase. By defining specific rules, you can ensure that the AI generates code that aligns with your project's style, conventions, and best practices.

What is a .cursorrules file?

A .cursorrules file is a simple text file located in the root of your project. It contains instructions that the AI reads and applies whenever it generates or modifies code in that project. Think of it as a "system prompt" specifically tailored for your repository.

Creating the File

1. Navigate to the root directory of your project.
2. Create a new file named .cursorrules.
3. Open the file in your editor.

Structure and Syntax

The .cursorrules file uses natural language. You don't need to learn a complex syntax; just write clear, concise instructions. However, structuring your rules effectively helps the AI understand them better.

Basic Example

You are an expert React developer.

- Always use functional components with hooks.
- Use TypeScript for all new files.
- Prefer Tailwind CSS for styling.
- Use 'const' over 'let' whenever possible.

Advanced Usage: Glob Patterns

You can scope rules to specific files or directories using glob patterns. This is useful when you have a monorepo or different conventions for different parts of your app.

# General Rules
- Write clean, documented code.

# Backend Rules (app/api/**/*.ts)
- Use Next.js API routes.
- Always handle errors with try/catch blocks.
- Use Zod for input validation.

# Frontend Rules (components/**/*.tsx)
- Use Shadcn UI components where possible.
- Ensure all components are accessible (a11y).

Best Practices for "Vibe Coding"

To get the most out of Cursor, follow these "Vibe Coding" principles:

1. Be Specific: Instead of "write good code," say "use early returns to avoid deep nesting."
2. Be Opinionated: Define your preferred libraries (e.g., "Use TanStack Query for data fetching").
3. Update Regularly: As your project evolves, update your rules to reflect new patterns or decisions.
4. Keep it Concise: The AI has a context window. Don't overload it with irrelevant information. Focus on what matters most.

Example: A Complete .cursorrules for a Next.js Project

You are an expert Full-Stack Developer working with Next.js 14 (App Router), TypeScript, and Tailwind CSS.

Key Principles:
- Write concise, technical TypeScript code with functional examples.
- Use composition patterns and atomic design for components.
- Prioritize server components (RSC) where possible.

Coding Standards:
- Use `const` for variable declarations.
- Use arrow functions for components: `const MyComponent = () => { ... }`.
- Use `clsx` and `tailwind-merge` for dynamic class names.

Error Handling:
- Use `toast` from `sonner` for client-side notifications.
- Log server errors to the console with context.

Dependencies:
- Lucide React for icons.
- Shadcn UI for core components.
- NextAuth.js for authentication.

By investing a few minutes to define your .cursorrules, you can save hours of code review and refactoring time. Happy coding!