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 設計稽核,以及對某個網址進行執行期效能追蹤並產生 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 從公開儲存庫中收錄這些內容。

檢舉或申請下架