Generate production-ready React Cursor rules for Project Rules (.mdc), AGENTS.md, or legacy .cursorrules. This template encodes stack-specific conventions for projects using React. Component-based UI library with hooks, virtual DOM, and a vast ecosystem.
The template focuses Cursor AI on concrete React practices instead of generic coding advice. Required sections are always included; optional sections can be enabled when they match your project.
The generator turns these sections into Project Rules with frontmatter, AGENTS.md, or a single .cursorrules file depending on the output format you choose.
- Organize components by feature, not by file type.
- Use 2 spaces for indentation.
- Group related components in a shared directory.
- Keep components small and focused on a single responsibility.
- Use PascalCase for component filenames and component names.- Prefer functional components with hooks over class components.
- Use React.memo for performance optimization when needed.
- Extract reusable logic into custom hooks.
- Keep JSX readable: break complex expressions into variables.
- Use TypeScript for type safety.
- Always define prop types or interfaces for components.- Use useState for local component state.
- Use useContext + useReducer for shared state.
- Lift state up only when necessary.
- Avoid prop drilling by using composition or context.
- Use useCallback/useMemo sparingly — only when profiling shows a need.
- Prefer controlled components for form inputs.