tsubotax/melta-ui/design-review

デザインレビュー

HTMLファイルを melta UI デザインシステム（design/contracts/rules.json を正とする）に照らしてレビューし、違反を検出・分類・修正提案する。

手順

Step 1: 対象のHTMLファイルを特定する

• 引数でファイルパスが指定されている場合 → そのファイルを読み込む
• 引数がない場合 → examples/ 配下のHTMLファイルを一覧表示し、ユーザーに選択してもらう
• 対象がHTMLファイルでない場合 → 「HTMLファイルを指定してください」と返す

対象ファイルを全文読み込む。

Step 2: DSリファレンスを読む

• design/contracts/rules.json（SSOT。ID / severity / detector / pattern / alternative / automationStatus を持つ全禁止ルール）

補助（任意）:

• foundations/prohibited.md — 人間向けの prose 版。SSOT ではなく、pattern を持つルールの一部しか載っていないので、これだけで判定しない

Step 3: チェックリストに沿って違反を検出する

references/checklist.md（観点。HTML のどこをどう見るかの手順）を読み込み、各項目の [ID] を Step 2 で読んだ rules.json から引く。severity / detector / alternative の値は rules.json が正。

references/rules-index.md は 全文を読まなくてよい。checklist に無いカテゴリを横断して探すときの索引（カテゴリ別の表 + human-only 節 + 機械検出済み節）として、必要な箇所だけ参照する。

checklist.md のカテゴリ順にHTMLを走査する:

1. カラー
2. スペーシング・レイアウト
3. タイポグラフィ
4. モーション
5. ボーダー
6. フォーム（fieldset/legend カード干渉、日付セレクト幅を含む）
7. アクセシビリティ

checklist.md に載っていないカテゴリ（modal / stepper / tag / list / table / skeleton / datepicker / baseline / ai-pattern / philosophy / button / divider）の違反を見つけた場合は、rules-index.md から ID を引いて報告する。

報告する違反には必ずルール ID を添える。 rules.json に存在しない ID を書かない（tests/skill-rule-refs.spec.ts が実在性を検査している）。対応するルールが無い指摘は違反ではなく「評価不可（ルール無し）」として扱う。

Step 4: 偽陽性を排除し、重大度を判定する

references/severity-rules.md を読み込み、以下を実行:

1. 「推奨」と「必須」を区別 — 推奨事項は違反として報告しない
2. 文脈判定で偽陽性を排除 — label/aria-current/text-xs の文脈確認
3. 重大度を割り当て — Critical / High / Medium / Low の4段階。固定ルールに従い、表に無いものは rules.json の severity から変換する

Step 5: レポートを出力する

references/report-template.md を読み込み、テンプレートに沿ってレポートを出力する。

レポートには `## 評価不可` 節を必ず含める（human-only / 静的に観測できない / 対応ルール無しの3種）。評価不可の項目は違反件数に含めない。

出力前に サマリー整合チェック を実施: 本文中の各重大度の件数と冒頭サマリーの件数が一致することを確認する。