skills.rest
MoofonLi
MoofonLiCOMMUNITY
Explore all skills by this author →
GitHub

react-doctor

Diagnose React frontend codebases for performance bottlenecks, anti-patterns, and component health issues.

2|Updated Jul 11, 2026
Search Tags:#code review#performance#frontend#react#hooks#diagnostics#re-renders
One-click install
npx skills add https://github.com/MoofonLi/dev-ready --skill react-doctor-moofonli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-doctor
Source: https://github.com/MoofonLi/dev-ready/tree/main/src/dev_ready/templates/claude/skills/react-doctor
Command: npx skills add https://github.com/MoofonLi/dev-ready --skill react-doctor-moofonli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React applications often accumulate hidden performance problems such as unnecessary re-renders, unstable prop references, and incorrect hook usage that are hard to spot during manual code review. This Skill runs an automated health check on the React frontend so these issues surface as actionable warnings before they reach production. ## Core Features & Use Cases - Automated frontend health checks: Run a single command to scan the React codebase for performance bottlenecks, anti-patterns, and component health issues. - Guided remediation: Interpret findings across re-render warnings, hook usage rules, and state management, then apply targeted fixes and re-verify. - Use Case: Before merging a large component refactor, run the doctor check from the frontend directory, fix flagged memoization and hook dependency problems, and re-run until all warnings are resolved. ## Quick Start Ask the agent to run react-doctor on the frontend codebase and fix any reported re-render or hook usage warnings.

Frequently Asked Questions about react-doctor

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

FAQPage Schema
How do I check a React app for performance issues?▼

Run npm run doctor from the frontend directory to scan the React codebase for performance bottlenecks and anti-patterns. The report highlights re-render warnings, hook usage problems, and state management issues you can fix individually.

How to fix unnecessary re-renders in React components?▼

Unnecessary re-renders are typically fixed by adding memoization with useMemo and useCallback, and by keeping object and array prop references stable. After applying fixes, re-run the doctor check to confirm the warnings are resolved.

When should I run a React code health check?▼

Run it before finalizing major component changes or refactors, when investigating performance regressions or memory leaks, and as part of periodic frontend code quality reviews.

Why does React doctor report hook usage warnings?▼

Hook warnings appear when dependency arrays are incomplete or hooks are called conditionally instead of at the top level. Verify each hook's dependency array and ensure all hooks run unconditionally on every render.

Can react-doctor fix issues automatically?▼

No, it reports warnings and guidance only. You apply targeted code fixes for memoization, hook rules, and redundant state, then re-run the check to confirm the issues are resolved.

Related Skills

Explore More Software Engineering Skills→
ai-heroai-hero
5

create-project

Scaffolds new Python, full-stack, or Node.js projects with AGENTS.md and git initialization.

Official
Advanced
oxieoxie

checks-phase

Categorize and patch CI and deployment check failures until all pass.

Community
Intermediate
ArthTech-AIArthTech-AI

qa

Run full-stack QA checks with pytest, Jest, ruff, TypeScript, and Playwright.

Official
Intermediate
gwpjpgwpjp
3

visual-qa-react-devtools-profiler

Profile React component rendering with React DevTools Profiler to identify render causes.

Community
Intermediate