Cursor Rules for React: 10 Prompts for .mdc Project Rules

Cursor rules for React are short .mdc files in your repo's .cursor/rules folder that tell Cursor's Agent how your React app is built: where components live, how data is fetched, how forms and tests work, and which scripts to run. The fastest way to write them is to let the Agent draft each rule from your real package.json and folder tree, then trim. Below are 10 prompts for the core rule, app code, and tests, plus one prompt that writes the whole rule set.

How Cursor rules work for a React repo

Cursor's current docs describe project rules as .mdc files in .cursor/rules with front matter fields for description, globs, and alwaysApply. A plain .md file in that folder is ignored. The rule type decides when a rule loads: Always Apply for every chat, Apply to Specific Files when a file matches the globs, Apply Intelligently when the Agent judges the description relevant, and Apply Manually when you @-mention it. A single .cursorrules file in the project root is the legacy format, so new rules should go in .cursor/rules. Keep one small Always Apply rule and scope the rest.

Prompts for the core rule

1. Evidence check

Read this package.json: [package.json] and folder tree: [tree]. List every library, script, and folder you would mention in Cursor rules and where you found it. Leave out anything you cannot find.

2. Always Apply core rule

Write an Always Apply .mdc rule under 30 lines for this React app: a one line summary, the folder map from [tree], and the exact lint, type check, and test scripts from [scripts].

3. Rule plan

Plan 4 to 6 Cursor rule files for this repo: [tree]. For each give the file name, rule type, globs or description, and purpose. Only one rule may be Always Apply.

Prompts for app code

4. Components rule

Write an Apply to Specific Files rule for [component folders] that covers export style, props typing, file naming, and styling with [Tailwind, CSS Modules, or styled-components], using these conventions: [conventions].

5. Data fetching rule

Write a rule for [TanStack Query, SWR, RTK Query, or plain fetch] in this repo: where API functions and hooks live in [tree], how loading and error states reach components, and what components must never do.

6. State rule

We use [state library or none] for client state. Write a short scoped rule that says what goes in client state, what stays in server state, and where stores live.

7. Forms rule

Write an Apply Intelligently rule with a description for building forms with [form library] and [validation library]: schema first, typed values, and how submit errors are shown.

Prompts for tests and quality

8. Testing rule

Write an Apply to Specific Files rule for test files matching [test glob] with [test runner and library]: query style, what to mock and how, and the command to run a single test file.

9. Type safety rule

Our tsconfig has [strict settings]. Write three short rules that stop the Agent from using any, non-null assertions, or type casts to silence errors, with what to do instead.

10. Agent mistakes rule

The Agent keeps doing this in our React repo: [mistakes]. Turn each one into a do and do not pair and tell me which rule file each belongs in.

Generate the whole React rule set at once

The Cursor Rules for React: .mdc Rule Set From Your Own Repo prompt runs prompts 1 to 10 in one pass. Paste package.json, your src/ tree, tsconfig and lint settings, styling and data libraries, test setup, conventions, and agent mistakes. It returns an evidence list, a rule plan, and ready-to-save .mdc files. The example covers a Vite app with React 18, TanStack Query, react-hook-form with zod, Tailwind, and Vitest with MSW.

Keep your React rules useful

• Add a rule only after the Agent makes the same mistake twice.
• Point to a real file in the repo as the example instead of pasting code into the rule.
• Do not restate what ESLint or Prettier already enforce.
• Review rules when you upgrade a major library, since old patterns linger in rules.

Related prompts

For a framework-agnostic version, use Cursor Rules .mdc From a Repo Brief, or write AGENTS.md and Cursor rules together with the AGENTS.md Plus Cursor .mdc Compiler. Other stacks: Cursor Rules for Flutter and Cursor Rules for Java Spring Boot. For React code itself, try the React Accessibility Audit and Patch List and the Senior React Developer Code Reviewer. Find more in the Agents prompts hub, browse all prompts, or share a prompt your team uses in Cursor.