# React Review

> >

- **Type:** Skill
- **Install:** `agentstack add skill-edloidas-skills-react-review`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [edloidas](https://agentstack.voostack.com/s/edloidas)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [edloidas](https://github.com/edloidas)
- **Source:** https://github.com/edloidas/skills/tree/master/review/react-review

## Install

```sh
agentstack add skill-edloidas-skills-react-review
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# React Review

## Purpose

Deep review of React code combining automated tooling (react-doctor), mechanical pattern checks (Haiku subagents), and architectural analysis (main Sonnet agent). Focuses on what linters and type-checkers can't catch: effects misuse, convention violations, memoization strategy, state architecture, and component organization.

**Linter-aware:** Biome / ESLint already handle hook rules, dependency arrays, self-closing elements, fragments, type imports, and unused variables. This skill explicitly skips those areas.

## When to Use

- After implementing a React feature
- Refactoring existing components
- Code review of React pull requests
- Learning better React patterns
- When code "works" but feels wrong

Trigger phrases: "review react", "check components", "react patterns", "effects review", "suggest improvements"

## Commands

| Command | Description |
|---------|-------------|
| `/react-review` | Review staged/unstaged changes |
| `/react-review path/file.tsx` | Specific file |
| `/react-review src/components/` | Directory |

---

## Phase 1: Load Context

### 1.1 Read Project Rules

Read these files if they exist (skip silently if missing):

```
.cursor/rules/react.mdc
.cursor/rules/typescript.mdc
.cursor/rules/stores.mdc
.claude/rules/react.md
.claude/rules/typescript.md
```

If no project rules found, use React 19 best practices as defaults.

### 1.2 Detect Conventions

Run these checks to determine which convention rules to activate:

```bash
# Check if project uses displayName
grep -rl "\.displayName\s*=" src/ --include="*.tsx" | head -3
# Check if project uses data-component
grep -rl "data-component" src/ --include="*.tsx" | head -3
```

**Convention activation:**
- If `displayName` found in 2+ files → activate `displayName` + `data-component` checks
- If not found → skip those checks entirely (no false positives on projects without this convention)
- `props-naming`, `variable-order`, `component-props-ref`, and `destructuring` checks are always active

### 1.3 Identify Target Files

- If `$ARGUMENTS` provided: use that path (file or directory)
- Otherwise: get staged + unstaged changes via `git diff --name-only HEAD` and `git diff --name-only --cached`
- Filter to `.tsx` and `.ts` files containing React imports
- Read each target file

---

## Phase 2: Parallel Dispatch

Launch all three tracks in a **single message** with parallel tool calls.

### Track A: react-doctor (Bash, background)

Run the bundled script:

```bash
bash /scripts/run-react-doctor.sh . /tmp/react-doctor-output.txt
```

This runs react-doctor with `--no-dead-code --verbose --no-ami -y` flags. It creates a temp config if the project lacks one, excludes stories and test files, and cleans up on exit.

Run this in the background (`run_in_background: true`) — results are collected in Phase 3.

### Track B: Mechanical Checks (Haiku Subagent)

Use the Task tool to launch a Haiku subagent (`model: haiku`):

1. Read `references/mechanical-checks-prompt.md` for the prompt template
2. Read `references/rules-conventions.md` for convention rules
3. Build the prompt:
   - Replace `{{CONVENTIONS}}` with only the **active** convention rules from Phase 1.2
   - Replace `{{FILE_LIST}}` with the target file paths
4. Dispatch with `subagent_type: "general-purpose"`, `model: "haiku"`

The subagent uses Read/Glob/Grep to scan files and returns structured violations.

### Track C: Deep Analysis (Main Sonnet, inline)

Perform deep analysis on each target file using the rules from `references/rules-effects.md` and `references/rules-patterns.md`. Load these reference files, then analyze:

**Effects Analysis** (from rules-effects.md):
- All 14 useEffect anti-patterns — match against patterns in target files
- Flag each violation with the specific anti-pattern number and fix

**Patterns Analysis** (from rules-patterns.md):
- Memoization strategy — over-memoization, missing memoization, wrong tool
- `ref.current` in dependency arrays
- Early returns vs conditional rendering
- Performance patterns (throttle, CSS animations, context splitting)
- Data fetching in effects >15 lines → extract to custom hook
- Component size >200 lines → suggest splitting
- State architecture — related `useState` calls that should be `useReducer`

---

## Phase 3: Collect & Merge

1. **Read Track A output** from the background task output
2. **Collect Track B results** from the Haiku subagent response
3. **Combine with Track C** deep analysis findings

**Deduplication:** If multiple tracks flag the same issue (same file + same line range + same category), keep the most detailed version and note the source.

---

## Phase 4: Output

### Finding Format

For each file with findings:

```markdown
## path/to/Component.tsx

### Critical
Issues that cause bugs or incorrect behavior.

**1. Race condition in fetch effect** (`Component.tsx:45-58`) [Effects #13]
**Current:** Raw fetch in useEffect without cleanup — stale responses can overwrite fresh data
**Fix:** Add ignore flag in cleanup, or use TanStack Query
**Source:** Deep Analysis

### Improvements
Better patterns and architecture.

**2. Extract data fetching to custom hook** (`Component.tsx:30-72`) [Patterns]
**Current:** 40 lines of fetch logic in component body
**Fix:** Create `useItemData` hook following project's existing `use*Data` pattern
**Source:** Deep Analysis

### Conventions
Project convention violations.

**3. Missing displayName** (`Component.tsx`) [displayName]
**Fix:** Add `Component.displayName = COMPONENT_NAME;`
**Source:** Mechanical Check

### react-doctor
Findings from react-doctor automated analysis.

**4. [react-doctor finding description]** (`Component.tsx:15`)
**Source:** react-doctor
```

### Priority Table

After all file sections, include a summary table:

```markdown
## Priority Table

| # | Finding | Category | Location | Source |
|---|---------|----------|----------|--------|
| 1 | Race condition in fetch effect | Critical | `Component.tsx:45-58` | Deep |
| 2 | Extract data fetching to hook | Improvement | `Component.tsx:30-72` | Deep |
| 3 | Missing displayName | Convention | `Component.tsx` | Haiku |
| 4 | react-doctor finding | react-doctor | `Component.tsx:15` | RD |
```

**Source column:** `Deep` = Track C, `Haiku` = Track B, `RD` = Track A (react-doctor)

### When No Findings

If all tracks return clean results:

```markdown
## React Review: No Issues Found

All checks passed:
- react-doctor: clean
- Convention checks: clean
- Deep analysis: clean
```

---

## Rules

- **Read files before analyzing** — never guess about code you haven't seen
- **Convention checks are opt-in** — only enforce displayName/data-component if the project uses them
- **No linter overlap** — skip anything Biome/ESLint already catches
- **Show examples** — include before/after snippets for non-obvious fixes
- **Reference project patterns** — "Following pattern in useVersionsData.ts"
- **No false positives** — only flag when you're certain
- **Respect trade-offs** — acknowledge when current approach is valid
- **Don't be pedantic** — skip trivial findings

## Keywords

react, review, effects, useEffect, hooks, conventions, displayName, data-component, memoization, architecture, patterns, react-doctor

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [edloidas](https://github.com/edloidas)
- **Source:** [edloidas/skills](https://github.com/edloidas/skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-edloidas-skills-react-review
- Seller: https://agentstack.voostack.com/s/edloidas
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.