# Design Review

> UIコンポーネントのデザイン品質をレビューし、Issue またはレポートを生成する。

- Skill: `ousiass/design-review` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add ousiass/design-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ousiass/design-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ousiass (https://skillmd.com/u/ousiass)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/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 で進捗を管理する