Help us improve
Share bugs, ideas, or general feedback.
From antigravity-bundle-web-wizard
Provides modern React patterns for component design, hooks, composition, state management, performance, error handling, and TypeScript best practices. Useful for production-ready apps.
npx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-bundle-web-wizardHow this skill is triggered — by the user, by Claude, or both
Slash command
/antigravity-bundle-web-wizard:react-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Principles for building production-ready React applications.
Provides modern React patterns for component design, hooks, composition, state management, performance, error handling, and TypeScript best practices. Useful for production-ready apps.
Guides implementation of modern React patterns: hooks, component composition, state management, performance optimizations, concurrent features. Use for building or refactoring components.
Corrects stale React 18/19 patterns and anti-patterns — hooks discipline, component architecture, state management, and common LLM training data mistakes.
Share bugs, ideas, or general feedback.
Principles for building production-ready React applications.
| Type | Use | State |
|---|---|---|
| Server | Data fetching, static | None |
| Client | Interactivity | useState, effects |
| Presentational | UI display | Props only |
| Container | Logic/state | Heavy state |
| Pattern | Extract When |
|---|---|
| useLocalStorage | Same storage logic needed |
| useDebounce | Multiple debounced values |
| useFetch | Repeated fetch patterns |
| useForm | Complex form state |
| Complexity | Solution |
|---|---|
| Simple | useState, useReducer |
| Shared local | Context |
| Server state | React Query, SWR |
| Complex global | Zustand, Redux Toolkit |
| Scope | Where |
|---|---|
| Single component | useState |
| Parent-child | Lift state up |
| Subtree | Context |
| App-wide | Global store |
| Hook | Purpose |
|---|---|
| useActionState | Form submission state |
| useOptimistic | Optimistic UI updates |
| use | Read resources in render |
| Use Case | Prefer |
|---|---|
| Reusable logic | Custom hook |
| Render flexibility | Render props |
| Cross-cutting | Higher-order component |
| Signal | Action |
|---|---|
| Slow renders | Profile first |
| Large lists | Virtualize |
| Expensive calc | useMemo |
| Stable callbacks | useCallback |
| Scope | Placement |
|---|---|
| App-wide | Root level |
| Feature | Route/feature level |
| Component | Around risky component |
| Pattern | Use |
|---|---|
| Interface | Component props |
| Type | Unions, complex |
| Generic | Reusable components |
| Need | Type |
|---|---|
| Children | ReactNode |
| Event handler | MouseEventHandler |
| Ref | RefObject |
| Level | Focus |
|---|---|
| Unit | Pure functions, hooks |
| Integration | Component behavior |
| E2E | User flows |
| ❌ Don't | ✅ Do |
|---|---|
| Prop drilling deep | Use context |
| Giant components | Split smaller |
| useEffect for everything | Server components |
| Premature optimization | Profile first |
| Index as key | Stable unique ID |
Use this image as a reference for a better file structure of the project
Remember: React is about composition. Build small, combine thoughtfully.
This skill is applicable to execute the workflow or actions described in the overview.