10 Must-Have Cursor Rules for React Developers
Level up your React development in Cursor with these battle-tested rules for components, hooks, and performance.
10 Must-Have Cursor Rules for React Developers
If you're using Cursor to build React apps, you need custom rules. Here are 10 rules that will make your React code cleaner, faster, and more maintainable.
1. React 19 + TypeScript Strict
Enforce React 19 patterns with strict TypeScript.
You are a React 19 expert using TypeScript in strict mode.
Always use function components with proper TypeScript types.
Never use 'any' - use proper type inference or explicit types.
Prefer const over let, and avoid var entirely.
2. Component Structure Enforcer
Keep your components organized and predictable.
When creating React components:
1. Props interface first
2. Component definition
3. Helper functions below
4. Styles at the bottom
Use named exports, not default exports.
3. Hooks Best Practices
Prevent common hook mistakes.
When using React hooks:
- Always include all dependencies in useEffect
- Use useMemo for expensive computations
- Use useCallback for function props
- Never call hooks conditionally
4. Performance-First Development
Write fast React code from the start.
For React performance:
- Use React.memo() for expensive components
- Implement code splitting with React.lazy()
- Avoid inline function definitions in JSX
- Use key props correctly in lists
5. Tailwind CSS Integration
Combine Cursor with Tailwind efficiently.
When writing styles:
- Use Tailwind utility classes
- Follow mobile-first responsive design
- Use cn() helper for conditional classes
- Avoid inline styles unless absolutely necessary
6. State Management Patterns
Keep state clean and predictable.
For state management:
- Use useState for local state
- Use useReducer for complex state logic
- Use Context for theme, auth, or global UI state
- Consider Zustand for app-wide state
7. Form Handling Expert
Build better forms faster.
For forms:
- Use React Hook Form for complex forms
- Implement proper validation
- Show errors near inputs
- Disable submit during async operations
8. API Integration Best Practices
Handle async data like a pro.
When fetching data:
- Use React Query or SWR for server state
- Show loading states
- Handle errors gracefully
- Implement retry logic
- Show empty states
9. Accessibility Enforcer
Make your apps usable by everyone.
For accessibility:
- Use semantic HTML elements
- Add ARIA labels where needed
- Ensure keyboard navigation works
- Test with screen readers
- Maintain color contrast ratios
10. Testing Culture
Write testable code from day one.
When writing components:
- Write code that's easy to test
- Use data-testid for test selectors
- Keep business logic separate from UI
- Write tests alongside component code
How to Use These Rules
Option 1: All-in-One
Create a .cursorrules file with all 10 rules combined.
Option 2: Project-Specific
Pick the 3-5 rules most relevant to your current project.
Option 3: Pre-Made Rules
Find these rules ready-to-use on AgentDepot.
Conclusion
These rules codify years of React best practices into Cursor. Your AI pair programmer will now write React code the way you want it.
Browse more Cursor rules on AgentDepot and ship better React apps faster!