# React/Next.js Review

## Codebase Detection

**When reviewing a React or Next.js project**, launch an additional parallel agent for Vercel React best practices.

**Detect React/Next.js codebase by checking:**
- `package.json` contains `"next"` or `"react"` dependencies
- Files with `.tsx`, `.jsx` extensions in changes
- `next.config.js` or `next.config.ts` exists
- `app/` or `pages/` directory structure (Next.js)

## Parallel Agent

**If React/Next.js detected, launch parallel agent:**

```yaml
agent:
  type: code-reviewer
  focus: "vercel-react-best-practices"
  task: |
    Review the recent code changes using Vercel React best practices.
    Focus on:
    - Eliminating waterfalls (async patterns, Promise.all)
    - Bundle size optimization (dynamic imports, barrel files)
    - Server-side performance (caching, serialization)
    - Re-render optimization (memoization, state management)
    - Rendering performance patterns

    Use the /vercel-react-best-practices skill as reference.
    Report findings with [BLOCKING], [SUGGESTION], or [NIT] labels.
```

**Execution:**
1. Check for React/Next.js in `package.json`
2. If detected, use Task tool to launch parallel agent:
   ```
   Task tool with subagent_type="code-reviewer":
   "Review recent changes against Vercel React best practices from /vercel-react-best-practices skill.
   Focus on: async patterns, bundle optimization, server performance, re-renders.
   Check changed files for violations of rules like async-parallel, bundle-barrel-imports,
   server-cache-react, rerender-memo. Report with priority labels."
   ```
3. Merge findings into main review output
