mcpField
D
diagnosing-react-code

diagnosing-react-code

github.com/bostonaholicTesting & quality264 installsUpdated 1d ago
Repository

About diagnosing-react-code

A skill for using react-doctor to inspect React packages and guide a focused diagnostic-fix loop. It emphasizes consistent comparisons, scoped findings, and reporting unresolved issues.

Key features

  1. 01Run react-doctor at a pinned version
  2. 02Inspect security, performance, correctness, and architecture
  3. 03Scope findings to changed files or the full package
  4. 04Track baseline and final scores and diagnostics
  5. 05Stop after repeated unresolved errors or out-of-scope fixes

Use cases

  1. 01Check changed React files during a coding task
  2. 02Run a whole-package React health check
  3. 03Prioritize security and correctness findings
  4. 04Report remaining diagnostics after a fix cycle

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/bostonaholic/skills --skill diagnosing-react-code

After installing, type/diagnosing-react-codein Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

Diagnosing React code

react-doctor scans a React package and prints a 0-100 score plus diagnostics for security, performance, correctness, and architecture. It needs Node ^20.19.0 || >=22.13.0.

Before the first run

  • The first run in a session downloads and executes a third-party package from npm. Ask the user before it, naming the pinned version.
  • By default the score comes from the react-doctor score API and the supply-chain scan queries Socket.dev; when the user wants nothing sent off the machine, add --no-score --no-supply-chain (the run then reports no score).

Run

Run inside the package whose package.json lists react in dependencies or peerDependencies; at a monorepo root the tool prompts for a project.

npx -y [email protected] --verbose --scope changed
  • The pin keeps scores comparable across runs. Never fall back to @latest; upgrade only by changing the pin deliberately. If a flag is rejected, check npx -y [email protected] --help and adjust.
  • --verbose lists every rule and file; the default shows only the top 3.
  • --scope changed reports only new findings in files changed against the auto-detected base ref (--base <ref> to set it). Use --scope full for a whole-package health check. It replaces the deprecated --diff.

Fix loop

  1. Record the baseline score and error and warning counts.
  2. Fix error diagnostics, security and correctness first. Fix warnings only in code the current task changed.
  3. Re-run the same command until it reports no errors and the score is at least the baseline. Stop after three fix rounds that leave errors, or when a fix would change behavior outside the task, and report what remains.

Report the version and scope, the score from baseline to final (or "not computed: --no-score"), each fixed diagnostic, and each remaining one with why it was not fixed, as <severity> <rule> <file>:<line>.

Comments

Markdown supported