React Doctor Skill：专治 AI 写出烂 React 代码的自动审查工具

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

React Doctor Skill：一款专治 AI 写出烂 React 代码的自动审查工具

功能与原则

React Doctor 是一款面向 AI Coding 时代的 React 代码质量审查 Skill。它能deterministically（确定性）扫描代码库，自动发现 React 开发中常见的问题，涵盖状态管理（state & effects）、性能优化（performance）、代码架构（architecture）、安全（security）和无障碍访问（accessibility）五大维度。核心理念很简单：与其让有缺陷的 React 代码流进生产环境，不如在 AI 生成代码的那一刻就把它拦截下来。

认可度

  • GitHub Star：截至 2026-08-01 约 14.2k（社区认可度高）
  • Forks：454
  • 活跃度：最近一次 commit 为 2026-07-31（3 小时前），持续高频维护
  • Issues / PR：14 open issues、78 open pull requests，社区参与度高
  • npm 周下载量：万级规模（npmjs.com 显示稳定增长）
  • 已在 GitHub Trending 获得曝光，被收录于多个 AI Coding 相关资源列表

链接

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

原作者

  • 作者：millionco 组织，主导维护者 GitHub username 为 @aidenybai
  • 定位：专注 React 生态质量工具的开发团队，react-doctor 是其旗舰开源项目

介绍

React Doctor 的诞生背景很直接——当 Claude Code、Kiro、Cursor 等 AI Coding 工具开始批量生成 React 代码时，生成结果往往存在隐蔽的 bug、性能反模式或不安全的写法。React Doctor 充当一个自动化的代码守卫，在不依赖 LLM 判断的前提下，通过静态分析规则对 AI 生成的 React 代码进行”体检”。

它的工作范围极广：支持 Next.js、Vite、Astro、TanStack、React Native、Expo 等主流 React 框架，扫描 JavaScript、TypeScript 和 Astro 源文件，也支持 HTML 文件中 <script> 内联 JavaScript 的检测。规则库覆盖范围从 useEffect 依赖缺失、setState 副作用检测，到 accessibility 缺失标签、性能反模式（如不必要的重渲染）等。

项目采用 monorepo 架构（pnpm workspace），内置 CI 流水线（含 PR 引入问题基线检测），并提供与 Cursor 等 AI Coding 工具的插件集成（.cursor-plugin 目录）。

特点

  • 五大维度全覆盖：state & effects、performance、architecture、security、accessibility，一套规则走天下
  • 多框架兼容：Next.js、Vite、Astro、TanStack、React Native、Expo，开箱即用
  • 确定性扫描：不依赖 LLM 做判断，基于规则引擎，结果可复现、无幻觉
  • AI Coding 原生集成：提供 .cursor-plugin 等适配层，专门针对 AI 生成代码场景优化
  • 持续高频更新：monorepo 结构，CI 含 PR 问题基线检测，每次 commit 都有自动化验证

使用方法

安装（npx 一键运行）：

npx react-doctor@latest

在项目根目录运行，输出审计报告，列出所有发现的问题及其严重程度。

集成到项目（npm 安装）：

npm install react-doctor

提供 react-doctor.config.json 配置文件，可自定义扫描范围、规则开关、忽略路径等。JSON Schema 已发布，支持 IDE 自动补全。

GitHub Action 集成（CI 拦截）：

配合 action.yml，可将 React Doctor 扫描接入 GitHub Actions，在 PR 阶段自动拦截有问题的代码。

使用场景与人群

  • 适用场景：AI Coding 工作流（Claude Code / Cursor / Kiro 等生成 React 代码后）、CI/CD 质量门禁、React 项目代码审查
  • 目标用户：使用 AI 辅助编写 React 的开发者、React 团队技术负责人（想给 AI 生成代码加一道质量护栏）、前端质量工程师

输入与输出案例

输入示例：

用户在 Claude Code 中让 AI 生成一段 React 表单组件，AI 输出了这样的代码（故意有问题）：

function Form() {
  const [value, setValue] = useState('');
  useEffect(() => {
    setValue('default'); // 每次渲染都触发 setState，副作用写法不规范
  });
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

输出：

React Doctor 扫描后输出：

[effects] useEffect missing dependency: 'value'
[effects] setState inside render: side effect detected in useEffect
[accessibility] input element must have a associated label

三秒钟内列出三大类问题及具体位置，开发者可直接定位修复。

React Doctor 将静态分析与 AI Coding 工作流结合，是目前针对 AI 生成 React 代码质量把控最成熟的 Skill 之一。如果你或你的团队正在大量用 AI 写 React，值得把它加入开发流程。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 2597 阅读