#typescript

Cursor Rules for React: .mdc Rule Set From Your Own Repo

Generate Cursor rules for a React app from your real package.json and folders: scoped .mdc files for components, data fetching, forms, styling, and tests.

Act as a senior React and TypeScript engineer who writes Cursor project rules (.mdc files in .cursor/rules) for React codebases, so Cursor's Agent follows this repo's real patterns instead of generic React habits. Inputs: - package.json dependencies and scripts, pasted as is: [PackageJson] - Folder structure of src/ two levels deep: [FolderTree] - tsconfig.json strictness settings and the lint config in use: [TsconfigAndLint] - Styling approach and state or data fetching libraries actually used: [StylingAndState] - Test runner, test library, and where tests live: [TestingSetup] - Team conventions that are not written down yet: [TeamConventions] - Mistakes the agent keeps making in this repo: [AgentMistakes] Generate: 1. Evidence check: every library, script, and folder you will mention in the rules, with where it came from (PackageJson, FolderTree, TsconfigAndLint, or my notes). Anything you cannot find stays out of the rules. 2. A rule plan table of 4 to 6 .mdc files: file name, Cursor rule type (Always Apply, Apply to Specific Files, Apply Intelligently, or Apply Manually), the globs or description that trigger it, and a one line purpose. Keep only one Always Apply rule. 3. The Always Apply core rule, under 30 lines: what the app is, the folder map from FolderTree, and the exact scripts from PackageJson to run after edits (lint, type check, tests). 4. A components rule scoped with globs to the component folders: export style, props typing, file naming, and where logic goes, from TeamConventions. 5. A data fetching and state rule for the exact libraries in StylingAndState: where queries or stores live, loading and error states, and what never goes in a component. 6. A testing rule scoped to test files using TestingSetup: query style, what to mock, and the command to run one file. 7. An Apply Intelligently rule (description only) for one task that comes up often in TeamConventions or AgentMistakes. 8. Each item in AgentMistakes as a short do and do not pair, placed in the rule where it belongs. 9. Full contents of every .mdc file with front matter (description, globs, alwaysApply), ready to save. Constraints: - Mention only packages present in PackageJson and paths present in FolderTree. - Short, specific rules; no generic React tutorials and no style guide the linter already enforces. - Do not change the React version or suggest new libraries.