React

React components rules for Cursor

Component, hook and state rules that keep generated React readable and accessible.

The rule

Save as .cursor/rules/react.mdc. Cursor picks it up on the next request.

.cursor/rules/react.mdc

---
description: React component conventions
globs: **/*.tsx, **/*.jsx
alwaysApply: false
---

- Function components only. One exported component per file, named like the file.
- Derive values during render instead of syncing them with useEffect.
- Keep state as local as possible; lift it only when two components need it.
- Every interactive element is a real button, link or input with an accessible name.
- Lists use stable keys from data, never the array index.
- Reuse existing components from the components folder before creating new ones.

How Cursor loads this rule

Read from the frontmatter above, per Cursor's rules documentation.

  • alwaysApply: false with globs: **/*.tsx, **/*.jsx: attached automatically when a matching file is in context.
  • Keep the .mdc extension. A plain .md file in .cursor/rules is ignored by the rules system.
  • Prefer to generate your own? Type /create-rule in Agent and describe what you want; Cursor saves the file to .cursor/rules.
  • Team Rules come first, then Project Rules like this one, then User Rules. Earlier sources win when guidance conflicts.

Cursor rules setup guideCursor Team RulesLet Cursor run commands without asking

Using another agent too?

The same instructions work as plain Markdown in AGENTS.md, which Codex, Gemini CLI, GitHub Copilot and most other coding agents read.

AGENTS.md (section)

## React components

- Function components only. One exported component per file, named like the file.
- Derive values during render instead of syncing them with useEffect.
- Keep state as local as possible; lift it only when two components need it.
- Every interactive element is a real button, link or input with an accessible name.
- Lists use stable keys from data, never the array index.
- Reuse existing components from the components folder before creating new ones.

More templates

Next.js App RouterTypeScript (strict)PythonFastAPIFastifyNode.js and ExpressGoRustData science notebooks and pipelinesTesting disciplineSecurity guardrails

Get Cursor rules and settings changes by email

When Cursor changes how rules, run modes or settings work, we update these templates from the docs and send a short note. One email a week at most.

Reviewed Oct 17, 2026. Written by AgentAtlas. Adapt it to your codebase before relying on it.