react-doctor · brianlovin — Claude Code skill: React codebase audit
The skill scans a React codebase against 47+ rules and returns a 0-100 score with file paths and line numbers. Handy before a review or when the app drags.
npx skills add brianlovin/agent-config --skill react-doctor -a claude-codeWhat react-doctor does
The skill runs npx -y react-doctor@latest . --verbose at the project root and prints diagnostics with file paths and line numbers. Rules are grouped: security, state and effects, architecture, performance, correctness, Next.js, bundle size, server, accessibility, dead code. A score of 75 or higher is great, 50-74 needs work, below 50 is critical.
The workflow is short: run the command, read every diagnostic, fix errors first since they carry the highest severity, then re-run to check the score. It catches hardcoded secrets in the client bundle and eval(), derived state inside useEffect, components declared inside other components, array index as key, barrel imports, full lodash and moment.js, missing auth in server actions.
One thing to know up front: the skill expects a React project, so a Vue, Svelte or plain backend repo gets nothing out of it. Some rules target Next.js, so in a plain React app those diagnostics never show up. It installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, with the skill file landing in that agent's own directory.
What it helps with
- find hardcoded secrets in the client bundle
- pull derived state out of useEffect
- split a giant component into smaller ones
- shrink the bundle by dropping barrel imports and moment.js
- check that server actions require auth
Example prompts for the agent
- run react-doctor on this project and show me every error
- fix the react-doctor findings, starting with the most severe
- run react-doctor again and tell me if the score went up
How to install react-doctor
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill react-doctor -a claude-code2Manually: put the files in place
~/.claude/skills/react-doctor/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/react-doctor/
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill react-doctor -a codex2Manually: put the files in place
.agents/skills/react-doctor/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill react-doctor -a cursor2Manually: put the files in place
.cursor/skills/react-doctor/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install brianlovin/agent-config react-doctor2Manually: put the files in place
.github/skills/react-doctor/SKILL.md1Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill react-doctor -a gemini-cli2Platform CLI
gemini skills install https://github.com/brianlovin/agent-config --path skills/react-doctorManually: put the files in place
.devin/skills/react-doctor/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill react-doctor -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about react-doctor
How do I install react-doctor in Claude?
Run npx skills add brianlovin/agent-config --skill react-doctor -a claude-code. The skill lands in ~/.claude/skills/react-doctor/SKILL.md.
What does react-doctor do?
It scans a React codebase against 47+ rules and returns a 0-100 score with diagnostics by file and line. The rules cover security, performance, correctness and architecture.
Which rules does react-doctor check?
They include secrets in the client bundle, eval(), derived state in useEffect, components inside components, array index as key, barrel imports, full lodash and moment.js, and missing auth in server actions.
Similar skills
Everything for Frontend and UI →react-doctor by other authors comes first.
