/design-review
HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。
$ npx -y skills add tsubotax/melta-ui --skill design-review --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/design-review
Context preview
The summary Claude sees to decide when to auto-load this skill.
HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。
SKILL.md
design-review.SKILL.mdname: design-review description: HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。
デザインレビュー
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` を読み込み、テンプレートに沿ってレポートを出力する。
出力前に **サマリー整合チェック** を実施: 本文中の各重大度の件数と冒頭サマリーの件数が一致することを確認する。
AI 向けデザインガイドラインを、違反を止める実行可能な契約へ。 🇬🇧 English: README.en.md · Site: AI にガイドラインを読ませることはできる。守るかどうかは AI 任せになる。melta UI は、その「任せ」を機械に置き換える。生成の前（MCP で契約を参照させる）・直後（lint / hook が違反を突き返す）・マージ前（CI が止める）・その後（drift 検査がドキュメントと実装の腐りを検知し続ける）の 4 点で機械が関与する。読ませるだけでなく、守らせる。 境界:
Repo: tsubotax/melta-ui