What problem does it solve?
This Skill provides a structured approach to applying modern React patterns and principles, helping teams build robust, maintainable UIs with improved performance and scalability.
Core Features & Use Cases
- Component Design Principles: server, client, presentational, and container components to separate concerns and improve testability.
- Hook Patterns: guidance on when to extract custom hooks (useLocalStorage, useDebounce, useFetch, useForm), top-level hook usage, naming conventions (prefix with use), and cleanup on unmount.
- State Management & Architecture: strategies for local state, context, and server/state solutions like React Query or SWR, plus guidelines for appropriate placements.
- TypeScript Patterns: props typing with interfaces or types, common types like ReactNode, Event handlers, and refs.
- Testing Principles: unit, integration, and E2E.
- Anti-Patterns: avoid prop drilling, giant components, overusing useEffect, premature optimization, and using index as key.
- Real-world Use: apply these patterns to build a small design system or feature module with reusable components.
Quick Start
Create a new React project and implement a small UI demonstrating the patterns described in this Skill. For example, build a dashboard with server data, a few reusable presentational components, and a custom hook like useForm to manage a simple form.
