code-review.prompt.md

by interlife

HTML

---
description: "コードレビュー自動化"
model: 任意のAIモデルを指定
agent: agent
---

## タスク
開いているファイル/変更されたファイルを分析し、コードレビューを実施してください

## 背景・文脈
コミット前の品質チェックとして、人間のレビュアーが見落としがちな問題を検出したい

## レビュー観点

### 1. HTML品質
- **セマンティック**: 適切なタグ使用（header, nav, main, article等）
- **属性の必須項目**: alt属性の漏れ、imgのwidth/height
- **不要な要素**: 空のdiv、意味のないwrapperの多重ネスト
- **閉じタグ**: 閉じ忘れ、不適切な入れ子
- **妥当性**: HTML仕様に準拠しているか

### 2. アクセシビリティ（a11y）
- **alt属性**: 画像の代替テキスト（装飾画像はalt=""）
- **aria属性**: aria-label, aria-hidden, role等の適切な使用
- **フォーカス**: キーボード操作可能か、tabindex の適切な使用
- **見出し階層**: h1→h2→h3の順序、h1の複数使用
- **コントラスト比**: テキストと背景色（リンクは除外）
- **リンクテキスト**: 「こちら」「詳しく見る」等の曖昧な文言

### 3. CSS/SCSS品質
- **命名規則**: プロジェクトの規則に準拠（BEM, FLOCSS等）
- **セレクタ詳細度**: !important の使用、IDセレクタの多用
- **ネスト深さ**: 4階層以上の深いネスト
- **重複スタイル**: 同じプロパティの繰り返し
- **未使用スタイル**: 使われていないクラス定義
- **単位の統一**: px/rem/emの使い分けが一貫しているか
- **マジックナンバー**: ハードコードされた数値（変数化推奨）
- **ベンダープレフィックス**: 不要なプレフィックス、漏れ

### 4. JavaScript品質
- **構文**: ES6+の使用（let/const, アロー関数等）
- **DOM操作**: 効率的なセレクタ使用、キャッシュ
- **イベント処理**: イベントリスナーの適切な設定・削除
- **エラーハンドリング**: try-catch、null/undefinedチェック
- **変数スコープ**: グローバル変数の乱用
- **非同期処理**: callback地獄、Promise/async-awaitの適切な使用
- **jQuery**: バージョン、非推奨メソッドの使用
- **console.log**: 本番環境へのログ出力残し

### 5. レスポンシブ対応
- **ブレイクポイント**: プロジェクトの基準値に従っているか
- **メディアクエリ**: 記述漏れ、SP/TB/PC全てで確認
- **画像**: 解像度対応（srcset, picture要素）
- **フォントサイズ**: 固定値でなく相対値の使用
- **オーバーフロー**: 小画面での横スクロール発生
- **タッチ操作**: ボタンサイズ（最小44x44px推奨）

### 6. パフォーマンス
- **画像最適化**: 
  - 適切なフォーマット（WebP推奨、PNG/JPG使い分け）
  - ファイルサイズ（圧縮漏れ）
  - 遅延読み込み（loading="lazy"）
  - 適切なサイズ指定（CLS対策）
- **CSS/JS**:
  - ファイルサイズ（minify漏れ）
  - 不要なライブラリ読み込み
  - レンダリングブロック（defer, async）
  - クリティカルCSS
- **フォント**:
  - Web Font の読み込み方法（font-display）
  - 不要なウェイト・スタイルの読み込み
- **リソース**:
  - 外部リソースの多重読み込み
  - 未使用のCSS/JS

### 7. デザインカンプとの整合性
- **余白**: margin, paddingの値がデザインと一致
- **フォント**: サイズ、行間、font-family
- **カラー**: 色コードの正確性、カラーパレット準拠
- **配置**: 要素の位置、間隔
- **レイアウト崩れ**:...