Best AI Coding Rules for React 19
React 19 brings Server Components, Actions, and the use() hook. These rules ensure your AI assistant writes idiomatic React with TypeScript strict mode, proper hooks patterns, and performance best practices.
npx @findutils/skills add react-typescript-best-practices5 React skills available
React + TypeScript Best Practices
Modern React 19 patterns with TypeScript strict mode, Server Components, and performance optimization.
Next.js 15 App Router Patterns
Best practices for Next.js App Router with RSC, server actions, and data fetching.
Astro Islands Architecture
Astro 6 with Islands architecture, content collections, and React/Vue/Svelte islands.
React State Management
Zustand, Jotai, Redux Toolkit, and React Context patterns for scalable state.
Framer Motion Animation Patterns
Production-ready animations with Framer Motion for React including gestures, layout, and scroll.
How to Use These Rules
FindUtils Skills auto-detects your AI tool and writes the correct file format:
| AI Tool | Rules File |
|---|---|
| Claude Code | CLAUDE.md (project root) |
| Cursor | .cursor/rules/{name}.mdc |
| GitHub Copilot | .github/copilot-instructions.md |
| Windsurf | .windsurf/rules/ or .windsurfrules |
| Cline | .clinerules (project root) |
| Aider | .aider.conf.yml or CONVENTIONS.md |
| Codex / OpenAI | AGENTS.md (project root) |
| Gemini CLI | GEMINI.md or .gemini/ |
Build Your Full React Stack
Combine React with your styling, database, and testing tools using the Stack Builder: