What does the 0-100 score mean?

It's a composite gauge of security, performance, correctness, and architecture issues across the React codebase, guiding you on where to focus fixes.

How should I fix issues without breaking other parts of the app?

Tackle blockers first using the diagnostics, run targeted tests locally, and re-run React Doctor to confirm the score improves after each fix.

Can I use React Doctor in CI?

Yes. Integrate it as a pre-merge or CI step and optionally fail the job if the score falls below a threshold or if critical findings remain.

react-doctor

npx machina-cli add skill runkids/my-skills/react-doctor --openclaw

Files (1)

SKILL.md

540 B

React Doctor

Scans your React codebase for security, performance, correctness, and architecture issues. Outputs a 0-100 score with actionable diagnostics.

Usage

npx -y react-doctor@latest . --verbose --diff

Workflow

Run after making changes to catch issues early. Fix errors first, then re-run to verify the score improved.

Source

git clone https://github.com/runkids/my-skills/blob/main/frontend/react/react-doctor/SKILL.mdView on GitHub

Overview

React Doctor scans your React codebase for security, performance, correctness, and architecture issues, producing a 0-100 score and actionable diagnostics. It helps teams catch regressions early and guides targeted fixes before code review. Use it after making changes, finishing a feature, or fixing bugs to maintain code health.

How This Skill Works

The tool analyzes your codebase via a CLI run, aggregating results across security, performance, correctness, and architecture dimensions. It outputs a 0-100 score along with concrete diagnostics you can act on, and supports verbose diff reporting to highlight changes since the last run.

When to Use It

After editing any React component or hook to catch new issues
During code review to surface problems before merging
When finishing a feature to validate no regressions
While debugging a bug to locate problematic areas
Before merging or deploying to ensure a solid health score

Quick Start

Step 1: Run the CLI in your repo: npx -y react-doctor@latest . --verbose --diff
Step 2: Review the 0-100 score and the actionable diagnostics
Step 3: Fix blockers, then re-run to verify the score improves

Best Practices

Run with --verbose --diff to see issues introduced by recent changes
Prioritize high-severity and blocking diagnostics first
Use the actionable diagnostics to guide targeted fixes
Re-run until the score improves and critical issues are resolved
Integrate as a pre-merge or CI step to maintain health over time

Example Use Cases

A new component is added; React Doctor surfaces a security warning and a render performance hotspot, guiding a targeted fix.
During a code review, the tool flags architectural drift in a refactor, prompting a corrective pattern.
A bug fix run shows a regression in asynchronous data handling; the diagnostics point to a safer wiring approach.
While debugging a sluggish list render, the score highlights a repeated re-render path to optimize.
Before merging a feature branch, the final run confirms no critical issues and shows an improved score.

Frequently Asked Questions

Add this skill to your agents