Skills/React Doctor

React Doctor

byReact Doctor·frontend

React Doctor runs deterministic checks on your code. It reports issues in state and effects, performance, architecture, security, accessibility, and maintainability. Supports React projects built with Next.js, Vite, Astro, TanStack, React Native, and Expo.

CLAUDE CODECURSORCODEXWINDSURF
Loading stats...

Installation

Install directly into your agent CLI.

$npx react-doctor@latest install
Usage examplePrompt your agent

“Audit this React codebase with React Doctor: inspect state and effects, detect hook bugs, and optimize render performance.”

React Doctor Subgroups

Deterministic Code Health & Rules Enginejump ↓

Run automated static checks across React, Next.js, and Vite projects to detect hook dependency loops, state bugs, and render waste.

SKILL.md

--- name: react-doctor description: Use when finishing a feature, fixing a bug, before committing React code, or when the user types /doctor, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook. version: "1.2.0" ---

React Doctor

Scans React codebases for security, performance, correctness, and architecture issues. Outputs a 0–100 health score.

After making React code changes:

Run npx react-doctor@latest --verbose --scope changed and check the score did not regress.

If the score dropped, fix the regressions before committing.

For general cleanup or code improvement:

Run npx react-doctor@latest --verbose (the default --scope full) to scan the full codebase. Fix issues by severity — errors first, then warnings.

For a focused UI design audit:

Run npx react-doctor@latest design --verbose. This selects only design-tagged UI composition, typography, interaction, accessibility, and motion rules, including focused rules that remain opt-in during a general health scan.

For runtime performance problems:

Run npx react-doctor@latest scan <url> --format json in an interactive terminal. React Doctor opens an isolated system Chrome profile, records a DevTools trace while the user reproduces the slow interaction, and flashes purple outlines with component names as React renders. It stops when they press Enter. Read the structured summary first, then inspect the returned local .json.gz trace for CPU, browser, and React component evidence.

If the user needs their authenticated browser state, use --cdp <remote-debugging-url>. This requires Chrome to already be running with remote debugging. Never ask for cookies or copy the user's browser profile. Treat the trace as sensitive local application data and never upload it without explicit permission.

/doctor — full local triage workflow

When the user types /doctor, says "run react doctor", or asks for a full triage / cleanup pass (not just a regression check), fetch the canonical local-triage playbook and follow every step in it:

bash
curl --fail --silent --show-error \
  --header 'Cache-Control: no-cache' \
  https://www.react.doctor/prompts/react-doctor-agent.md

The playbook is the single source of truth — a scan → filter → triage → fix → validate loop that edits the working tree directly (never commits, never opens PRs).