# typescript-react-reviewer

A code review skill for TypeScript and React 19 apps. Catches hook anti-patterns, state mutations and type safety gaps before you merge.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 9000 installs · ★ 3
- Author: dotneet
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/dotneet/claude-code-marketplace/tree/HEAD/review-tool/skills/typescript-react-reviewer/SKILL.md
- Updated: 2026-01-23
- HTML: https://affpapa.org/en/nevibecode/skills/typescript-react-reviewer

## What it does

The skill sorts findings into three priority levels. Critical issues block the merge: derived state kept in `useEffect`, missing effect cleanup, direct state mutation with `.push()` or `.splice()`, conditional hook calls, `key={index}` in dynamic lists, and `any` without a reason. React 19 gets its own checks — `useFormStatus` inside the same component as `<form>` always returns false, and a promise created during render for `use()` spins into an infinite loop.

Alongside the tables it ships reference documents: `references/react19-patterns.md` covers the new hooks and Server/Client Component boundaries, `references/antipatterns.md` is a catalog with fixes, `references/checklist.md` walks a full review. A short state management guide is included too: TanStack Query for server data, Zustand for simple global UI state, `useState`/`useReducer` for local.

It recommends turning on `strict`, `noUncheckedIndexedAccess`, `noImplicitReturns` and `exactOptionalPropertyTypes` in `tsconfig.json`. Skip `noUncheckedIndexedAccess` and `arr[i]` never gets checked for undefined, so some of the type red flags slip past review. Install is one `npx skills add` command, and the skill file lands in your platform's skills directory.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dotneet/claude-code-marketplace --skill typescript-react-reviewer -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/typescript-react-reviewer/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/typescript-react-reviewer/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dotneet/claude-code-marketplace --skill typescript-react-reviewer -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/typescript-react-reviewer/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dotneet/claude-code-marketplace --skill typescript-react-reviewer -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/typescript-react-reviewer/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dotneet/claude-code-marketplace typescript-react-reviewer
```

2. **Manually: put the files in place**
- File: `.github/skills/typescript-react-reviewer/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dotneet/claude-code-marketplace --skill typescript-react-reviewer -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dotneet/claude-code-marketplace --path review-tool/skills/typescript-react-reviewer
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/typescript-react-reviewer/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dotneet/claude-code-marketplace --skill typescript-react-reviewer -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dotneet/claude-code-marketplace/tree/HEAD/review-tool/skills/typescript-react-reviewer/SKILL.md

## When to use it
- scan a pull request for React anti-patterns
- catch derived state hidden inside `useEffect`
- find unjustified `any` and weak type coverage
- review new React 19 hook usage
- judge whether state is colocated or duplicated from the server

## Example prompts
- review this TypeScript and React 19 component
- check this PR for hook anti-patterns and state mutation
- run the review checklist and tell me where this state should live

## Similar
- [typescript-react-patterns](https://affpapa.org/en/nevibecode/skills/typescript-react-patterns.md) — skill · 1100 installs
- [react-code-review](https://affpapa.org/en/nevibecode/skills/react-code-review.md) — skill · 4300 installs
- [react-best-practices](https://affpapa.org/en/nevibecode/skills/mastra-ai-react-best-practices.md) — skill · 2800 installs
- [narrow-react-prop-types](https://affpapa.org/en/nevibecode/skills/narrow-react-prop-types.md) — skill · 1300 installs
- [react-flow-code-review](https://affpapa.org/en/nevibecode/skills/react-flow-code-review.md) — skill · 319 installs
- [typescript-nodejs-nextjs-react-ui-css-cursorrules-](https://affpapa.org/en/nevibecode/rules/typescript-nodejs-nextjs-react-ui-css-cursorrules.md) — rule · ★ 41011

From the same set: [dotneet/claude-code-marketplace](https://affpapa.org/en/nevibecode/by/dotneet/claude-code-marketplace.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md