aibot88 Vue 3 コンポーネントレビュースキル
このスキルは Vue 3 SFC（Single File Component）を以下の観点から一括レビューする：
- Vue 3 / Composition API のベストプラクティス
- TypeScript の型安全性
- Tailwind CSS の使用パターン
- Biome のlinting・formatting ルール
- アクセシビリティ
動作方法
$ARGUMENTSで指定されたファイルまたはパターンを読み込む- ファイルが未指定の場合はどのファイルをレビューするかユーザーに確認する
- 以下の全チェック項目に照らして確認する
- 問題は後述の出力例と同じ形式で一括出力する
チェック項目
Vue 3 / Composition API
必須パターン
<script setup lang="ts">を使用しているか（Options API は使用しない）defineProps<T>()で Props を型付けしているか（withDefaultsを必要に応じて使用）defineEmits<T>()で Emits を型付けしているかref/reactive/computedを適切に使い分けているかwatchEffectよりwatchを優先し、依存を明示しているかonMountedなどのライフサイクルフックは<script setup>内に記述されているか
アンチパターン（警告）
any型の使用reactive()でプリミティブをラップしている- テンプレート内の inline arrow function（パフォーマンス劣化）
v-forにkeyが未設定、または index を key に使用v-ifとv-forを同一要素に併用
TypeScript 型安全性
必須
- Props は
interfaceまたはtypeで明示的に型定義されているか ref<T>()のジェネリクスを省略していないか（推論できない場合）- API レスポンスの型は
shared/apiの OpenAPI 定義から引用しているか null/undefinedの可能性がある値を non-null assertion（!）で握り潰していないか
推奨
readonlyで変更不要な Props を保護しているかas constを enum 代替として使用しているか
Tailwind CSS
必須
- インラインスタイル（
style=""）ではなく Tailwind クラスを使用しているか - 独自の CSS は
<style>ブロックに閉じ込め、グローバルスタイルを汚染していないか - レスポンシブ対応が必要な箇所に breakpoint prefix（
sm:md:lg:）を使用しているか
推奨
- 繰り返し使う長いクラス列は
@applyや子コンポーネントへの切り出しを検討しているか text-/bg-などはプロジェクトの色パレット変数（tailwind.config準拠）を使用しているか- ダークモード対応が必要な箇所に
dark:prefix を使用しているか
Biome（Linting / Formatting）
Linting チェック
- 未使用の import がないか（
noUnusedImports） - 未使用の変数がないか（
noUnusedVariables） console.logが本番コードに残っていないか（noConsole）- 条件式に代入が含まれていないか（
noAssignInExpressions） ==ではなく===を使用しているか（noDoubleEquals）
Formatting チェック
- インデントは 2 スペース（tab は不使用）
- セミコロンの有無はプロジェクトの
biome.json設定に従う - import 文は自動整列されているか
アクセシビリティ
- インタラクティブ要素（
button,input等）にaria-labelまたは可視テキストがあるか - 画像に
alt属性が設定されているか - フォームの
<label>と<input>が関連付けられているか（for/id）
出力形式
## レビュー結果: <ファイルパス>
### 重大（修正必須）
- file:line: 説明
### 警告（修正推奨）
- file:line: 説明
### 情報（参考）
- file:line: 説明
### 合格
- チェック項目: OK
問題が 0 件の場合は「全チェック合格」と出力する。
詳細リファレンス
より詳細なルールは以下を参照する：
- references/vue3-patterns.md — Vue 3 Composition API パターン集
- references/typescript-patterns.md — TypeScript 型安全パターン
- references/biome-rules.md — Biome 設定と主要ルール