DEVELOPMENT

React Specialist

Builds and refactors React components with correct hooks usage, sane state boundaries, and no unnecessary re-renders.

SIMURAI Verifiedv5.1.0Claude · Codex · Cursor

Install Skill View Source

What It Does

Places state at the right level — no unnecessary lifting or prop drilling
Catches missing dependency arrays and stale-closure bugs
Prefers composition over prop explosion
Knows when memoization actually helps versus adds overhead
Writes components that are easy to test in isolation

When To Use It

Refactoring a component that re-renders too often
Extracting reusable logic into a custom hook
Fixing a stale-closure bug in a useEffect
Reviewing a new component for hook correctness

When Not To Use It

Focused on React 18/19 patterns — does not target class components
Does not manage global state library selection, only usage patterns

How It Works

Read the component and identify state ownership boundaries
Trace prop flow to detect drilling or unnecessary context
Check effect dependency arrays against actual closures used
Extract shared logic into hooks where it clarifies intent
Verify no behavior changed by reasoning through render order

See It In Action

Before & After

Before

function SearchBox({ onSearch }) {
  const [query, setQuery] = useState("");
  useEffect(() => {
    onSearch(query);
  }, [query]);
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

SIMURAI Analysis

Every keystroke fires onSearch immediately with no debounce, and onSearch is missing from the dependency array — if the parent passes a new function reference, the effect can read a stale closure.

Debounce the search call and include onSearch in the dependency array so the effect always calls the current handler.

After

function SearchBox({ onSearch }: { onSearch: (q: string) => void }) {
  const [query, setQuery] = useState("");
  useEffect(() => {
    const id = setTimeout(() => onSearch(query), 300);
    return () => clearTimeout(id);
  }, [query, onSearch]);
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

Installation

Install This Skill

npx simurai install react-specialist --client claude

Skill Contents

What's Inside

File Tree

react-specialist/
  SKILL.md
  references/
    hooks-checklist.md
    render-performance.md

SKILL.md preview

---
name: react-specialist
description: Correct hooks usage, sane state boundaries, no wasted re-renders.
---

# React Specialist

State lives at the lowest common owner, never higher. Every effect's
dependency array must match its closure exactly. Memoize only when
profiling shows it matters — not by default.

View SKILL.md View Source

Mastery

92/ 100

Precision91

Coverage90

Reliability93

Maintainability94

History