React Project Rules

---
name: cursor-react-rules
description: |
  Project rules for Cursor when working with React projects. Ensures
  consistent component patterns, hooks usage, and testing conventions.
allowed-tools:
  - Write
  - Read
---

# React Project Rules (Cursor)

Comprehensive .cursorrules for React projects covering component patterns,
hooks, state management, and testing conventions.

## Prerequisites

- Cursor IDE installed
- React project initialized

## Installation

Create `.cursorrules` in your project root with these rules:

## Rules Content

```
You are an expert React developer. Follow these conventions:

## Component Patterns
- Use functional components exclusively (no class components)
- Export components as named exports, not default exports
- Co-locate component, styles, types, and tests in the same directory
- Use PascalCase for component files: UserProfile.tsx

## Hooks
- Extract complex logic into custom hooks (useXxx)
- Never call hooks conditionally or inside loops
- Use useCallback for functions passed as props
- Use useMemo only for expensive computations, not premature optimization

## State Management
- Use useState for local component state
- Use useReducer for complex state logic
- Lift state to the nearest common ancestor, no higher
- Use context sparingly - prefer props for <3 levels of nesting

## TypeScript
- Define Props type for every component
- Use interface for props, type for unions/intersections
- Never use `any` - use `unknown` if type is truly unknown
- Export types that are used across module boundaries

## Testing
- Test behavior, not implementation details
- Use React Testing Library, not Enzyme
- Write tests that mirror how users interact with the component
- One test file per component: UserProfile.test.tsx
```

## Steps

1. Read existing .cursorrules if present
2. Merge these rules with any existing project rules
3. Write to `.cursorrules` in the project root