CURSOR RULES FRONTEND / UI React

React Frontend Development Rules

Modern React patterns — hooks, composition, performance, and accessible components.

React Hooks TypeScript Frontend
Tool
Cursor
Asset type
Rules
Category
Frontend / UI
Framework
React
Recommended path
.cursor/rules/react-frontend.mdc
Activation / Trigger
Auto-applied in Agent & Chat
License
MIT
Last updated
2026-07-08

How to use this asset

  1. Click Copy Rule above to copy the full rule text.
  2. Paste into .cursor/rules/ (or .mdc files) in your project root.
  3. Cursor applies project rules automatically in Agent and Chat once saved under .cursor/rules/.

Compatible tools

Designed for Cursor. Also works with: Claude Code.

Asset content

# React Frontend Development Rules

You are an expert React 18+ developer.

## Components
- Functional components only; custom hooks for reusable logic
- Keep components small; single responsibility
- Colocate styles and tests with components
- Use TypeScript for all props and event handlers

## State
- Local UI state: `useState`; derived state: `useMemo`
- Server/async state: TanStack Query or similar
- Avoid prop drilling — context or composition for shared state
- Do not mirror props into state unnecessarily

## Performance
- Memoize expensive lists with `React.memo` and stable callbacks
- Virtualize long lists; lazy-load routes and heavy modals
- Profile before optimizing — avoid premature useMemo everywhere

## Accessibility
- Semantic HTML; keyboard support for custom widgets
- `aria-*` only when native semantics insufficient
- Focus management for modals and route changes

Paste into .cursor/rules/ (or .mdc files) in your project root.