React Patterns
Apply a concise checklist of production React design, hooks, state, composition, and performance rules while implementing or refactoring UI with TypeScript.
Overview
react-patterns is an agent skill most often used in Build (also Ship review, Validate prototype) that encodes production React hooks, composition, state, and performance principles.
Install
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill react-patternsWhat is this skill?
- Component design matrix: server, client, presentational, and container roles with single-responsibility rules
- Hook extraction guidance for debounce, fetch, forms, and local storage with effect cleanup expectations
- State selection ladder from useState through Context, React Query/SWR, to Zustand or Redux Toolkit
- Performance patterns: memoization, lazy loading, and avoiding unnecessary re-renders
- TypeScript-oriented props and composition patterns over inheritance
- Covers 4 component types in the design matrix
- State management table spans 4 complexity tiers
Adoption & trust: 841 installs on skills.sh; 40.1k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent spits out React that mixes concerns, misplaces state, or ignores hooks and performance basics you expect in shipped SaaS UI.
Who is it for?
Indie builders shipping React or Next-style apps who want consistent architectural answers before merging agent-generated UI.
Skip if: Non-React stacks, or teams that already enforce the same rules via an internal design system doc and do not need a duplicate skill.
When should I use this skill?
User asks for modern React patterns, hooks, composition, performance, or TypeScript best practices for production UI.
What do I get? / Deliverables
Components follow clearer server/client and presentational/container splits with hook and state choices matched to complexity.
- Architectural recommendations aligned to pattern tables
- Refactor guidance for hooks and state placement
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Most invocation happens while writing components and choosing state libraries during active product development. Content targets client/server component split, hooks, and UI architecture—core frontend build work for solo SaaS and app UIs.
Where it fits
Sketch a dashboard with lifted state and small presentational pieces before committing to a global store.
Refactor an agent-written form into a custom useForm hook with debounced validation.
Audit a PR for hook rule violations and unnecessary client boundaries.
Choose React Query for server lists instead of stuffing fetch logic into useEffect.
How it compares
Reference pattern library for React structure—not a component generator or an MCP design tool.
Common Questions / FAQ
Who is react-patterns for?
Solo and small-team frontend developers using React with TypeScript who want agents to follow shared component, hook, and state-management conventions.
When should I use react-patterns?
Use it in Build while implementing features, in Validate when scaffolding a prototype UI, and in Ship during review when refactoring hooks, context, or data-fetching layers.
Is react-patterns safe to install?
It is marked safe community procedural content without prescribed tool calls; confirm package integrity via the Security Audits panel on this Prism page.
SKILL.md
READMESKILL.md - React Patterns
# 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 compositi