review-remix-v2

Remix v2 コードレビュー

引数

• --parallel：エージェントがサブエージェントに対応している場合に、技術領域ごとに並行して実行するよう指示します（ステップ 5 を参照）。対応していない場合、レビューは同じ出力で順次実行されます。
• パス：対象ディレクトリ（デフォルト：現在の作業ディレクトリ）

ステップ 1：変更されたファイルを特定する

git diff --name-only $(git merge-base HEAD main)..HEAD | grep -E '\.(tsx?|jsx?|mjs|cjs|css)$|^(remix|vite)\.config\.'

何も返されない場合は、続行する前にユーザーに明示的なパス一覧を尋ねてください。

ステップ 2：Remix v2 と技術要素を検出する

# Detect Remix v2 in package.json (any official adapter)
grep -E '"@remix-run/(react|node|cloudflare|deno|serve)"' package.json | head -3

# Confirm app router layout
ls app/routes/ 2>/dev/null | head -5

# meta exports (route metadata)
grep -rE 'export const meta|export function meta|export let meta' app/ --include="*.tsx" --include="*.ts" -l | head -3

# Sessions / cookies / auth
grep -rE 'createCookieSessionStorage|getSession\(|commitSession\(|destroySession\(' app/ --include="*.ts" --include="*.tsx" -l | head -3

# Form primitives (forms-review)
grep -rE 'useFetcher\(|<Form|useSubmit\(|useNavigation\(' app/ --include="*.tsx" -l | head -3

# Form anti-patterns: native form / manual fetch (forms-review trigger even without Remix imports)
grep -rE '(^|[^.])<form |fetch\(' app/ --include="*.tsx" -l | head -3

# Error boundaries
grep -rE 'export function ErrorBoundary|export const ErrorBoundary|useRouteError|isRouteErrorResponse' app/ --include="*.tsx" -l | head -3

# Headers / streaming / server-only modules
grep -rE 'export const headers|export function headers|defer\(' app/ --include="*.tsx" --include="*.ts" -l | head -3
find app -type f \( -name '*.server.ts' -o -name '*.server.tsx' -o -name '*.client.ts' -o -name '*.client.tsx' \) | head -5

# Prefetch hygiene (perf-ssr-review)
grep -rE 'prefetch=|<PrefetchPageLinks' app/ --include="*.tsx" -l | head -3

# Loaders / actions (data flow)
grep -rE 'export (async )?function (loader|action)|export const (loader|action)' app/ --include="*.tsx" --include="*.ts" -l | head -3

package.json の確認で何も返されない場合は、処理を停止し、このスキルは Remix v2 プロジェクトを対象としていることをユーザーに伝えてください。

ステップ 3：検証プロトコルを読み込む

コードに関する実質的な判断を行う前に、review-verification-protocol スキルを読み込んでください。これはプラグイン間で共通の標準プロトコルです。フレームワーク固有のコピーで代用しないでください。

ステップ 5 に進む前の条件： スキルが読み込まれている（またはチェックリストがコンテキスト内で開かれている）こと。条件が満たされるまでは、重要度を分類したり、指摘事項を書いたりしないでください。

ステップ 4：スキルを読み込む

該当する領域をレビューする前に、以下の各スキルを読み（SKILL.md を開き）、指針をコンテキストに取り込んでください。

必ず読み込む（重要な Remix v2 アプリでは、6 つすべての領域が対象になります）：

• remix-v2-routing-review
• remix-v2-data-flow-review
• remix-v2-forms-review
• remix-v2-error-boundaries-review
• remix-v2-perf-ssr-review
• remix-v2-meta-sessions-review

検出テレメトリー（各領域のレビューで実際に見つかる内容を記録します。読み込みの条件ではありません。6 つのスキルはすべて常に読み込みますが、最終レポートのカバレッジ欄に一致／不一致を記録します）：

条件	スキル
app/routes/ が存在する	remix-v2-routing-review
loader / action エクスポートが見つかる	remix-v2-data-flow-review
<Form>、useFetcher、useSubmit、useNavigation、ネイティブの <form、または手動の fetch( が見つかる	remix-v2-forms-review
ErrorBoundary / useRouteError が見つかる	remix-v2-error-boundaries-review
headers エクスポート、defer(、.server.ts / .client.ts ファイル、または prefetch= / <PrefetchPageLinks が見つかる	remix-v2-perf-ssr-review
meta エクスポート、またはセッション／Cookie ヘルパーが見つかる	remix-v2-meta-sessions-review

検出項目の行で一致が見つからない場合は、そのことをレポートのカバレッジ欄に明記してください。スキルは引き続き読み込みますが、レビュー担当者はその領域にレビュー対象がなかったことを記録してください。

ステップ 5：レビューする

エージェントがサブエージェントに対応している場合（かつ --parallel が指定されているか、並行実行が適切な場合）は、領域ごとにサブエージェントを 1 つ割り当てて並行実行します。それ以外の場合は、同じ領域を単一のコンテキストで順次実行します。どちらの方法でも、出力は同一になります。

並行実行の場合：

1. すべての領域を事前に検出する
2. 領域ごとにサブエージェントを 1 つ割り当て、それぞれが対応するスキルを読み込み、その領域のみをレビューする
3. すべてのサブエージェントからの応答を待つ
4. 指摘事項を統合し、単一の出力にまとめる

順次実行の場合：

1. 該当するスキルを読み込む
2. まずルーティングとネストされたルート構造をレビューする
3. loader/action のデータフローをレビューする
4. フォームとプログレッシブエンハンスメントをレビューする
5. エラーバウンダリーをレビューする
6. meta、セッション、headers/SSR をレビューする
7. 指摘事項を統合する

ステップ 6：指摘事項を検証する

問題を報告する前に：

1. 実際のコードを（差分のコンテキストだけでなく）読み直す
2. 「未使用」と主張する場合は、ルートファイルの規約も含め、すべての参照を検索したか確認する
3. 「不足」と主張する場合は、親ルート、root.tsx、またはフレームワークのデフォルト動作を確認したか確かめる
4. 構文上の問題の場合は、Remix v1 や React Router v7 ではなく、Remix v2 のドキュメントで確認したか確かめる
5. 実際の問題ではなく、スタイル上の好みにすぎない指摘は削除する

Critical/Major に引き上げる前の条件： その項目について、(2)～(4) が具体的な根拠で裏付けられていること。具体的な根拠とは、FILE:LINE の形式で開いたファイル、参照先の grep 出力、または引用した親ルート／フレームワークのコードを指します。差分のコンテキストだけでは不十分です。

ステップ 7：レビューの収束

• 1 回のパスで完了： ルーティング、データフロー、フォーム、エラー、SSR／パフォーマンス、メタデータ／セッション、型、セキュリティに関するすべての問題を、1 回のパスで報告してください。提出前に、推奨する修正によって新たな指摘が生じないか確認してください。生じる場合は、それらも今回含めてください。
• スコープ： 差分内のコードと、直接関連する既存コードのみをレビューしてください。テストカバレッジの不足は Minor の指摘 1 件とし、実装方法は指定しないでください。新しい依存関係は追加しないでください。
• 修正の複雑さ： 既存コードの修正には、実際の重大度を適用してください。新規コード（新しいモジュール、依存関係、テストスイート、抽出した抽象化）を求める指摘は、ブロッキングではなく Informational としてください。
• 再レビュー： 以前の修正のみを検証してください。新たな問題の発見や、未修正の Minor／Nice-to-Have 項目の再指摘は行わないでください。

出力形式

## Review Summary
[1-2 sentence overview]

## Issues

### Critical (Blocking)
1. [FILE:LINE] ISSUE_TITLE
   - Issue / Why / Fix

### Major (Should Fix)
2. [FILE:LINE] ISSUE_TITLE
   - Issue / Why / Fix

### Minor (Nice to Have)
N. [FILE:LINE] ISSUE_TITLE
   - Issue / Why / Fix

### Informational (For Awareness)
N. [FILE:LINE] SUGGESTION_TITLE
   - Suggestion / Rationale

## Good Patterns
- [FILE:LINE] Pattern description (preserve this)

## Verdict
Ready: Yes | No | With fixes 1-N (Critical/Major only; Minor items are acceptable)
Rationale: [1-2 sentences]

修正後の検証

修正を適用した後、次を実行してください。

npm run lint
npm run typecheck
npm run test

承認する前に、すべてのチェックに合格する必要があります。

ゲート

順番に進めてください。条件を言い換えるだけで 合格条件 を満たしたことにしないでください。

1. スコープを記録済み — 合格条件： ステップ 1 のコマンド出力（または明示的な代替パス一覧）があり、対象範囲が示されています。
2. プロトコルと常時適用スキルを読み込み済み — 合格条件： 最初の重大度判断を行う前に、review-verification-protocol と 6 つすべての remix-v2-*-review スキルを読み込んでいます。
3. 条件付きスキルを監査済み — 合格条件： ステップ 2 の各検出項目について、一致を確認したか、コマンドで結果が返されなかったことを記録しています。
4. Critical／Major の根拠 — 合格条件： それぞれの指摘で、ツリー内に存在し、かつその指摘の種類に関するステップ 6 の合格ルールを満たす FILE:LINE を示しています。
5. 出力を 1 つにまとめる — 合格条件： Issues セクションの番号が連続しており、成果物がステップ 7 の 1 回のパスで完了するという要件を満たしています。

ルール

• レビューの前にスキルを読み込んでください。レビュー後ではありません。
• すべての指摘に、FILE:LINE と明確な Issue／Why／Fix を付け、連番を振ってください。
• これは Remix v2 です。React Router v7、Remix v1、Next.js の慣例（"use client"、サーバーコンポーネント）を適用しないでください。
• 修正後は「修正後の検証」ブロックを実行してください。Verdict では Minor と Informational の項目は無視します。