---
name: Design Review
slug: design-review-3
category: Quality
description: Design Review checks HTML files against the melta UI design system and flags violations, false positives, and severity. Use it when you need a DS compliance review and fix suggestions for a specific file.
github: "https://github.com/tsubotax/melta-ui/tree/main/skills/design-review"
language: TypeScript
stars: 196
forks: 21
install: "npx degit https://github.com/tsubotax/melta-ui/tree/main/skills/design-review ~/.claude/skills/design-review"
installs_to: ~/.claude/skills/design-review
source_path: skills/design-review/SKILL.md
collection_size: 2
category_size: 1662
collection_url: "https://dirskills.com/collections/tsubotax/melta-ui"
added: 2026-09-05T05:31:11.951Z
last_synced: 2026-09-05T05:31:11.951Z
canonical_url: "https://dirskills.com/skills/design-review-3"
---

# Design Review

Design Review checks HTML files against the melta UI design system and flags violations, false positives, and severity. Use it when you need a DS compliance review and fix suggestions for a specific file.

**Install:**

```bash
npx degit https://github.com/tsubotax/melta-ui/tree/main/skills/design-review ~/.claude/skills/design-review
```

## README

# デザインレビュー

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

## 手順

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

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

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

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

以下を読み込む:
- `CLAUDE.md`（クイックリファレンス・禁止パターン要約）
- `foundations/prohibited.md`（全禁止パターン — SSOT）

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

`references/checklist.md` を読み込み、以下のカテゴリ順にHTMLを走査する:

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

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

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

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

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

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

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