| 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 # 直近に作った/触った視覚成果物を自動検出
手順
-
対象を特定する
- 引数があればそれ。無ければ直近の会話で作成/編集した視覚成果物
（UI ファイル・画像・開いていた URL）を対象にする。曖昧なら確認する。
-
スクリーンショット/ラスタライズを取得する（対象種別で分岐）
| 対象 | 取得方法 |
|---|
| 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 | そのまま |
-
Read で実際に見る — 取得した PNG を Read ツールで開き、目視する。
-
チェックリストで採点する（各項目 pass/fail、fail は具体箇所を書く）
-
判定を返す
- 全 pass → ✅ pass と一言の根拠。
- fail あり → ❌ どの項目がどう崩れているか（具体的な座標/要素名）＋修正案。
可能なら修正 → 再描画 → 2〜4 を再実行し、pass するまで回す。
ルール
- 必ず実際に Read して見る。 「見たことにする」「コードから推測する」は禁止。これがこのコマンドの存在意義。
- SVG/PDF は Vision が直接読めないので 必ず PNG 化 してから Read する。
- URL は単一幅で済ませず、レスポンシブ対象なら主要ブレークポイントで撮る。
- 一時ファイルは
/tmp（または scratchpad）に置く。成果物ディレクトリを汚さない。
- アラート/モーダルを誘発する操作は避ける（ブラウザ自動化が固まるため）。
