React Development Guide

This skill provides comprehensive guidelines, patterns, and best practices for React development in this project.

Quick Start

1. Best Practices: For component architecture, state management, and TypeScript integration, read references/best-practices.md
2. Element wrappers: If a component renders a single native element (button, input, a, …), extend that element’s props (React.ComponentProps<"…">) and spread ...props — see Extend native element props below and references/best-practices.md → Extending HTML Elements.
3. useEffect Patterns: For understanding when to use (and avoid) useEffect, read references/useeffect-patterns.md
4. Data Fetching: For TanStack Query patterns, use the tanstack-query skill
5. Forms: For React Hook Form with Zod validation, use the react-hook-form-zod skill

Core Principles

• Functional Components Only: Use functional components exclusively - class components are legacy
• Single Responsibility: Keep components small and focused on a single purpose
• Separation of Concerns: Extract behavior logic into custom hooks, keep components focused on rendering
• Feature-Based Organization: Co-locate related files by feature, not by type
• React 19+ Features: Embrace modern React features (use(), Actions, useOptimistic())