OMC's Blog

Mastering Cursor Rules in React Projects: A Developer's Guide

May 12, 2025

🔍 Cursor Rules for React Developers

1. Understanding Rule Types and Scopes

Cursor supports three primary types of rules:(Cursor)

  • Global Rules: Set in Settings > General > Rules for AI, these apply across all projects.(Reddit)
  • Project Rules: Stored in .cursor/rules/ within your project, these are version-controlled and scoped to your codebase.(Cursor)
  • Folder-Level Rules: By placing .cursor/rules/ directories within specific folders (e.g., frontend/, backend/), you can define rules that apply only to those parts of your project.

This hierarchical structuring allows for granular control over AI behavior, ensuring that suggestions are contextually relevant. (Cursor)

2. Crafting Effective .mdc Rule Files

Each rule is written in Markdown with frontmatter metadata. Here's an example tailored for a React project:(Cursor)

---
description: React Component Standards
globs: ["**/*.tsx", "**/*.ts"]
alwaysApply: true
---

- Use functional components with TypeScript interfaces.
- Name components using PascalCase.
- Utilize Tailwind CSS for styling.
- Implement custom hooks for reusable logic.
- Avoid using `any` type; prefer explicit typings.

This rule ensures that the AI generates code adhering to your React project's conventions.

3. Utilizing Rule Types for Contextual Relevance

Cursor allows you to specify how and when rules are applied:

  • Always: Included in every AI interaction.(Medium)
  • Auto-Attached: Applied when files matching specified glob patterns are involved.(Cursor)
  • Agent-Requested: Available for the AI to include as needed, based on its assessment.(Cursor)
  • Manual: Included only when explicitly invoked using @ruleName.(Cursor)

This flexibility ensures that the AI's behavior aligns with the specific context of your development tasks.

🏗️ Structuring Your Project for Optimal AI Assistance

For larger projects or monorepos, organizing your rules can enhance maintainability and clarity:

project-root/
├── .cursor/
│   └── rules/
│       └── global-rules.mdc
├── frontend/
│   └── .cursor/
│       └── rules/
│           └── frontend-rules.mdc
├── backend/
│   └── .cursor/
│       └── rules/
│           └── backend-rules.mdc

This structure allows you to define rules that apply globally, as well as rules specific to the frontend or backend parts of your application.

🧠 Enhancing AI Context with Notepads and External Docs

1. Notepads for Reusable Context

Notepads are shareable documents within Cursor where you can store project context, guidelines, or code snippets. Reference them in chats using @notepad-name.(Builder.io)

2. Integrating External Documentation

Incorporate external documentation into the AI's context by adding URLs in Settings > Features > Docs. Reference them in chats using @docs.

⚙️ Leveraging Advanced Cursor Features

1. YOLO Mode

Enable YOLO mode in settings to allow the AI to run commands like tests or builds automatically. This is particularly useful for test-driven development workflows.

2. @web Feature

Enable real-time web searches within Cursor by activating the Web Search Tool in Settings > Features > Chat. Use @web followed by your query in chats.

📚 Additional Resources

By effectively leveraging Cursor AI and its advanced features, you can streamline your React development process, maintain consistent code quality, and enhance collaboration within your team.

Oguzhan Murat Cakmak, starting his software career in Istanbul and advancing through roles in San Francisco at Uber and Hims&Hers, now does remote work from Kaş, Antalya, balancing his passion for technology with interests in kitesurfing, diving, hiking, and exploring diverse content on podcasts. Follow him on Twitter and Instagram

Webmentions

00
    Loading Webmentions...