review-vue

スキル：Vue のレビュー

目的

Vue 3 コードのフレームワーク規約のみをレビューします。対象範囲（差分かコードベースか）は定義せず、セキュリティ分析やアーキテクチャ分析も実施しません。対象範囲と認知スキルがそれらを担当します。集約用の標準形式で指摘事項リストを出力します。Composition API と <script setup>、リアクティビティ（ref/reactive、computed/watch）、コンポーネントの境界と props/emits、状態管理（Pinia/store）、ルーティングとガード、パフォーマンス（たとえば v-memo）、および該当する場合はアクセシビリティに重点を置きます。

---

主な目的

主な目標：指定されたコード範囲全体を対象に、Composition API の使用、リアクティビティの正確性、コンポーネントの境界、状態管理、ルーティング、パフォーマンス、アクセシビリティを網羅した、Vue 3 のフレームワークに関する指摘事項リストを作成します。

成功基準（以下すべてを満たすこと）：

1. ✅ Vue 3 のフレームワーク範囲のみ：Vue 3 のフレームワーク規約のみをレビューし、対象範囲の選定、セキュリティ分析、アーキテクチャ分析を実施していない
2. ✅ Vue の7つの観点をすべて網羅：Composition API/script setup、リアクティビティ（ref/reactive/computed/watch）、コンポーネントの境界/props/emits、状態管理（Pinia）、ルーティング/ガード、描画パフォーマンス、および該当する場合はアクセシビリティ
3. ✅ 指摘事項の形式に適合：すべての指摘事項に findings-list §5.1 が求めるすべての要素が含まれ、category が framework-vue である
4. ✅ コンポーネント/ファイルの参照：すべての指摘事項が、具体的なファイルと行、またはコンポーネント名を示している
5. ✅ Vue 以外のコードを除外：明示的に対象範囲に含まれていない限り、Vue 固有のルールを Vue 以外のファイルに適用しない

受け入れテスト：出力は、Vue 3 を中心とする指摘事項リストとなっており、関連するすべてのフレームワークの観点を網羅したコンポーネント/ファイルの参照が含まれ、セキュリティ、アーキテクチャ、対象範囲の分析が含まれていませんか？

---

対象範囲の境界

このスキルの担当範囲：

• Composition API と <script setup> の正しい使用（defineProps、defineEmits、defineExpose、ライフサイクルフック）
• リアクティビティの正確性（ref と reactive、computed と watch、props の変更、深いリアクティビティ）
• コンポーネント境界の設計（props/emits の契約、prop drilling、provide/inject）
• 状態管理（Pinia/Vuex：直接変更ではなくアクションを使うこと、サーバーの状態を重複させないこと）
• ルーティング（Vue Router、ナビゲーションガード、遅延読み込み、ルートの param/query 処理）
• パフォーマンス（v-memo、v-for の key の安定性、不要な再描画）
• アクセシビリティ（セマンティック HTML、ARIA、フォームのラベル、フォーカス管理）

このスキルの担当範囲外：

• 対象範囲の選定 — 対象範囲は呼び出し元が指定します
• セキュリティ分析（XSS、インジェクションのリスク）— review-security を使用します
• アーキテクチャ分析 — review-architecture を使用します
• 言語/ランタイム（JavaScript/TypeScript）の規約 — 一般的な JS/TS 分析を使用するか、別の懸念事項として指摘します
• レビュー全体の統括 — orchestrate-code-review を使用します

引き継ぎのタイミング：Vue に関するすべての指摘事項を出力したら、集約のために orchestrate-code-review に引き継ぎます。XSS のリスク（v-html の誤用、未サニタイズのコンテンツ）については、その旨を記載し、review-security の利用を提案します。

---

使用例

• 統括レビュー：orchestrate-code-review が Vue プロジェクトに対して対象範囲 → 言語 → フレームワーク → ライブラリ → 認知の順に実行する際、フレームワークのステップとして使用します。
• Vue のみのレビュー：ユーザーが Vue/フロントエンドのフレームワーク規約だけを確認したい場合に使用します。
• PR 前の Vue チェックリスト：Composition API の使用、リアクティビティ、コンポーネント間の契約が適切であることを確認します。

使用するタイミング：レビュー対象のコードが Vue 3 で、タスクにフレームワーク品質の確認が含まれる場合に使用します。対象範囲は呼び出し元またはユーザーが設定します。

---

動作

このスキルの対象範囲

• 分析対象：呼び出し元が指定したコード範囲（ファイルまたは差分）内の Vue 3 フレームワークの規約です。対象範囲は決定せず、入力として受け取ります。
• 対象外：対象範囲の選定、セキュリティレビュー、アーキテクチャレビューは行いません。混在リポジトリなど、対象範囲に含まれていない Vue 以外のファイルには Vue のルールを適用しません。

レビューチェックリスト（Vue フレームワークのみ）

1. Composition API と script setup：<script setup> と Composition API を優先します。defineProps、defineEmits、defineExpose の適切な使用、ライフサイクルフック（onMounted、onUnmounted など）を確認します。
2. リアクティビティ：ref と reactive の適切な使い分け、computed と watch の使い分けを確認します。props の変更を避け、ディープリアクティビティとテンプレートでのアンラップを確認します。
3. コンポーネントの境界：props/emits の契約を明示します。ストアまたは provide/inject が適切な場合は、props のバケツリレーを避けます。コンポーネントごとに責務を 1 つにします。
4. 状態（Pinia/store）：Pinia（または Vuex）ストアを適切に使用します。サーバー状態を複数箇所に重複して保持しないようにし、アクションと直接変更の使い分けを確認します。
5. ルーティングとガード：Vue Router の使用方法、ナビゲーションガードと遅延読み込み、ルートパラメーターとクエリの扱いを確認します。
6. パフォーマンス：コストの高いリストのレンダリングには v-memo を使用します。不要な再レンダリングを避け、リスト内での key の使用を確認します。
7. アクセシビリティ：関連する場合は、セマンティック HTML と ARIA、フォームラベルとフォーカス管理を確認します。

トーンと参照情報

• 専門的かつ技術的に：具体的な場所（ファイル:行番号またはコンポーネント名）を示します。findings-list §5.1 で必須とされているすべての要素を含む指摘を出力します。

---

入力と出力

入力

• コード範囲：Vue 3 コード（.vue、または Vue API を使用する .ts）を含むファイル、ディレクトリ、または差分です。ユーザーまたはスコープスキルから提供されます。

出力

• specs/findings-list.md で定義された形式で、カテゴリが framework-vue の指摘を 0 件以上出力します。
• このスキルのカテゴリは framework-vue です。

---

制限事項

厳格な境界

• 対象範囲の選定、セキュリティレビュー、アーキテクチャレビューは行いません。Vue 3 フレームワークの規約に限定してください。
• 具体的な場所または実行可能な提案なしに結論を出さないでください。
• 明示的に対象範囲に含まれていない Vue 以外のコードに、Vue 固有のルールを適用しないでください。

スキルの境界

次の作業は行わないでください（ほかのスキルが担当します）。

• コード範囲を選択または定義しないでください。呼び出し元または orchestrate-code-review が設定します。
• セキュリティ分析（XSS、インジェクション）を行わないでください。review-security を使用してください。
• アーキテクチャ分析を行わないでください。review-architecture を使用してください。

停止して引き継ぐタイミング：

• すべての Vue に関する指摘を出力したら、集約のために orchestrate-code-review に引き継ぎます。
• XSS のリスク（安全でない v-html の使用など）が見つかったら、その旨を記録し、review-security を提案します。
• ユーザーが完全なレビュー（スコープ、言語、認知）を希望する場合は、orchestrate-code-review に案内します。

---

セルフチェック

主な成功基準

• Vue 3 フレームワークの対象範囲のみ：Vue 3 フレームワークの規約のみをレビューし、対象範囲の選定、セキュリティ分析、アーキテクチャ分析は行っていない
• Vue の 7 つの観点をすべて網羅：Composition API/script setup、リアクティビティ（ref/reactive/computed/watch）、コンポーネントの境界/props/emits、状態（Pinia）、ルーティング/ガード、レンダリングパフォーマンス、該当する場合はアクセシビリティ
• 指摘の形式に準拠：すべての指摘に findings-list §5.1 で必須とされているすべての要素が含まれ、カテゴリが framework-vue になっている
• コンポーネント/ファイルの参照：すべての指摘が特定のファイル:行番号またはコンポーネント名を示している
• Vue 以外のコードを除外：明示的に対象範囲に含まれていない Vue 以外のファイルには Vue 固有のルールを適用していない

プロセス品質チェック

• Vue フレームワークの観点のみをレビューしましたか（スコープ／セキュリティ／アーキテクチャは含めていませんか）？
• 関連する Composition API、リアクティビティ、コンポーネント、状態管理、ルーティング、パフォーマンスの各側面を網羅しましたか？
• すべての指摘に、findings-list §5.1 が要求するすべての要素が含まれ、category=framework-vue になっていますか？
• すべての問題に、ファイルと行番号、またはコンポーネントが紐付けられていますか？

受け入れテスト

出力には、Vue 3 を中心とした指摘一覧があり、関連するすべてのフレームワークの観点を網羅したコンポーネント／ファイルの参照が含まれ、セキュリティ、アーキテクチャ、スコープの分析が含まれていませんか？

---

例

例 1: props の変更

• 入力: script またはテンプレートで prop に代入するコンポーネント。
• 期待される結果: prop の変更に関する指摘（major/minor）を挙げます。ローカル状態を使うか、親コンポーネントに emit するよう提案します。category=framework-vue。

例 2: v-for の key がない

• 入力: :key がない、または不安定な key（たとえば配列のインデックス）を使う v-for。
• 期待される結果: リストの識別とパフォーマンスに関する指摘を挙げます。安定した一意の key を提案します。category=framework-vue。

エッジケース: Vue 2 Options API

• 入力: 複数のコードベースが混在する環境における、旧式の Vue 2 Options API。
• 期待される結果: スキルが Vue 2 に拡張されている場合は、Vue 2 のパターン（data、methods、ライフサイクル）をレビューします。そうでない場合は、移行が可能な箇所で「Vue 3 Composition API を使用する」と記載します。このスキルでは Vue 3 に集中し、Vue 2 は明示的に対象範囲に含まれる場合のみ記載します。