Cursor rules for React
Short answer: a Cursor rule is a .mdc file in .cursor/rules/ that tells Cursor how to write code for your project. Start with one general React rule, then add rules for the libraries you use. Our database holds 102 open-license Cursor rules tagged React. These 5 cover the common cases.
Want picks for your own repo? Scan your project free. You see the match count and 2 picks. The full list is $9 once, up to 30 ranked picks for that scan.
5 Cursor rules for React
| Rule | Repo | License | What it covers | Install |
|---|---|---|---|---|
| react | sanjeed5/awesome-cursor-rules-mdc | CC0-1.0 | React with TypeScript: components, hooks, state | curl -fsSL --create-dirs -o .cursor/rules/react.mdc https://raw.githubusercontent.com/sanjeed5/awesome-cursor-rules-mdc/HEAD/rules-mdc/react.mdc |
| react | claire-gong-18/awesome-cursorrules | CC0-1.0 | Short general React rule | curl -fsSL --create-dirs -o .cursor/rules/react.mdc https://raw.githubusercontent.com/claire-gong-18/awesome-cursorrules/HEAD/rules-new/react.mdc |
| react-query | sanjeed5/awesome-cursor-rules-mdc | CC0-1.0 | Data fetching with React Query | curl -fsSL --create-dirs -o .cursor/rules/react-query.mdc https://raw.githubusercontent.com/sanjeed5/awesome-cursor-rules-mdc/HEAD/rules-mdc/react-query.mdc |
| zustand | sanjeed5/awesome-cursor-rules-mdc | CC0-1.0 | State with Zustand | curl -fsSL --create-dirs -o .cursor/rules/zustand.mdc https://raw.githubusercontent.com/sanjeed5/awesome-cursor-rules-mdc/HEAD/rules-mdc/zustand.mdc |
| component-development | tugkanboz/awesome-cursorrules | MIT | Component structure and tests | curl -fsSL --create-dirs -o .cursor/rules/component-development.mdc https://raw.githubusercontent.com/tugkanboz/awesome-cursorrules/HEAD/example-structures/react-typescript/.cursor/rules/component-development.mdc |
Each install line downloads one .mdc file into .cursor/rules/ in your repo, where Cursor reads project rules (Cursor rules docs). Open the file and trim what does not fit your project before you commit it.
How to pick rules
- One general rule for the language or framework.
- One rule per main library you use. Skip rules for libraries you do not use, since each one adds to the prompt.
- Your own rule for team habits: folder layout, naming, test commands.
For React Native and Expo, our database has react-native and expo rules from the same repo. A scan of your repo finds them when they fit.
For Next.js apps, see Cursor rules for Next.js. For Claude Code skills, see the React guide and the React skills page.
FAQ
Where do Cursor rules go?
In .cursor/rules/ at the root of your repo, as .mdc files. Cursor reads them for that project. Commit the folder so your team gets the same rules.
Should I use .cursorrules or .cursor/rules?
Cursor's docs describe project rules as .mdc files in .cursor/rules/. The install lines above use that folder.
Do Cursor rules work in Claude Code? Not as is. Claude Code reads SKILL.md skills and CLAUDE.md. Our scan finds both Cursor rules and skills for your repo.
Are these rules free? Yes. Each one shows its license in the table.
Checked 2026-10-24. Prices and policies change. Confirm on the source before you buy.
Sources
More guides
- Best Claude Code skills for Next.js: 3 free picks and how to install them (2026)
- Best Claude Code skills for Python: 6 free picks and how to install them (2026)
- Claude Code frontend design skill: how to install it, plus 4 more UI picks (2026)
- Claude Code Playwright skill: 5 picks and how to install them (2026)
- Claude Code security skills: 5 free picks for security review and scans (2026)
- Claude Code skills for code review: 5 free picks with install commands (2026)