react-doctor

Diagnose React codebases for security, performance, correctness, and architecture issues.

7|Updated Apr 25, 2025
One-click install
npx skills add https://github.com/ilyvsc/ado.fan --skill react-doctor-ilyvsc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-doctor
Source: https://github.com/ilyvsc/ado.fan/tree/main/.claude/skills/react-doctor
Command: npx skills add https://github.com/ilyvsc/ado.fan --skill react-doctor-ilyvsc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, next.js, prisma, lingui, and includes scripts (resource) and references (resource) components.

What problem does it solve?

The React Doctor Skill addresses the need for a thorough diagnostic of React codebases, identifying security, performance, correctness, and architectural issues before they become problems.

Core Features & Use Cases

  • Codebase Scanning: Checks for security vulnerabilities, performance bottlenecks, and code quality issues.
  • Regression Prevention: Monitors for code regressions after changes are made.
  • Local Triage Workflow: Provides a step-by-step guide to resolve identified issues.
  • Use Case: Before committing code, run the React Doctor to ensure that your React application remains healthy and free of regressions.

Quick Start

To scan your React code for changes, run: pnpx react-doctor@latest --verbose --scope changed.

Frequently Asked Questions about react-doctor

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

FAQPage Schema
How do I scan my React codebase for security and performance issues?

Scanning a React codebase for security and performance issues involves running a diagnostic tool to identify vulnerabilities, bottlenecks, and architectural flaws. This process checks correctness and monitors regressions using a local triage workflow.

What is the best way to prevent code regressions in a React application?

Preventing code regressions in a React application is best achieved by running a comprehensive codebase diagnostic before committing changes. This monitors for regressions and provides a step-by-step local triage workflow to resolve any identified issues.

Do I need a specific package manager to diagnose React code health?

Yes, diagnosing React code health requires using pnpm or Yarn as the package manager. Additionally, if your project uses the Prisma ORM, you must provide access to a PostgreSQL database for the diagnostic tool to function correctly.

Can I check only changed React files for code quality issues?

Yes, you can check only changed React files for code quality issues by executing the diagnostic scan with a specific scope. Running the command with the changed scope flag ensures the scan targets only recent modifications.

Does the React diagnostic scan work with Next.js and TypeScript?

Yes, the React diagnostic scan works with Next.js and TypeScript, as both are listed as supported dependencies. The scan evaluates code health across these technologies to identify architectural and correctness issues.

Why does the React code health scan require a PostgreSQL database?

The React code health scan requires a PostgreSQL database specifically to support projects utilizing the Prisma ORM. This database access allows the diagnostic tool to evaluate data layer correctness and architecture during the comprehensive scan.