RE

React Doctor scans your React codebase to identify security, performance, and architecture issues, providing a score and specific fixes.

Install

mkdir -p .claude/skills/react-doctor && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13942" && unzip -o skill.zip -d .claude/skills/react-doctor && rm skill.zip

Installs to .claude/skills/react-doctor

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Diagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality.
152 chars✓ has a “when” trigger
Intermediate

Key capabilities

  • Scan React codebase for security issues
  • Identify state and effects related problems
  • Diagnose architecture issues in React components
  • Detect performance bottlenecks in React applications
  • Find correctness issues like array index as key
  • Analyze bundle size for optimization opportunities

How it works

The skill scans a React codebase for various issues across security, performance, correctness, and architecture, then provides a score and detailed diagnostics.

Inputs & outputs

You give it
React project root directory
You get back
0-100 score with actionable diagnostics including file paths and line numbers

When to use react-doctor

  • Improving component architecture
  • Optimizing bundle size
  • Fixing useEffect state bugs
  • Auditing React security

About this skill

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

Workflow

  1. Run the command above at the project root
  2. Read every diagnostic with file paths and line numbers
  3. Fix issues starting with errors (highest severity)
  4. Re-run to verify the score improved

Rules (47+)

  • Security: hardcoded secrets in client bundle, eval()
  • State & Effects: derived state in useEffect, missing cleanup, useState from props, cascading setState
  • Architecture: components inside components, giant components, inline render functions
  • Performance: layout property animations, transition-all, large blur values
  • Correctness: array index as key, conditional rendering bugs
  • Next.js: missing metadata, client-side fetching for server data, async client components
  • Bundle Size: barrel imports, full lodash, moment.js, missing code splitting
  • Server: missing auth in server actions, blocking without after()
  • Accessibility: missing prefers-reduced-motion
  • Dead Code: unused files, exports, types

Score

  • 75+: Great
  • 50-74: Needs work
  • 0-49: Critical

When not to use it

  • When the codebase is not a React project
  • When the user does not need to diagnose React-specific issues

Limitations

  • Specific to React codebases
  • Outputs a score from 0-100
  • Requires running from the project root

How it compares

This skill provides a complete, score-based diagnostic report for React-specific codebase health, unlike generic code linters.

Compared to similar skills

react-doctor side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
react-doctor (this skill)04moReviewIntermediate
roier-seo46moReviewIntermediate
senior-qa05moReviewIntermediate
full-review03moReviewAdvanced

Try saying

Example prompts that trigger this skill in your AI assistant.

Search skills

Search the agent skills registry