Agent skill

react-patterns

React best practices and anti-patterns reference. Use when writing React components, reviewing code for anti-patterns, debugging useEffect issues, optimizing performance, or deciding between state vs derived values. Covers Effects, state design, component patterns, performance, and event handling.

View SKILL.md on GitHub Repository
Stars 5
Forks 3

Install this agent skill to your Project

npx add-skill https://github.com/iamhenry/ai-project-starter-kit/tree/main/.opencode/skills/react-patterns

SKILL.md

React Patterns

Overview

Decision-driven guidance for writing idiomatic React. Focus on avoiding common anti-patterns and choosing the right tool for each job.

Quick Decision Trees

Should This Be a useEffect?

Is this synchronizing with an EXTERNAL system?
├─ YES (DOM, network, third-party widget) → useEffect
└─ NO
   ├─ Caused by USER ACTION? → Event handler
   ├─ Can be CALCULATED from state/props? → Render-time calculation
   └─ Runs because component DISPLAYED? → useEffect

Should This Be State?

Can it be computed from existing props/state?
├─ YES → Derive it (const x = ...)
└─ NO
   ├─ Does it change over time? → useState
   └─ NO → Regular variable or prop

Should I Memoize This?

Is the calculation expensive (>1ms)?
├─ NO → Don't memoize
└─ YES
   ├─ Used in render? → useMemo
   └─ Passed to child as prop? → Consider useMemo

Anti-Pattern Quick Reference

BAD GOOD Reference
Derived state in useEffect Calculate during render references/effects.md
useEffect for event logic Put in event handler references/effects.md
useEffect to reset state on prop Use React key prop references/effects.md
Effect chains (A→B→C) Calculate in single handler references/effects.md
Notify parent via useEffect Call in same event handler references/effects.md
Store full object when ID suffices Store ID, derive object references/state.md
Prop drilling 5+ levels Composition or context references/components.md
useMemo/useCallback everywhere Only when measurably needed references/performance.md
Inline handlers causing re-renders useCallback IF measured issue references/performance.md
Logic in onClick directly Extract to named handler references/events.md

When to Load References

Load the specific reference file when working on that area:

  • Effects issues: Read(.claude/skills/react-patterns/references/effects.md)
  • State structure: Read(.claude/skills/react-patterns/references/state.md)
  • Component design: Read(.claude/skills/react-patterns/references/components.md)
  • Performance: Read(.claude/skills/react-patterns/references/performance.md)
  • Event handling: Read(.claude/skills/react-patterns/references/events.md)

Core Principles

  1. Effects are escape hatches - Only for external system sync
  2. Derive, don't sync - If computable, compute it
  3. State should be minimal - Store IDs not objects, derive the rest
  4. Measure before optimizing - No premature useMemo/useCallback
  5. Colocate related logic - Keep cause and effect together
  6. Data flows down - Avoid passing data up via Effects

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

iamhenry/ai-project-starter-kit

verification-gate

Reusable verification gate for completed work before commit or merge. Use when implementation is done and Claude must prove the task works, verify the main user flow, choose between browser-flow, browser-static, or non-browser validation, and return a PASS/FAIL/BLOCKED verdict with evidence. When browser verification is needed, rely on the agent-browser skill for browser actions, screenshots, and recordings.

5 3
Explore
iamhenry/ai-project-starter-kit

osgrep

Semantic code search using natural language queries. Use when users ask "where is X implemented", "how does Y work", "find the logic for Z", or need to locate code by concept rather than exact text. Returns file paths with line numbers and code snippets.

5 3
Explore
iamhenry/ai-project-starter-kit

napkin

Maintain a per-repo napkin file that tracks mistakes, corrections, and what works. Activates EVERY session, unconditionally. Read the napkin before doing anything. Write to it continuously as you work — not just at session boundaries. Log your own mistakes, not just user corrections. The napkin lives in the repo at `.opencode/napkin.md`.

5 3
Explore
iamhenry/ai-project-starter-kit

dogfood

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

5 3
Explore
iamhenry/ai-project-starter-kit

tmux

Manage concurrent background processes using tmux. Use when spawning dev servers, running long-running tasks, monitoring multiple processes, or capturing output from background commands without blocking the main session.

5 3
Explore
iamhenry/ai-project-starter-kit

viral-research

Viral content research and DNA extraction for Instagram Reels. Use this skill whenever you need to research what's performing in a niche on Instagram, find viral faceless Reels, download and analyze them frame-by-frame, identify patterns, and produce a structured research brief. Trigger whenever the user mentions viral content research, Instagram research, Reel analysis, content DNA, swipe file building, niche research, competitor analysis for social content, or wants to understand why certain content performs. Also trigger when the user wants to find content formats to adapt, study what's working in a niche, or build a research-backed content strategy. This skill is research-only — it does not generate or publish content.

5 3
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results