react-doctor
Use when finishing a feature, fixing a bug, before committing React code, or when the user wants to improve code quality or clean up a codebase. Checks for score regression. Covers lint, dead code, accessibility, bundle size, architecture diagnostics.
Best use case
react-doctor is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use when finishing a feature, fixing a bug, before committing React code, or when the user wants to improve code quality or clean up a codebase. Checks for score regression. Covers lint, dead code, accessibility, bundle size, architecture diagnostics.
Teams using react-doctor should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/react-doctor/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How react-doctor Compares
| Feature / Agent | react-doctor | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use when finishing a feature, fixing a bug, before committing React code, or when the user wants to improve code quality or clean up a codebase. Checks for score regression. Covers lint, dead code, accessibility, bundle size, architecture diagnostics.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# React Doctor Scans React codebases for security, performance, correctness, and architecture issues. Outputs a 0–100 health score. ## After making React code changes: Run `npx -y react-doctor@latest . --verbose --diff` and check the score did not regress. If the score dropped, fix the regressions before committing. ## For general cleanup or code improvement: Run `npx -y react-doctor@latest . --verbose` (without `--diff`) to scan the full codebase. Fix issues by severity — errors first, then warnings. ## Command ```bash npx -y react-doctor@latest . --verbose --diff ``` | Flag | Purpose | | ----------- | --------------------------------------------- | | `.` | Scan current directory | | `--verbose` | Show affected files and line numbers per rule | | `--diff` | Only scan changed files vs base branch | | `--score` | Output only the numeric score |
Related Skills
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
test
Advanced test implementation command with unit/E2E support, auto-execution, and smart fixing capabilities
serena
Token-efficient Serena MCP command for structured app development and problem-solving
project-guidelines-example
Example project-specific skill template based on a real production application.
notion-bug-pr
Skill that pulls bug tickets (titles containing 「不具合」) from a Notion database, investigates root cause in a GitHub repo, applies fixes, and opens draft PRs. Supports three modes — daily recurring schedule, one-shot at a specific time, or immediate on-demand run. Takes three or four args: Notion database URL, repo path or name, and either HH:MM (daily), "once HH:MM" (one-shot), or "now" (immediate).
graphify
any input (code, docs, papers, images, videos) to knowledge graph. Use when user asks any question about a codebase, documents, or project content - especially if graphify-out/ exists, treat the question as a /graphify query.
chrome
Comprehensive Chrome DevTools development system with native Chrome capabilities for debugging, E2E testing, performance analysis, and browser automation
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
typescript-advanced-types
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
tanstack-start
Full-stack React framework powered by TanStack Router with SSR, streaming, server functions, and deployment to any hosting provider.
tanstack-start-server-fn-testing
Unit-test TanStack Start createServerFn handlers via a global vi.mock that combines two patterns from Discussion #2701