<目的> このスキルは、生成されたUIスクリーンショットを1つ以上の参照画像と比較し、次の編集イテレーションを進めるための厳格なJSON判定を返すために使用します。 </目的>
<使用タイミング>
- タスクに視覚的なフィデリティ要件（レイアウト、スペーシング、タイポグラフィ、コンポーネントスタイル）が含まれている場合
- 生成されたスクリーンショットと少なくとも1つの参照画像がある場合
- 編集を続ける前に、明確な合格・不合格の指針が必要な場合 </使用タイミング>
<入力>
reference_images[]（1つ以上の画像パス）generated_screenshot（現在の出力画像）- オプション:
category_hint（例:hackernews、sns-feed、dashboard） </入力>
<出力契約> 以下の正確な形状で JSONのみ を返します：
{
"score": 0,
"verdict": "revise",
"category_match": false,
"differences": ["..."],
"suggestions": ["..."],
"reasoning": "short explanation"
}
ルール:
score: 整数 0-100verdict: 短いステータス（pass、revise、またはfail）category_match: 生成されたスクリーンショットが意図したUIカテゴリ/スタイルと一致する場合はtruedifferences[]: 具体的な視覚的ミスマッチ（レイアウト、スペーシング、タイポグラフィ、色、階層）suggestions[]: 相違点に関連する実行可能な次の編集reasoning: 1-2文の要約
<閾値とループ>
- 合格の閾値は 90+ です。
score < 90の場合は、編集を続け、次のビジュアルレビューパスの前に/oh-my-claudecode:visual-verdictを再実行してください。- 次のスクリーンショットが閾値をクリアするまで、視覚的タスクを完了したとみなさないでください。 </閾値とループ>
<デバッグ可視化> 不一致の診断が困難な場合：
$visual-verdictを決定権を持つ判断として維持します。- ピクセルレベルの差分ツール（ピクセル差分 / pixelmatch オーバーレイ）を二次的なデバッグ補助として使用し、問題箇所を特定します。
- ピクセル差分の問題箇所を具体的な
differences[]とsuggestions[]の更新に変換します。 </デバッグ可視化>
<例>
{
"score": 87,
"verdict": "revise",
"category_match": true,
"differences": [
"Top nav spacing is tighter than reference",
"Primary button uses smaller font weight"
],
"suggestions": [
"Increase nav item horizontal padding by 4px",
"Set primary button font-weight to 600"
],
"reasoning": "Core layout matches, but style details still diverge."
}
</例>
タスク: {{ARGUMENTS}}