react-doctor

Scans React codebases for security, performance, and architecture issues with a health score.

4|Updated Jul 13, 2024
One-click install
npx skills add https://github.com/PunGrumpy/og-tester --skill react-doctor-pungrumpy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-doctor
Source: https://github.com/PunGrumpy/og-tester/tree/main/.agents/skills/react-doctor
Command: npx skills add https://github.com/PunGrumpy/og-tester --skill react-doctor-pungrumpy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React codebases accumulate lint violations, accessibility gaps, bundle bloat, and architecture problems that are hard to triage manually. This Skill runs automated diagnostics and produces a 0-100 health score so you can catch regressions before committing and systematically clean up issues by severity. ## Core Features & Use Cases - Regression Checks: Run a changed-scope scan after editing React code to verify the health score did not drop before committing. - Full Triage Workflow: The /doctor command fetches a canonical scan-filter-triage-fix-validate playbook that edits the working tree directly without committing or opening PRs. - Focused Design Audits: Run design-tagged rules covering UI composition, typography, interaction, accessibility, and motion. - Rule Configuration: Explain, disable, or tune individual rules, categories, and tags via doctor.config.* edits that preserve formatting. - Use Case: After finishing a feature, ask the agent to run react doctor on changed files; if the score regresses, it fixes the new issues before you commit. ## Quick Start Ask the agent to run react doctor on the changed files and fix any regressions before committing.

Frequently Asked Questions about react-doctor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check React code for issues before committing?

Run npx react-doctor@latest --verbose --scope changed to scan only issues introduced versus the base branch. If the health score dropped, fix the regressions before committing your changes.

How do I disable a React lint rule that keeps flagging my code?

Run npx react-doctor@latest rules explain <rule> to understand why it fires, then use rules disable <rule> to turn it off. This edits your doctor.config file or the reactDoctor key in package.json while preserving formatting.

What does the react-doctor health score measure?

The score is a 0-100 metric reflecting security, performance, correctness, and architecture diagnostics across the scanned codebase. You can output only the numeric value with the --score flag.

Can I scan only the lines I changed instead of the whole codebase?

Yes, use --scope lines to report only issues on changed lines, or --scope changed for issues introduced versus the base branch. The default full scope scans the entire codebase.

Why is a rule still off after I set it to warn in my config?

Tags in ignore.tags disable every rule carrying that tag before linting, so a rule-level override cannot re-enable a tag-ignored rule. Remove the tag with rules unignore-tag first, then set the rule severity.

Does react-doctor commit changes or open pull requests automatically?

No, the triage playbook edits the working tree directly and never commits or opens PRs. You review and commit the fixes yourself after validation.