React Patterns
- 1k installs
- 44k repo stars
- Updated July 27, 2026
- sickn33/antigravity-awesome-skills
react-patterns is an agent skill that applies modern React component design, hook extraction, and state management patterns for developers who need production-ready, maintainable, and performant React and TypeScript user
About
react-patterns is a community agent skill (added 2026-02-27, risk: safe) that encodes principles for production-ready React applications. It defines four component types—Server for data fetching, Client for interactivity, Presentational for UI display, and Container for heavy logic—and enforces one responsibility per component, props-down events-up, and composition over inheritance. The skill covers hooks, performance optimization, and TypeScript best practices for teams shipping SaaS, mobile, or extension frontends. Developers reach for react-patterns when reviewing or writing React code that risks prop-drilling, oversized components, or mixing server and client concerns. It acts as a consistent pattern reference across greenfield and refactor work.
- Component design principles including one responsibility, props down events up, and composition over inheritance
- Hook extraction patterns with clear rules for useLocalStorage, useDebounce, useFetch, and useForm
- State management selection table covering useState through Redux Toolkit based on complexity
- Server, Client, Presentational, and Container component types with defined responsibilities
- TypeScript best practices and performance guidelines for production React applications
React Patterns by the numbers
- 1,033 all-time installs (skills.sh)
- +22 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #355 of 2,277 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill react-patternsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1k |
|---|---|
| repo stars | ★ 44k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | sickn33/antigravity-awesome-skills ↗ |
What are modern React component design patterns?
Apply modern React component design, hook extraction, and state management patterns that keep code maintainable and performant.
Who is it for?
Frontend engineers building or reviewing React and TypeScript apps who want consistent hooks, composition, and performance patterns.
Skip if: Non-React frameworks like Vue or Svelte, or backend API design without UI components.
When should I use this skill?
User writes React components, asks about hooks, state management, Server Components, or React performance patterns.
What you get
Refactored React components, extracted custom hooks, and TypeScript-typed composable UI architecture.
By the numbers
- Documents 4 React component types in its design table
- Community skill date_added 2026-02-27
Files
React Patterns
Principles for building production-ready React applications.
---
1. Component Design Principles
Component Types
| Type | Use | State |
|---|---|---|
| Server | Data fetching, static | None |
| Client | Interactivity | useState, effects |
| Presentational | UI display | Props only |
| Container | Logic/state | Heavy state |
Design Rules
- One responsibility per component
- Props down, events up
- Composition over inheritance
- Prefer small, focused components
---
2. Hook Patterns
When to Extract Hooks
| Pattern | Extract When |
|---|---|
| useLocalStorage | Same storage logic needed |
| useDebounce | Multiple debounced values |
| useFetch | Repeated fetch patterns |
| useForm | Complex form state |
Hook Rules
- Hooks at top level only
- Same order every render
- Custom hooks start with "use"
- Clean up effects on unmount
---
3. State Management Selection
| Complexity | Solution |
|---|---|
| Simple | useState, useReducer |
| Shared local | Context |
| Server state | React Query, SWR |
| Complex global | Zustand, Redux Toolkit |
State Placement
| Scope | Where |
|---|---|
| Single component | useState |
| Parent-child | Lift state up |
| Subtree | Context |
| App-wide | Global store |
---
4. React 19 Patterns
New Hooks
| Hook | Purpose |
|---|---|
| useActionState | Form submission state |
| useOptimistic | Optimistic UI updates |
| use | Read resources in render |
Compiler Benefits
- Automatic memoization
- Less manual useMemo/useCallback
- Focus on pure components
---
5. Composition Patterns
Compound Components
- Parent provides context
- Children consume context
- Flexible slot-based composition
- Example: Tabs, Accordion, Dropdown
Render Props vs Hooks
| Use Case | Prefer |
|---|---|
| Reusable logic | Custom hook |
| Render flexibility | Render props |
| Cross-cutting | Higher-order component |
---
6. Performance Principles
When to Optimize
| Signal | Action |
|---|---|
| Slow renders | Profile first |
| Large lists | Virtualize |
| Expensive calc | useMemo |
| Stable callbacks | useCallback |
Optimization Order
1. Check if actually slow 2. Profile with DevTools 3. Identify bottleneck 4. Apply targeted fix
---
7. Error Handling
Error Boundary Usage
| Scope | Placement |
|---|---|
| App-wide | Root level |
| Feature | Route/feature level |
| Component | Around risky component |
Error Recovery
- Show fallback UI
- Log error
- Offer retry option
- Preserve user data
---
8. TypeScript Patterns
Props Typing
| Pattern | Use |
|---|---|
| Interface | Component props |
| Type | Unions, complex |
| Generic | Reusable components |
Common Types
| Need | Type |
|---|---|
| Children | ReactNode |
| Event handler | MouseEventHandler |
| Ref | RefObject<Element> |
---
9. Testing Principles
| Level | Focus |
|---|---|
| Unit | Pure functions, hooks |
| Integration | Component behavior |
| E2E | User flows |
Test Priorities
- User-visible behavior
- Edge cases
- Error states
- Accessibility
---
10. Anti-Patterns
| ❌ 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 |
---
11. File Structure
<img width="1150" height="1438" alt="image" src="https://github.com/user-attachments/assets/10369698-472c-4695-a494-2c0672103aa1" />
Use this image as a reference for a better file structure of the project
---
Remember: React is about composition. Build small, combine thoughtfully.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kFAQ
What component types does react-patterns define?
react-patterns defines Server components for data fetching without state, Client components for interactivity with useState and effects, Presentational components for UI display with props only, and Container components for heavy logic and state management.
Does react-patterns cover TypeScript?
react-patterns includes TypeScript best practices alongside hooks, composition, and performance guidance. The skill targets production-ready React applications where typed props and component boundaries reduce runtime errors.
Is React Patterns safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.