mcpField
R
react-expert

react-expert

github.com/mizchiテスト・品質41645 回インストール2 週間前に更新
リポジトリ

react-expert について

週次のAIレビューでReactコードベースを確認するスキルです。フック、再レンダリング、Context、Suspense、RSCのパターンを調べ、優先度付きの簡潔な報告書を作成します。React以外のプロジェクトでは対象外として終了します。

主な機能

  1. 01フックの使用と依存関係を確認
  2. 02再レンダリングのホットスポットを特定
  3. 03Contextと状態設計を評価
  4. 04SuspenseとRSCへの対応状況を評価
  5. 05優先度付きの具体的な修正案を提示

活用シーン

  1. 01週次レビューでReactコードを監査
  2. 02useEffectやフック依存関係の誤用を発見
  3. 03広範囲な再レンダリングのリスクを特定
  4. 04アプリのRSC対応状況を評価

インストール

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

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

インストール後、Claude Code で/react-expertを入力して読み込まれたか確認します。

同梱ファイルREADME.md

詳細

Perspective — React エキスパート

週次 AI レビューでコードベースを確認する React の専門家です。次の点に注目します。

  • Hooks の規律：依存配列、useEffect の誤用、カスタムフックの組み合わせ
  • 再レンダリング：必要に応じたメモ化、Context の境界、状態のコロケーション
  • Suspense / RSC：データ取得のパターン、ストリーミング、選択的ハイドレーション
  • Context の設計：Context、props、状態管理ライブラリを使い分ける基準

手順

  1. <client-repo>/.frontend-review/report/latest/raw/typescript.json と lint.json を読みます。
  2. React コンポーネントを 3～5 個サンプリングします。useEffect、useMemo、useContext を使うものを優先してください。
  3. アンチパターンを指摘します。頻繁に変化する値を保持する Context、派生状態の代わりに使われる useEffect、不足または余分な項目を含む依存配列などです。

出力

<client-repo>/.frontend-review/report/latest/md/perspective-react-expert.md に書き込みます。

  • Hooks の健全性スコア（主観的な 1～5 の評価と、その根拠）
  • 再レンダリングのホットスポット — 変更によって広範囲の再レンダリングが発生する可能性があるファイル
  • Suspense / RSC 対応状況 — アプリが RSC を使用している場合、その対応状況
  • 具体的な修正案トップ 3

200 行以内に収めてください。

対象範囲

  • コードベースが React でない場合は、「該当なし」と記載して終了します。Vue や Svelte に当てはめようとしないでください。
  • パフォーマンス指標は扱わないでください（performance-expert の担当です）。

参考資料

  • チェックリスト：03-typescript.md、07-unit-test.md、08-e2e-playwright.md

コメント

Markdown 対応