Skip to main content

Cursor Rules Configuration Guide

Make AI coding assistants follow your coding standards

One-sentence explanation

Cursor Rules is a configuration file (.cursorrules) that tells AI coding assistants (like Cursor, Windsurf) your coding preferences and project conventions.

Why it matters

With Cursor Rules, AI-generated code automatically follows your project standards without repeated reminders. It's like giving the AI assistant a "project manual" so it understands your style from the first line of code.

What are Cursor Rules?​

Why do you need Cursor Rules?​

Imagine:

  • ❌ Without Rules: AI generates inconsistent code styles that need repeated corrections
  • βœ… With Rules: AI automatically follows your standards, generating compliant code in one go

What can it do?​

βœ… Unify code style (indentation, naming conventions)
βœ… Enforce best practices (error handling, type checking)
βœ… Auto-add documentation comments
βœ… Follow framework conventions (React Hooks, Vue Composition API)
βœ… Avoid common mistakes (memory leaks, security vulnerabilities)

Quick Start​

Step 1: Create .cursorrules file​

Create the file in your project root:

touch .cursorrules
File location matters

Must be placed in the project root directory (same level as package.json or requirements.txt). AI assistants will automatically read this file.

Step 2: Add basic rules​

Simplest example (beginner-friendly):

# Project: Personal Blog
# Tech Stack: React + TypeScript

## Coding Standards
- Use TypeScript strict mode
- Use functional components + Hooks
- File naming: PascalCase (components), camelCase (utility functions)

## Code Style
- Indentation: 2 spaces
- Quotes: single quotes
- Semicolons: required

## Best Practices
- All functions must have JSDoc comments
- Props must define TypeScript interfaces
- Add comments when using `useState` and `useEffect` to explain purpose

Step 3: Test the effect​

In Cursor, enter the prompt:

Create a UserProfile component that displays user avatar and name

Output without Rules:

function UserProfile(props) {
  return <div>{props.name}</div>
}

Output with Rules:

/**
 * User profile display component
 * @param {UserProfileProps} props - Component properties
 */
interface UserProfileProps {
  name: string;
  avatar: string;
}

export const UserProfile: React.FC<UserProfileProps> = ({ name, avatar }) => {
  return (
    <div className="user-profile">
      <img src={avatar} alt={`${name} avatar`} />
      <h2>{name}</h2>
    </div>
  );
};
Common misconception

Rules are not magic - they rely on clear prompts. If your prompts are too vague, even with Rules you may not get ideal results. Best practice: Clear prompts + Detailed Rules = Perfect code.

Common Scenario Rule Templates​

Choose the right template based on your tech stack:

# React TypeScript Best Practices

## Component Standards
- Use functional components
- Props must define TypeScript interfaces
- Avoid using `any` type

## Hooks Usage Standards
- useState: explicitly type initial values
- useEffect: must include dependency array
- Custom Hooks: name starting with `use`

## File Structure

src/ components/ Button/ Button.tsx Button.test.tsx Button.module.css


## Error Handling
- Wrap components with ErrorBoundary
- Use try-catch for async operations
- Form validation using React Hook Form
Learning resources

Want more framework templates? Visit Vibe Coding Tools to see 400+ open-source Cursor Rules templates covering React, Vue, Angular, Python, Go, and other mainstream tech stacks.

Advanced Tips​

Tip 1: Multi-level Rules​

Project-level Rules (.cursorrules in root):

# Global Standards
- Code style: follow ESLint config
- Commit standards: use Conventional Commits

Directory-level Rules (src/components/.cursorrules):

# Component-specific standards
- All components must have Storybook stories
- Props must have default values
Priority rules

Child directory Rules override root directory Rules. In case of conflicts, Rules closer to the file have higher priority.

Tip 2: Reference external standards​

# Reference standard documentation
- Code style: https://github.com/airbnb/javascript
- React standards: https://react.dev/learn
- TypeScript standards: https://www.typescriptlang.org/docs/handbook/

## Our special conventions
[Add project-specific rules]

Tip 3: Dynamic Rules (by file type)​

# Apply different rules based on file type

## .tsx files (React components)
- Export: named exports preferred over default exports
- Styles: use CSS Modules

## .ts files (utility functions)
- Pure functions preferred
- Must have unit tests

## .test.ts files (tests)
- Use describe/it structure
- Test naming: should_[action]_when_[condition]
Ready to practice?

Want to systematically learn AI coding? Our beginner course starts from scratch and teaches you these tools step by step.

πŸ‘‰ Start learning AI coding β†’

FAQ​

Q: Where to place the Rules file?

Answer:

  • Project root: applies to entire project
  • Subdirectories: only applies to that directory and subdirectories
  • Priority: subdirectory Rules > root directory Rules
Best practice

For large projects, put general standards in root directory, specific standards in module directories. For example: root directory defines code style, src/api/ directory defines API design standards.

Q: What if Rules are too long?

Answer: Organize by category with clear headings

# πŸ“ Coding Standards
[Standards content]

# 🎨 Code Style
[Style content]

# πŸ”’ Security Standards
[Security content]

# πŸ“¦ Dependency Management
[Dependency content]
Length suggestion

Keep Rules within 300-500 lines. Overly long Rules affect AI response speed. If exceeding 500 lines, consider splitting into multiple files.

Q: How to make AI strictly follow Rules?

Prompt technique:

Please strictly follow the .cursorrules file specifications,
create a user login form component

Explicitly mentioning .cursorrules in prompts can improve AI compliance.

Q: Do Rules affect AI performance?

Answer:

  • βœ… Rules < 500 lines: almost no impact
  • ⚠️ Rules > 1000 lines: may be slightly slower
  • πŸ’‘ Recommendation: keep Rules concise, focus on core standards

Performance impact mainly comes from context length AI needs to process. Concise Rules both improve response speed and make it easier for AI to understand key points.

Official Resources​

Community Resources​

  • Vibe Coding Tools - 400+ open-source Cursor Rules

    • React, Vue, Angular framework standards
    • Python, JavaScript, TypeScript language standards
    • Clean Code, SOLID principles
    • Visit resource library β†’

  • Awesome Cursor Rules - GitHub curated collection

    • Organized by tech stack
    • Real project examples
    • Community contributions
Recommended learning path

You just read: Cursor Rules Configuration Guide βœ…

Next steps:

  1. ⏭️ AI Agents Usage Guide - Learn specialized AI assistant configuration
  2. πŸ”„ Start complete course - Systematically learn AI coding workflow
  3. πŸ› οΈ AI Tools Comparison - Understand different AI coding tools

Related in-depth reading:

Last updated: 2025-11-02

Related resources: