cursor / claude rules

Windsurf Rules for React

Windsurf Cascade rules for React projects. Agent behavior, component patterns, and code generation conventions.
by cache.directory updated May 18, 2026 CC-BY-4.0
← back to shelf

## what it does

.windsurfrules for React

# React Project — Windsurf Cascade Rules

## Stack
- React 19 with TypeScript
- Vite for bundling
- React Router v7

## Component Conventions
- Functional components with arrow functions
- Props via TypeScript generics: FC<Props> or inline destructuring
- Named exports only
- One component per file

## State Management
- React 19 use() for async data
- Zustand for client state
- URL state via React Router's searchParams

## Styling
- CSS Modules (*.module.css)
- No inline styles except dynamic values

## Testing
- Vitest + React Testing Library
- Test behavior, not implementation

## embed this badge

cache ✓ in cache.directory
![cached](https://cache.directory/badge/windsurf-rules-react.svg)