ousiass/design-review

design-review

前提条件

• Claude Code 環境
• gh CLI（GitHub Issue 出力時）

引数

• 引数なし: AskUserQuestion でレビュー対象のファイルやディレクトリを確認する
• パス指定: 指定されたファイルやディレクトリのみチェック

フェーズ1: プロジェクト構造とデザイン基盤の把握

1. 対象ファイルのディレクトリ構成、使用フレームワーク（React / Vue / Svelte 等）を把握する
2. プロジェクト内のデザイン基盤ファイルを検出する:
   • CSS フレームワーク設定（tailwind.config.*, uno.config.* 等）
   • デザイントークン / テーマ定義（theme.ts, tokens.*, variables.css 等）
   • グローバルスタイル（global.css, base.css 等）
   • 既存の UI コンポーネントライブラリ（shadcn, Vuetify, MUI 等）
3. 検出したデザイン基盤をレビューの判断基準として読み込む
4. 対象ファイルをリストアップし、TaskCreate でタスク化する

フェーズ2: デザイン品質チェック

対象ファイルを全件チェックする。ファイル数が多い場合はディレクトリ単位で分割。

チェック観点の詳細は references/check-criteria.md を参照。

主要カテゴリ:

• 視覚的一貫性: 色・タイポグラフィ・スペーシング・角丸・シャドウのトークン準拠
• レイアウト・レスポンシブ: ブレークポイント・コンテナ・オーバーフロー
• アクセシビリティ: コントラスト比・フォーカス・ARIA・キーボード操作
• インタラクション: hover / focus / active 状態、ローディング・エラー・空状態
• コンポーネント API: Props 設計・バリアント・合成パターン
• デザイントークン準拠: ハードコード値の検出・テーマ変数の活用

フェーズ3: レポート生成

1. AskUserQuestion で出力先を確認：
   • GitHub Issue（推奨）: タイトル design-review: デザイン品質レポート(<ブランチ名>, <YYYY-MM-DD>)
   • ローカル MD ファイル: design-review-report.md
2. レポート形式は templates/report.md を参照
3. 要約をユーザーに報告する

重大度の基準

| 重大度 | 基準 | |-------|------| | 🔴 重大 | アクセシビリティ違反（WCAG A 不適合）、操作不能な UI、重要な表示崩れ | | 🟠 重要 | デザインシステムとの不整合、レスポンシブ破綻、状態欠如（ローディング/エラー） | | 🟡 提案 | 視覚的改善、インタラクション強化、トークン化の推奨 | | 🟢 軽微 | スタイルの微調整、命名改善、コード整理 |

ルール

• 推測で指摘しない。実際のコードを確認して裏付けを取る
• プロジェクトのデザイン基盤（トークン、テーマ設定）を尊重する
• デザイン基盤が未検出の場合は、一般的な UI/UX ベストプラクティスに基づく
• 指摘には必ずファイルパスと行番号を示す
• 改善案は具体的なコード例を含める
• 🔴🟠 は必ずレポートに含める。🟡🟢 は明確なメリットがある場合のみ
• フレームワークや既存スタイルの慣習を尊重する
• TaskCreate/TaskUpdate で進捗を管理する