React Doctor Skill：专抓 AI 烂 React 代码的诊断神器

Skill超级捕获手 技术创作者 2026-08-29 10 阅读

React Doctor 是由 GitHub 用户 millionco 开发的 React 代码质量诊断 Skill，核心价值在于一句话：专门捕捉 AI 写的烂 React 代码。它通过静态扫描 + Chrome DevTools 性能追踪，量化评估代码的安全漏洞、性能瓶颈、正确性错误和架构问题，输出 0-100 的健康分，帮助开发者在 AI 辅助编程的工作流中守住代码质量底线。

功能与原则

React Doctor 的设计原则非常明确——AI 写的 React 代码有规律性缺陷，与其让这些问题流入生产环境再修，不如在编写阶段就拦住。

核心能力覆盖六大维度：

  • 安全漏洞：识别 XSS、暴露敏感状态、不安全的 React 模式
  • 性能瓶颈：检测不必要的重渲染、未优化的 useEffect、缺失的 memoization
  • 正确性错误：state/effect 逻辑错误、错误的条件渲染、边界情况遗漏
  • 架构问题：过度复杂的组件、重复 JSX 树、适合提取 composition 的函数
  • 可访问性：ARIA 标签缺失、键盘导航问题、对比度不足
  • 可维护性：死代码、未使用的导出、过长的函数体

所有扫描都是确定性的，不依赖 LLM 判断，每次运行结果一致。

认可度

  • GitHub Stars：约 14K（截至 2026-08-24，git-stars.org 数据）
  • 周安装量：约 6.4K（orangebot.ai 数据）
  • 总安装量：6.2K–8.8K（跨 Smithery / Claude Marketplaces / Claude Bazaar 等平台）
  • Trending 经历：2026 年 8 月第 3 周 GitHub Trending 上榜，出现在多篇「Best Claude Skills」盘点文中
  • 增长驱动：随着 Claude Code / Cursor 等 AI 编程工具在 React 开发者中普及，react-doctor 的需求同步增长

链接

GitHub：https://github.com/millionco/react-doctor

原作者

millionco（GitHub username），目前可见信息有限，但从仓库的维护质量（MIT License、频繁更新、多平台分发）判断是有工程积累的独立开发者，在 Claude Skills 生态中有一定存在感。

介绍

React Doctor 的核心功能是一个诊断型 CLI 工具，同时也是一个可安装到 AI 编程 Agent 的 Skill。

作为 CLI：在项目根目录运行 px react-doctor@latest，即可对整个代码库进行全面审计，返回每个问题的位置、类型、严重程度，以及一个综合健康分。无需配置，零门槛启动。

作为 Skill：运行 px react-doctor@latest install 可以将规则库安装到 Claude Code / Cursor / Codex / OpenCode 等 Agent 的上下文中，让 AI 在编写代码时主动规避已知的烂 React 模式。这是它的差异化价值——大多数 lint 工具只能报错，而 react-doctor 能教会 AI 下次不犯同样的错。

PR 审查模式：px react-doctor@latest ci install 一键集成 GitHub Actions，扫描每个 PR 并只报告本次变更引入的新问题，而不是历史积累的技术债务。这解决了 code review 中最实际的痛点——拉平整个代码库的标准不现实，但确保新代码不劣化是可行的。

运行时性能追踪：Chrome DevTools 集成可以在真实浏览器中录制用户交互的性能 trace，识别运行时才暴露的渲染问题，对静态扫描是强力补充。

特点

  • 零配置启动：不写 doctor.config.ts 也能跑， sensible defaults 开箱即用
  • 框架全覆盖：Next.js / Vite / Astro / TanStack / React Native / Expo 全部支持，不绑定任何特定框架
  • PR 增量扫描：CI 模式只报告新引入的问题，不被历史债务淹没
  • Chrome DevTools 性能分析：基于真实渲染轨迹做诊断，发现静态分析抓不到的运行时瓶颈
  • AI 可学习：Skill 模式让编码 Agent 从每次诊断中学习，避免重复犯错
  • 输出格式灵活：支持人类可读的摘要、JSON、JSONL，便于接入各类自动化流程
  • MIT License：完全开源，可商用

使用方法

安装（CLI）：

npx react-doctor@latest

安装 Skill 到 Claude Code：

npx react-doctor@latest install

集成 GitHub Actions（PR 审查）：

npx react-doctor@latest ci install

Chrome DevTools 性能追踪：

npx react-doctor@latest scan http://localhost:3000

Claude Code 中激活 Skill：

/skill react-doctor

之后在完成功能、修复 bug、提交代码前让 Agent 调用 Skill 进行诊断。

使用场景与人群

适用场景：
– AI 辅助编程团队，使用 Claude Code / Cursor 等 Agent 编写 React 代码的质量守门
– React 项目技术债务管理，分阶段清理历史遗留问题
– Code Review 自动化，PR 级别的问题发现与跟踪
– 前端团队建立统一的 React 代码规范基线

目标用户：
– 使用 React 的全栈开发者，尤其是 AI 编程工具重度用户
– 前端团队 tech lead，需要为 AI 生成代码设置质量门槛
– 需要在 CI 中自动化执行 React 代码质量检查的工程团队

输入与输出案例

案例 1：CLI 审计

输入（运行命令）：

cd my-react-project && npx react-doctor@latest

输出（示例摘要）：

✅ React Doctor Report
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Health Score: 67/100
Issues Found: 23

[Critical] 2 security vulnerabilities
  - use of dangerouslySetInnerHTML without sanitization
  - exposed API key in component state

[Performance] 5 bottlenecks
  - Missing useMemo on expensive computation
  - Unnecessary re-render in <UserList />

[Architecture] 8 issues
  - Complex component: Dashboard (estimated 200+ lines)
  - Repeated JSX pattern in table cells

View full report: react-doctor report.html

案例 2：Skill 模式（Claude Code 中）

输入（用户或 Agent 触发）：

After implementing the user profile feature, run react-doctor to check for issues

输出：

React Doctor Results:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
New issues in this change: 3

1. [Correctness] useEffect missing dependency array
   File: src/features/profile/useProfile.ts:24
   Impact: stale closure may read outdated state

2. [Performance] <Avatar /> re-renders on every parent update
   File: src/features/profile/Avatar.tsx:8
   Fix: wrap with React.memo()

3. [Security] userId exposed in component state
   File: src/features/profile/ProfileCard.tsx:15
   Fix: move to server-side session

GitHub: https://github.com/millionco/react-doctor

评论区

0 条评论

登录后可评论。

Skill超级捕获手 10 阅读