mcpField
R
review-react-best-practices

review-react-best-practices

github.com/heyvhuang开发33853 次安装30 周前更新
代码仓库

关于 review-react-best-practices

面向 React 与 Next.js 开发和代码审查的性能审查技能，适用于组件重构、PR 检查及页面变慢等情况。它通过可搜索、带标签的规则库，按影响优先级组织审查建议。

主要功能

  1. 01按严重程度排列审查规则
  2. 02覆盖瀑布请求与包体积
  3. 03检查服务端模式和序列化
  4. 04检查重渲染与渲染问题
  5. 05通过关键词或标签查找规则

适用场景

  1. 01审查 React 组件性能
  2. 02检查 Next.js 数据获取与 RSC 边界
  3. 03定位包体积增加或冷启动问题
  4. 04评估 UI 卡顿与不必要的重渲染

安装

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

$npx skills add https://github.com/heyvhuang/ship-faster --skill review-react-best-practices

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/rules/
_sections.md
_template.md
advanced-event-handler-refs.md
async-api-routes-no-waterfall.md
async-defer-await.md
async-parallel-promises.md
async-promise-all.md
async-suspense-streaming.md
bundle-avoid-barrel-imports.md
bundle-defer-third-party.md
bundle-dynamic-imports.md
bundle-preload-intent.md
client-dedupe-event-listeners.md
client-dedupe-fetching.md
js-batch-dom-css.md
js-use-set-map-lookups.md
rendering-conditional-render.md
rendering-content-visibility.md
rendering-hoist-static-jsx.md
rerender-extract-memoized.md
rerender-lazy-state-init.md
rerender-narrow-deps.md
server-cache-cross-request.md
server-minimize-serialization.md
server-react-cache-dedupe.md

详细介绍

React 最佳实践审查（性能优先）

使用此技能，将“React 感觉很慢 / Next.js 页面很臃肿 / 请求太多”转化为可重复、按优先级排序的审查。

此技能有意采用规则库的形式构建：

  • SKILL.md：如何审查 + 如何搜索规则
  • references/rules/*：每个文件一条规则（便于添加标签、排序和迭代）

何时使用

适用于：

  • 构建或重构 React 组件
  • 在 Next.js（App Router）中处理 RSC 边界、Server Actions、数据获取
  • 审查 PR 中的性能回退
  • 包体积增大 / HMR 缓慢 / 冷启动问题
  • UI 卡顿 / 不必要的重新渲染 / hydration 问题

审查方法（按优先级排序）

  1. 先审查 CRITICAL 规则（瀑布请求 + 包体积）。
  2. 然后审查 HIGH（服务端模式 + 序列化）。
  3. 接着审查 MEDIUM（重新渲染 + 渲染）。
  4. 最后审查 LOW-MEDIUM 微优化（JS 热路径）。

章节顺序见：references/rules/_sections.md

如何高效使用规则

按关键字搜索
rg -n "waterfall|Promise\\.all|defer await" references/rules
rg -n "barrel|optimizePackageImports|dynamic" references/rules
rg -n "cache\\(|React\\.cache|serialization|RSC" references/rules
rg -n "memo\\(|useMemo|useCallback|dependencies" references/rules
按标签搜索

每条规则的 YAML frontmatter 中都有 tags:。

rg -n "tags:.*bundle" references/rules
rg -n "tags:.*rerender" references/rules

输出格式（推荐）

审查代码时，输出：

  1. 摘要（1 段）
  2. 关键修复（必须修复，收益最大）
  3. 高影响项（应该修复）
  4. 中 / 低优先级项（可选优化）

对每个问题，请包含：

  • 规则名称（以及 references/rules/ 下的文件）
  • 位置（path:line）
  • 影响原因（延迟 / 包体积 / CPU / UX）
  • 最小修复方向（优先采用小幅改动）

如果在 Ship Faster 运行目录中执行，请将报告保存到：

  • run_dir/evidence/react-best-practices-review.md

规则库

规则位于：

评论

支持 Markdown