react-doctor
brianlovin/agent-config
Scan React codebases for security, performance, and architecture issues with actionable diagnostics.
What is react-doctor?
React Doctor analyzes your React codebase against 47+ rules covering security, performance, state management, and code quality. Run it at your project root to get a 0-100 health score with specific file paths and line numbers for each issue.
- Detects security issues like hardcoded secrets and eval() usage
- Identifies state and effect anti-patterns (derived state, missing cleanup, cascading setState)
- Flags architectural problems (nested components, giant components, inline renders)
- Catches performance issues (layout animations, transition-all, excessive blur)
- Finds correctness bugs (array index keys, conditional rendering errors)
- Scans for bundle size problems (barrel imports, full lodash/moment.js, missing code splitting)
How to install react-doctor
npx skills add https://github.com/brianlovin/agent-config --skill react-doctorHow to use react-doctor
- 1.Run `npx -y react-doctor@latest . --verbose` at your project root
- 2.Review the output diagnostics, which include file paths and line numbers
- 3.Prioritize fixes starting with errors (highest severity)
- 4.Address issues in order of severity: security, then architecture, then performance
- 5.Re-run the command to verify your score improved
Use cases
- Audit an existing React codebase before refactoring or performance optimization
- Review pull requests for security and architectural issues before merging
- Establish baseline code quality metrics and track improvements over time
- Identify bundle size bloat and opportunities for code splitting
- Validate Next.js projects for server/client boundary violations
- React developers reviewing code quality
- Teams auditing security and performance
- Next.js developers
- Engineering leads establishing code standards
react-doctor FAQ
75+ is great, 50-74 needs work, 0-49 is critical. The score reflects overall codebase health across security, performance, and correctness.
The SKILL.md does not document rule configuration or suppression options. Check the tool's documentation or GitHub repo for customization details.
Run it during code review, before major refactors, and periodically (weekly/monthly) to track codebase health trends.
The SKILL.md does not specify TypeScript support. The tool scans React codebases; verify compatibility with your specific setup.
Full instructions (SKILL.md)
Source of truth, from brianlovin/agent-config.
name: react-doctor description: Diagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality. version: 1.0.0
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
- Run the command above at the project root
- Read every diagnostic with file paths and line numbers
- Fix issues starting with errors (highest severity)
- 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
Related skills
More from brianlovin/agent-config and the wider catalog.
reclaude
Refactor CLAUDE.md files to follow progressive disclosure and best practices.
sentry
Sentry error monitoring and performance tracing for Next.js applications.
simplify
Simplify and refine recently modified code for clarity and consistency.
tdd
Test-driven development with red-green-refactor loop for building features and fixing bugs.
workflow
Workflow orchestration for complex coding tasks with planning, verification, and autonomous bug fixing.
bright-data-best-practices
Reference documentation for building production-ready Bright Data integrations with best practices.