visual-verify

name	visual-verify
description	生成・編集した視覚成果物（Web ページ URL、ローカルの HTML/UI ファイル、 画像・図・PDF/SVG）をスクリーンショットで取得し、Read で実際に見て チェックリスト採点する。崩れ・はみ出し・重なり・コントラスト不足を検出し、 NG なら具体的な修正案を返す。Max プランの画像認識を惜しまず使うための専用コマンド。
user-invocable	true
allowed-tools	["Bash","Read","Write"]

visual-verify — 見て確かめる

作ったもの（ページ・UI・図・画像）を 自分の目（Vision 入力）で確認 する。 「たぶん大丈夫」ではなく、実際にスクショを Read して採点してから完了にする。

使い方

/visual-verify <url>             # 例: http://localhost:3000  —— ブラウザでスクショ→採点
/visual-verify <file.html>       # ローカル HTML を開いてスクショ→採点
/visual-verify <file.svg|pdf>    # ラスタライズして Read→採点
/visual-verify <file.png|jpg>    # そのまま Read→採点
/visual-verify                   # 直近に作った/触った視覚成果物を自動検出

手順

1. 対象を特定する

   • 引数があればそれ。無ければ直近の会話で作成/編集した視覚成果物 （UI ファイル・画像・開いていた URL）を対象にする。曖昧なら確認する。

2. スクリーンショット/ラスタライズを取得する（対象種別で分岐）

   対象	取得方法
   URL	Claude-in-Chrome（tabs_create_mcp → navigate → computer screenshot、無ければ playwright-cli スキル）。主要ブレークポイント（例 375 / 768 / 1280px）でそれぞれ撮る
   ローカル HTML	file:// で同上、またはヘッドレスブラウザで PNG 出力
   SVG	rsvg-convert -o /tmp/vv.png <file.svg>（無ければヘッドレスブラウザ）
   PDF	pdftoppm -png -r 150 <file.pdf> /tmp/vv でページ画像化
   PNG/JPG	そのまま

3. Read で実際に見る — 取得した PNG を Read ツールで開き、目視する。

4. チェックリストで採点する（各項目 pass/fail、fail は具体箇所を書く）

   • レイアウト崩れ・要素のはみ出し・ビューポート端での見切れが無い
   • 要素同士が意図せず重なっていない（テキスト/凡例/画像の衝突）
   • テキストのコントラストが十分で可読（ダークモードがあれば両方）
   • 余白・整列が意図どおり
   • 主要ブレークポイント幅で破綻しない（レスポンシブ対象時）
   • 図表なら: 軸ラベル/目盛りの見切れ無し・データが隠れていない・アスペクト比が適切

5. 判定を返す

   • 全 pass → ✅ pass と一言の根拠。
   • fail あり → ❌ どの項目がどう崩れているか（具体的な座標/要素名）＋修正案。 可能なら修正 → 再描画 → 2〜4 を再実行し、pass するまで回す。

ルール

• 必ず実際に Read して見る。 「見たことにする」「コードから推測する」は禁止。これがこのコマンドの存在意義。
• SVG/PDF は Vision が直接読めないので 必ず PNG 化 してから Read する。
• URL は単一幅で済ませず、レスポンシブ対象なら主要ブレークポイントで撮る。
• 一時ファイルは /tmp（または scratchpad）に置く。成果物ディレクトリを汚さない。
• アラート/モーダルを誘発する操作は避ける（ブラウザ自動化が固まるため）。