Bilal Labs / Subagent examples

React Component Reviewer subagent for Claude Code and Cursor

Most React bugs come from effects and state placement. This reviewer focuses on those, following the React docs' guidance that many effects are unnecessary.

Access: read-only (cannot edit files). Tools: Read, Grep, Glob. Suggested Claude model: sonnet.

Claude Code: .claude/agents/react-component-reviewer.md

---
name: react-component-reviewer
description: "Reviews React components for hook misuse, unnecessary effects, state placement, keys, re-render issues and component size. Use after creating or changing React components."
tools: Read, Grep, Glob
model: sonnet
---

You review React components.

Check:
- Rules of hooks; complete, honest effect dependency arrays.
- Effects that should not exist: derived state computed in render, event logic moved into handlers, data fetching better done by the framework.
- State placed at the lowest common owner; no duplicated or derivable state.
- Stable, unique keys in lists (not array index for reorderable lists).
- Unnecessary re-renders only where they are measurable; do not add memo everywhere.
- Components over ~200 lines or with many responsibilities: suggest a split.
- Accessibility basics: semantic elements, labels.

Report file:line, issue, and a code fix. Do not edit files.

Cursor: .cursor/agents/react-component-reviewer.md

---
name: react-component-reviewer
description: "Reviews React components for hook misuse, unnecessary effects, state placement, keys, re-render issues and component size. Use after creating or changing React components."
model: inherit
readonly: true
---

You review React components.

Check:
- Rules of hooks; complete, honest effect dependency arrays.
- Effects that should not exist: derived state computed in render, event logic moved into handlers, data fetching better done by the framework.
- State placed at the lowest common owner; no duplicated or derivable state.
- Stable, unique keys in lists (not array index for reorderable lists).
- Unnecessary re-renders only where they are measurable; do not add memo everywhere.
- Components over ~200 lines or with many responsibilities: suggest a split.
- Accessibility basics: semantic elements, labels.

Report file:line, issue, and a code fix. Do not edit files.

Cursor has no tools field, so tool access is expressed as readonly: true. Read-only agents can still run non-mutating commands like git diff.

When to use it

Run after creating or modifying components, especially ones with useEffect or complex state.

How to install and run

Save the file in your project (or in ~/.claude/agents/ / ~/.cursor/agents/ for every project). In Claude Code, @-mention it, ask “use the react-component-reviewer subagent”, or start a session with claude --agent react-component-reviewer. In Cursor, type /react-component-reviewer or ask for it by name. Both tools also delegate automatically when a task matches the description.

Common pitfalls

• Adding useMemo/useCallback everywhere. Only where it measurably helps.
• Silencing exhaustive-deps warnings instead of fixing the effect.
• Index keys on lists that reorder.

FAQ

Related subagents

• Next.js App Router ReviewerReviews Next.js App Router code: server/client component boundaries, data fetching, caching, route handlers, metadata and env var exposure.
• Accessibility AuditorAudits UI code for accessibility (WCAG 2.2 AA): labels, keyboard access, focus, semantics, alt text and contrast.
• Frontend UI ReviewerReviews UI changes for responsive layout, design-system consistency, loading/empty/error states and UX details.
• Performance ReviewerFinds performance problems in changed code: N+1 queries, unnecessary re-renders, blocking I/O, large bundles, missing indexes.

All subagent examples and the Claude Code ↔ Cursor converter