react-doctor

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

1.1k|189|Updated Mar 11, 2025
One-click install
npx skills add https://github.com/databuddy-analytics/Databuddy --skill react-doctor-databuddy-analytics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-doctor
Source: https://github.com/databuddy-analytics/Databuddy/tree/main/.agents/skills/react-doctor
Command: npx skills add https://github.com/databuddy-analytics/Databuddy --skill react-doctor-databuddy-analytics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Doctor scans web codebases for security, performance, correctness, and architecture issues, replacing slow manual reviews with a clear 0-100 health score so teams can target the most critical fixes first.

Core Features & Use Cases

  • Security & Correctness: Flags hardcoded secrets, dangerous eval usage, derived state issues, and conditional rendering bugs to keep user data and client logic safe.
  • Architecture & Performance: Detects inline render functions, giant components, missing metadata, and inefficient animations or bundles that bloat Next.js or React apps.
  • Reporting & Verification: Outputs file paths, line numbers, and severity levels along with an aggregate score so teams can prioritize errors before release.
  • Use Case: Run React Doctor before every deployment to audit React or Next.js code, fix the highest severity diagnostics, and re-run to confirm the score improved.

Quick Start

Run npx -y react-doctor@latest . --verbose from your project root to generate the latest diagnostics and health score.

Frequently Asked Questions about react-doctor

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

FAQPage Schema
How do I run a React codebase diagnostic scan before deployment?

Run a React codebase diagnostic scan by executing npx react-doctor@latest with the verbose flag from your project root. The CLI outputs actionable diagnostics, including file paths and line numbers, alongside a 0-100 health score to prioritize pre-release fixes.

What does a React health score audit check for?

A React health score audit checks codebases for security vulnerabilities, performance bottlenecks, correctness bugs, and architecture issues. It flags hardcoded secrets, dangerous eval usage, derived state issues, and giant components to quantify overall project health from 0 to 100.

Can I use this diagnostic CLI tool with Next.js projects?

Yes, you can use this diagnostic CLI tool with Next.js projects. The scanner detects missing metadata, inefficient animations, and bundle bloat specific to Next.js and React apps, providing line numbers and severity levels for targeted architectural improvements.

What is the best way to prioritize React code review fixes?

The best way to prioritize React code review fixes is to use an automated CLI scan that outputs severity levels and a 0-100 aggregate health score. Teams can target the highest severity diagnostics first and re-run the scan to confirm score improvements before release.

Why does my React app have inefficient bundles and inline render functions?

Inefficient bundles and inline render functions are architectural and performance issues flagged during a React diagnostic scan. The CLI identifies these specific patterns alongside giant components and inefficient animations, providing exact file paths to streamline your codebase.