デザインレビュー (Refactoring UI) は何をしますか？
ナレッジは references/ にあります。すべてを決して読み込まないでください。 以下のチェーンに従ってください：
SKILL.md → INDEX.md → 必要なファイルのみ
1. リクエストの分類
| タスクタイプ | シグナル | 読み込むファイル |
|---|---|---|
| コンポーネント修正 | "このカード/フォーム/ナビゲーションバーをレビューして" | references/components/INDEX.md → 1～2 components/<名前>.md |
| 画面監査 | "このページ/画面/アプリをレビューして" | references/principles/INDEX.md → hierarchy.md, layout-spacing.md, typography.md, color.md；必要に応じて depth.md, images.md, finishing.md を追加 |
| 再設計 | "再設計して/より良いバージョンを提案して" | 画面監査のセット + personality.md + systems.md（+ process.md） |
| 洗練 | "もっと洗練された見た目にして/仕上げを施して" | finishing.md, depth.md, images.md |
| 新規デザイン | "一からデザインして" | process.md, personality.md, systems.md、その後必要に応じてトピックファイル |
また、画面上にあるコンポーネントを特定してください（components/INDEX.md の説明を参照）。画面監査の場合は、主要な1～2のコンポーネントのコンポーネントファイルを開いてください。
2. インターフェースのキャプチャ
利用可能なものを、以下の優先順位で使用します：
- ブラウザツール（Chrome上のClaude、内蔵ブラウザ、Playwright MCP）：ページを開き、スクリーンショットを撮り、ツールのJavaScript実行機能で
scripts/measure_styles.jsを実行します。領域を限定するには、事前にwindow.__DR_ROOT = '<cssセレクタ>'を実行します。 - シェル + Playwright（Claude Code）：
python3 scripts/capture.py <url|file> [--selector ".card"] [--out dir]を実行 → スクリーンショット、グレースケールスクリーンショット、measurements.jsonを取得。 - スクリーンショットのみ：視覚的なチェックのみ行います。測定値が利用できなかったことを伝えます。
- コードのみ：CSS/マークアップを読み、同じシグナルを手動で計算します。
常にグレースケールテスト（PRO-03）を実行します：彩度を落としたバージョンを表示します（capture.py が作成します。ブラウザツールでは document.documentElement.style.filter='grayscale(1)' を適用し、スクリーンショットを撮った後、フィルタを解除します）。
3. 分析
- すべての発見事項を原則IDにマッピングします。測定値を証拠として使用します（
measurements.jsonのキーはmeasure_styles.jsのコメントにあるIDを参照しています）。 - 以下の影響度の順でチェックします：階層 → スペーシング/レイアウト → タイポグラフィ → 色/コントラスト → 奥行き → 画像 → 仕上げ。
- 測定値はヒントであり、確定判断ではありません。報告する前に、各測定値をスクリーンショットと照らし合わせて確認してください。
- 変更を依頼されていない限り、既存のブランド/個性を尊重します（PER-*）。再設計の場合は、最初に対象とする個性を明示します。
[process]の原則は再設計を導くためのものです。監査で欠陥として報告しないでください。
4. 成果物
A. 発見事項 — 影響度順、最大10項目まで。各項目は以下の形式で記載：
[ID] 問題 — 証拠（測定値または視認できる内容） → 修正（書籍のスケールからの具体的な値）
B. 修正済みデザイン — ユーザーが批評のみを希望する場合を除く：
- 修正を適用した自己完結型のHTML/CSSページとして画面/コンポーネントを再構築します。原則ファイルのスケール（スペーシング：4/8/12/16/24/32/48/64…、フォントサイズ：12/14/16/18/20/24/30/36/48…、5段階のシャドウ、100～900の色の濃淡）を使用します。可能な場合は、変更前（スクリーンショット）と変更後を並べて表示します。
- または、ユーザーがコードの変更を希望する場合は、CSS/マークアップのパッチを提供します。
C. システムサマリー（再設計の場合）— 使用したタイプスケール、スペーシングスケール、パレット（グレー + プライマリ + HSLでのアクセントカラー）、シャドウを記載し、チームが採用できるようにします。
ルール
- IDを引用します。リファレンスの範囲を超えた原則を発明しないでください。カバーされていない内容がある場合は、書籍の範囲外であると伝えてください。
- 長いリストよりも、少数で影響の大きい変更を優先します。
- 書籍のテキストをコピーしないでください。リファレンスはパラフレーズされた要約です。
メンテナンス
原則ファイルが情報源です。編集後は、インデックスとコンポーネントファイルを再生成します：
python3 tools/build_indexes.py skills/design-review（スクリプトはソースリポジトリの tools/ にあり、インストールされたスキル内にはありません）。