← Back to Main | Modes Setup →

.cursorrules Guidelines

How to build efficient .cursorrules

To have an efficient .cursorrules, you should include this information:

  1. The role of the Agent
  2. Tech stack, or specifically the environment that the Agent is working in
  3. Some technical guidelines to guide the Agent in various scenarios
  4. Project info, not too detailed but sufficient to understand the project, how many features, general ideas, targeted users, etc.

Tips: a guidelines for React developers

<react_component_guidelines>
- Respect one-way data flow: Pass data down through props and avoid any global mutations. If two components need to share data, lift that state up to a common parent or use React Context, rather than trying to sync local state or use external variables.
- Rely on React Compiler - useMemo, useCallback, and React.memo can be omitted if React Compiler is enabled (by default). Avoid premature optimization with manual memoization. Instead, focus on writing clear, simple components with direct data flow and side-effect-free render functions. Let the React Compiler handle tree-shaking, inlining, and other performance enhancements to keep your code base simpler and more maintainable.
- Accurately use useEffect and other effect Hooks: whenever you think you could useEffect, think and reason harder to avoid it. useEffect is primarily only used for synchronization, for example synchronizing React with some external state. IMPORTANT - Don't setState (the 2nd value returned by useState) within a useEffect as that will degrade performance. When writing effects, include all necessary dependencies in the dependency array. Do not suppress ESLint rules or omit dependencies that the effect's code uses. Structure the effect callbacks to handle changing values properly (e.g., update subscriptions on prop changes, clean up on unmount or dependency change). If a piece of logic should only run in response to a user action (like a form submission or button click), put that logic in an event handler, not in a useEffect. Where possible, useEffects should return a cleanup function.
- Prefer to use React 19's features over the legacy features, for example, `use`, `useTransition`, `useDeferredValue`, `Suspense`.
</react_component_guidelines>

🧭 Navigation

🏠 Main Guide - Framework overview and guidelines
⚙️ Custom Modes - Setup different AI modes
💡 Use Cases - Real-world examples