React Doctor

millionco/react-doctor/skills/react-doctor

作者 millionco6ff671033ec1c2a39ead71a596d12977b6b6311c无许可证14K 个星标收录于 2026年10月9日更新于 2026年10月9日仓库昨天更新

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.

AI 生成的概览

扫描 React 代码库中的安全、性能、正确性与架构问题,并给出 0–100 的健康评分。

功能
React Doctor 通过 react-doctor 命令行工具扫描 React 代码库,检查安全、性能、正确性、无障碍、打包体积与架构问题,并输出 0–100 的健康评分。它支持仅检查改动代码、仅检查改动行、全量扫描、聚焦的 UI 设计审计,以及对某个 URL 进行运行时性能追踪并生成 DevTools trace。它还涵盖代码改动后的回归检查、与已保存扫描结果的基线对比、GitLab CI 警告退出码,以及规则的解释与配置。其 /doctor 工作流会获取远程分诊手册和逐条规则提示,引导完成扫描、分诊、修复与验证的循环。
适用场景
在完成 React 功能或修复缺陷后,用它确认提交前的健康评分没有回退。用于常规清理、聚焦的 UI 设计审计、运行时性能排查,或用户要求扫描、分诊、清理 React 诊断信息时。也用于用户想了解、调整或禁用特定规则时。
运行要求
需要 Node.js 与 npx 来运行 react-doctor@latest,并需要网络访问以获取该包以及远程手册和规则提示。运行时追踪需要交互式终端和 Chrome,可选通过 --cdp 使用远程调试。该技能不附带脚本,仅为说明文档,另有一个用于解释规则的参考文件。

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). 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 [blocked] 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

bash
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

Reuse a base scan

Save a complete --json scan, then pass --baseline base-report.json to report only new findings. This also works with --scope changed. Use the same version and rules for both scans. Findings are grouped by rule and file path, following Git renames. Only increases in each group's count are reported; groups without an increase skip location matching. Fingerprints, message similarity, and Git-adjusted line distance select the added findings. Formatting and edits that keep the same counts report no new findings. Saved reports must use the same textComponents, rawTextWrapperComponents, and respectInlineDisables settings. Regenerate the base report after changing these settings, or use a Git comparison. Older reports without fingerprints or sourceFilterConfigHash must be regenerated.

GitLab warning status

For GitLab CI, --warning-exit-code 123 returns 123 for non-blocking warnings. Pair it with allow_failure: { exit_codes: 123 }. Errors still return 1. Accepts integers from 2 to 255. --blocking warning still returns 1. --blocking none or --score skips this warning signal.

来源与署名

来源:millionco/react-doctor位于skills/react-doctor提交6ff6710

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架