New to Claude Skills? Learn how to install them →

millionco on GitHub

React Doctor

Free

Ensure your React code is healthy and performant.

by millionco14.3k stars on millionco/react-doctor
10 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What React Doctor does

React Doctor is a tool designed to analyze and improve the health of React codebases by identifying security, performance, correctness, and architectural issues. It provides a comprehensive health score ranging from 0 to 100, which helps developers understand the overall quality of their code after changes have been made. This skill is particularly useful for developers who want to maintain high standards in their React applications, ensuring that they are not only functional but also efficient and secure.

When finishing a feature or fixing a bug, React Doctor allows users to run a simple command to check for regressions in their code. By executing npx react-doctor@latest --verbose --scope changed, developers can quickly verify if their changes have negatively impacted the health score. If the score has dropped, it prompts users to address the identified issues before committing their code, thus promoting better coding practices and reducing the likelihood of introducing bugs into the main branch.

In addition to regression checks, React Doctor offers a full codebase scan with npx react-doctor@latest --verbose, which evaluates the entire project for issues categorized by severity. Developers can tackle errors first, followed by warnings, making it easier to prioritize fixes. For a more focused audit, users can run a design-specific check to ensure compliance with UI design standards, covering aspects like accessibility and interaction rules.

The /doctor command initiates a complete local triage workflow, guiding users through a structured process to scan, filter, triage, fix, and validate their code. This ensures that developers can systematically address issues while leveraging a canonical playbook that is kept up to date. Overall, React Doctor is an essential tool for any React developer looking to maintain code quality and ensure robust application performance.

When to use it

Use React Doctor after making changes to your React code to ensure no new issues have been introduced and to maintain a high quality of code.

When not to use it

This tool may not be suitable for non-React projects or for users who do not require detailed diagnostics and scoring of their code quality.

What you can build with it

Post-Feature Check

After implementing a new feature, run React Doctor to ensure no regressions have been introduced.

Code Cleanup

Use React Doctor to scan the entire codebase for issues and prioritize fixes based on severity.

Design Compliance Audit

Run a focused design audit to ensure your UI adheres to accessibility and interaction standards.

How to install React Doctor

View source

1. Install with the skills CLI

npx skills add millionco/react-doctor/react-doctor --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by millionco

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.

/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:

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). Updating the prompt at its source updates every agent on its next fetch — no skill reinstall needed.

Pair it with the matching per-rule prompts at https://www.react.doctor/prompts/rules/<plugin>/<rule>.md (fetched on demand inside the playbook) so each fix uses the canonical, reviewer-tested recipe.

Configuring or explaining rules

When the user wants to understand a rule, disagrees with one, or wants to disable / tune which rules run (not fix code), read references/explain.md and follow it. Start with npx react-doctor@latest rules explain <rule>, then apply the narrowest control via npx react-doctor@latest rules disable|set|category|ignore-tag …, which edits your doctor.config.* (or package.json#reactDoctor).

Command

npx react-doctor@latest --verbose --scope changed
FlagPurpose
.Scan current directory
--verboseShow affected files and line numbers per rule
--scope changedOnly report issues introduced vs the base branch (default: full)
--scope linesOnly report issues on the changed lines
--scoreOutput only the numeric score
designRun only the focused UI design diagnostics

Frequently asked questions about React Doctor

Similar skills