How do I install the React Patterns skill?

Run npx skillmds@latest add majiayu000/react-patterns-4 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is React Patterns safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Patterns?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Patterns free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Patterns?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Patterns by majiayu000 — Agent Skill

Name: React Patterns
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

React/Next.js Patterns

State Management Policies

Always Use Functional Updates

// GOOD
setCount(prev => prev + 1)

// BAD: Can be stale in async
setCount(count + 1)

Context Null Check Required

const context = useContext(MyContext)
if (!context) throw new Error('Must be used within Provider')

Conditional Rendering

// GOOD: Clear conditions
{isLoading && <Spinner />}
{error && <ErrorMessage error={error} />}
{data && <DataDisplay data={data} />}

// BAD: Ternary hell
{isLoading ? <Spinner /> : error ? <ErrorMessage /> : data ? <DataDisplay /> : null}

Performance Policies

Memoization Guidelines

Technique	When to Use
`useMemo`	Expensive computations with stable deps
`useCallback`	Functions passed to memoized children
`React.memo`	Pure components with frequent parent re-renders

Default: Let React Compiler handle memoization. Manual useMemo/useCallback/React.memo only when precise control over re-render boundaries is needed.

Code Splitting - Use for Heavy Components

const HeavyChart = lazy(() => import('./HeavyChart'))

<Suspense fallback={<Spinner />}>
  <HeavyChart />
</Suspense>

Virtualization - Use for 100+ Items

Use @tanstack/react-virtual for long lists.

Accessibility Policies

Always Use useId for Form Labels

const hintId = useId()
<input aria-describedby={hintId} />
<p id={hintId}>Hint text</p>

Modal Focus Management Required

Save previous focus on open
Focus modal on open
Restore focus on close
Handle Escape key

Anti-Patterns

Anti-Pattern	Correct Approach
`setCount(count + 1)` in async	Use functional update
Deeply nested ternaries	Use `&&` or early returns
Inline object/array in deps	Extract to stable reference
Missing key in lists	Always provide unique key
useEffect for derived state	Use useMemo or compute inline

Component Design Policies

Prefer Composition

Composition over configuration — components should be assembled, not configured via props.

// GOOD
<Card>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
</Card>

// BAD: Props drilling
<Card header="Title" body="Content" footer="..." />

Compound Components for Related UI

Use Context to share state between related components (Tabs, Accordion, etc.).

---name: react-patterns-4description: React and Next.js development policies. Use when writing React components, hooks, or performance optimization. Do NOT use for Vue.js code -- use vue-patterns instead.--- # React/Next.js Patterns ## State Management Policies ### Always Use Functional Updates ```typescript // GOOD setCount(prev => prev + 1) // BAD: Can be stale in async setCount(count + 1) ``` ### Context Null Check Required ```typescript const context = useContext(MyContext) if (!context) throw new Error('Must be used within Provider') ``` ## Conditional Rendering ```typescript // GOOD: Clear conditions {isLoading && <Spinner />} {error && <ErrorMessage error={error} />} {data && <DataDisplay data={data} />} // BAD: Ternary hell {isLoading ? <Spinner /> : error ? <ErrorMessage /> : data ? <DataDisplay /> : null} ``` ## Performance Policies ### Memoization Guidelines | Technique | When to Use | |-----------|-------------| | `useMemo` | Expensive computations with stable deps | | `useCallback` | Functions passed to memoized children | | `React.memo` | Pure components with frequent parent re-renders | **Default: Let React Compiler handle memoization.** Manual `useMemo`/`useCallback`/`React.memo` only when precise control over re-render boundaries is needed. ### Code Splitting - Use for Heavy Components ```typescript const HeavyChart = lazy(() => import('./HeavyChart')) <Suspense fallback={<Spinner />}> <HeavyChart /> </Suspense> ``` ### Virtualization - Use for 100+ Items Use `@tanstack/react-virtual` for long lists. ## Accessibility Policies ### Always Use useId for Form Labels ```typescript const hintId = useId() <input aria-describedby={hintId} /> <p id={hintId}>Hint text</p> ``` ### Modal Focus Management Required - Save previous focus on open - Focus modal on open - Restore focus on close - Handle Escape key ## Anti-Patterns | Anti-Pattern | Correct Approach | |--------------|------------------| | `setCount(count + 1)` in async | Use functional update | | Deeply nested ternaries | Use `&&` or early returns | | Inline object/array in deps | Extract to stable reference | | Missing key in lists | Always provide unique key | | useEffect for derived state | Use useMemo or compute inline | ## Component Design Policies ### Prefer Composition Composition over configuration — components should be assembled, not configured via props. ```typescript // GOOD <Card> <CardHeader>Title</CardHeader> <CardBody>Content</CardBody> </Card> // BAD: Props drilling <Card header="Title" body="Content" footer="..." /> ``` ### Compound Components for Related UI Use Context to share state between related components (Tabs, Accordion, etc.).

Frequently asked questions

React Patterns