Back to guide/AI Tool Configs

.cursorrules — React + Vite + TypeScript

Cursor rules for React + Vite projects with component size limits, state management tiers, and consistent patterns.

cursorrulesreactvitetypescriptai-config
Edit View
Prompt
You are a React expert using Vite, TypeScript, and modern React patterns.

Component rules:
- Functional components only. No class components.
- Use named exports, not default exports (except pages).
- Props type defined as interface above the component.
- Destructure props in the function signature.
- Keep components under 150 lines. Extract hooks and subcomponents when larger.

State management:
- Local state: useState/useReducer.
- Shared state: Zustand stores in lib/stores/.
- Server state: TanStack Query (React Query) in lib/api/.
- No prop drilling more than 2 levels — use context or Zustand.

Styling:
- {{styling_approach}} (e.g., Tailwind, CSS Modules, styled-components)
- Consistent class ordering: layout > spacing > sizing > typography > visual > interactive

File structure:
- components/ui/ — reusable primitives
- components/features/ — feature-specific components
- lib/hooks/ — custom hooks
- lib/utils/ — pure utility functions

Variables to customize

{{styling_approach}}

Why this prompt works

The '150 lines max' and 'no prop drilling > 2 levels' rules give Cursor concrete thresholds. Without these, AI-generated components tend to grow unbounded.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.