Stats
Actions
Tags
From frontend-skills
Sets up react-doctor to score React codebases (0-100) and configures a Stop hook that fails on score regression. Use when initializing react-doctor or preventing UI quality regressions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:setup-react-doctorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- **react-doctor** codebase health score (0-100)
bun add -D react-doctor --yarn
{ "scripts": { "doctor": "react-doctor ." } }
react-doctor.config.json){ "ignore": { "rules": ["react-hooks/exhaustive-deps", "react/no-nested-component"] } }
Copy scripts/react-doctor-stop.sh -> .claude/hooks/. chmod +x. Add to Stop.
bun run doctor worknpx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsGenerates health scores for JS/TS projects assessing architecture conformance, test coverage, security risks, performance metrics, and maintainability. Use for onboarding, quality checks, or refactoring baselines.
Audits React codebases for anti-patterns including useEffect misuse, stale closures, derived state in effects, and memory leaks. Produces scored gap analysis table with severity ratings and applies prioritized fixes on request.
Reviews React components for architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility, and TypeScript. Use before merging PRs, after new features, or for validation.