# Tsubotax Melta UI Melta UI

> デザインレビュー

- Skill: `tomevault-io/tsubotax-melta-ui-melta-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/tsubotax-melta-ui-melta-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tsubotax-melta-ui-melta-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/tsubotax-melta-ui-melta-ui

---


# デザインレビュー

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` を読み込み、テンプレートに沿ってレポートを出力する。

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

---
> Source: [tsubotax/melta-ui](https://github.com/tsubotax/melta-ui) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-29 -->