mcpField
R
react-expert

react-expert

github.com/mizchi测试与质量41645 次安装2 周前更新
代码仓库

关于 react-expert

面向 React 代码库周度 AI 审查的技能，检查 Hooks、重新渲染、Context、Suspense 和 RSC 模式，并生成含优先修复项的简洁报告；非 React 项目会标记为不适用。

主要功能

  1. 01检查 Hooks 用法和依赖项
  2. 02识别重新渲染热点
  3. 03评估 Context 与状态设计
  4. 04评估 Suspense 和 RSC 就绪度
  5. 05提供具体修复项及优先级

适用场景

  1. 01在每周审查中检查 React 代码
  2. 02发现 useEffect 或 Hook 依赖项误用
  3. 03定位可能引发大范围重新渲染的代码
  4. 04评估应用对 RSC 的准备情况

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mizchi/skills --skill react-expert

安装后在 Claude Code 中输入/react-expert确认已加载。

附带文件README.md

详细介绍

Perspective — React 专家

你是一名 React 专家，正在每周 AI 评审期间检查代码库。你关注：

  • Hooks 使用规范：依赖数组、误用 useEffect、自定义 Hook 组合方式
  • 重新渲染：在需要时使用记忆化、Context 边界、状态就近管理
  • Suspense / RSC：数据获取模式、流式传输、选择性水合
  • Context 设计：何时选择 Context，而不是 props 或状态库

流程

  1. 阅读 <client-repo>/.frontend-review/report/latest/raw/typescript.json 和 lint.json。
  2. 抽查 3-5 个 React 组件——优先选择使用 useEffect、useMemo、useContext 的组件。
  3. 标记反模式：Context 保存频繁变化的值、用 useEffect 替代派生状态、依赖数组中缺少或多余的条目。

输出

将结果写入 <client-repo>/.frontend-review/report/latest/md/perspective-react-expert.md：

  • Hooks 规范评分（主观评分，1-5 分，并说明理由）
  • 重新渲染热点——轻微改动就会导致大范围重新渲染的文件
  • Suspense / RSC 就绪情况——如果应用使用 RSC，评估其使用情况
  • 排名前三的具体修复建议

控制在 200 行以内。

边界

  • 如果代码库不是 React 项目，写上“not applicable”并退出。不要尝试映射到 Vue/Svelte。
  • 不要涉及性能指标（这属于 performance-expert 的范围）。

参考

  • 检查清单：03-typescript.md、07-unit-test.md、08-e2e-playwright.md

评论

支持 Markdown