mcpField
R
review-react-best-practices

review-react-best-practices

github.com/heyvhuang開発33853 回インストール30 週間前に更新
リポジトリ

review-react-best-practices について

React と Next.js の開発、リファクタリング、コードレビュー向けのパフォーマンス審査スキルです。検索可能なタグ付きルール集を使い、リクエストのウォーターフォールやバンドルサイズから描画まで優先度順に確認します。

主な機能

  1. 01重要度順に並んだ審査ルール
  2. 02ウォーターフォールとバンドルサイズの確認
  3. 03サーバーパターンとシリアライズの確認
  4. 04再レンダーと描画の確認
  5. 05キーワードやタグでルールを検索

活用シーン

  1. 01React コンポーネントの性能レビュー
  2. 02Next.js のデータ取得と RSC 境界の確認
  3. 03バンドル増加やコールドスタートの調査
  4. 04UI のぎこちなさや不要な再レンダーの評価

インストール

コマンドをコピーしてターミナルで実行します。

$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/*：ファイルごとに1つのルール（タグ付けや並べ替えができ、簡単に拡張できます）

適用する場面

次の場合に使用します。

  • React コンポーネントの構築やリファクタリング
  • Next.js（App Router）での RSC 境界、Server Actions、データ取得に関する作業
  • パフォーマンス低下を招く変更の PR レビュー
  • バンドルサイズの増加、HMR の遅延、コールドスタートの問題
  • UI のカクつき、不要な再レンダリング、ハイドレーションの問題

レビュー方法（優先順位付き）

  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 フロントマターには 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 対応