# react-doctor

The skill scans a React codebase against 47+ rules and returns a 0-100 score with file paths and line numbers. Handy before a review or when the app drags.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2800 installs · ★ 379
- Author: brianlovin
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/brianlovin/agent-config/tree/HEAD/skills/react-doctor/SKILL.md
- Updated: 2026-03-25
- HTML: https://affpapa.org/en/nevibecode/skills/brianlovin-react-doctor

## What it does

The skill runs `npx -y react-doctor@latest . --verbose` at the project root and prints diagnostics with file paths and line numbers. Rules are grouped: security, state and effects, architecture, performance, correctness, Next.js, bundle size, server, accessibility, dead code. A score of 75 or higher is great, 50-74 needs work, below 50 is critical.

The workflow is short: run the command, read every diagnostic, fix errors first since they carry the highest severity, then re-run to check the score. It catches hardcoded secrets in the client bundle and `eval()`, derived state inside `useEffect`, components declared inside other components, array index as `key`, barrel imports, full lodash and moment.js, missing auth in server actions.

One thing to know up front: the skill expects a React project, so a Vue, Svelte or plain backend repo gets nothing out of it. Some rules target Next.js, so in a plain React app those diagnostics never show up. It installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, with the skill file landing in that agent's own directory.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill react-doctor -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill react-doctor -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill react-doctor -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install brianlovin/agent-config react-doctor
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill react-doctor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/brianlovin/agent-config --path skills/react-doctor
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add brianlovin/agent-config --skill react-doctor -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/brianlovin/agent-config/tree/HEAD/skills/react-doctor/SKILL.md

## When to use it
- find hardcoded secrets in the client bundle
- pull derived state out of useEffect
- split a giant component into smaller ones
- shrink the bundle by dropping barrel imports and moment.js
- check that server actions require auth

## Example prompts
- run react-doctor on this project and show me every error
- fix the react-doctor findings, starting with the most severe
- run react-doctor again and tell me if the score went up

## Similar
- [react-performance](https://affpapa.org/en/nevibecode/skills/react-performance.md) — skill · 4900 installs
- [react-best-practices](https://affpapa.org/en/nevibecode/skills/react-best-practices-2.md) — skill · 399 installs
- [vercel-react-best-practices](https://affpapa.org/en/nevibecode/skills/vercel-react-best-practices.md) — skill · 448 installs
- [react-flow-code-review](https://affpapa.org/en/nevibecode/skills/react-flow-code-review.md) — skill · 319 installs
- [react-patterns](https://affpapa.org/en/nevibecode/skills/affaan-m-react-patterns.md) — skill · 4900 installs
- [frontend-react-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-react-best-practices.md) — skill · 1200 installs

## Other versions with the same name
- [react-doctor · millionco](https://affpapa.org/en/nevibecode/skills/react-doctor.md) — 19200 installs

From the same set: [brianlovin/agent-config](https://affpapa.org/en/nevibecode/by/brianlovin/agent-config.md) — 15 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