<Purpose>
Use this skill to compare generated UI screenshots against one or more reference images and return a strict JSON verdict that can drive the next edit iteration.
</Purpose>
<Use_When>
- The task includes visual fidelity requirements (layout, spacing, typography, component styling)
- You have a generated screenshot and at least one reference image
- You need deterministic pass/fail guidance before continuing edits
</Use_When>
<Inputs>
- `reference_images[]` (one or more image paths)
- `generated_screenshot` (current output image)
- Optional: `category_hint` (e.g., `hackernews`, `sns-feed`, `dashboard`)
</Inputs>
<Output_Contract>
Return JSON only with this exact shape:
{
"score": 0,
"verdict": "revise",
"category_match": false,
"differences": ["..."],
"suggestions": ["..."],
"reasoning": "short explanation"
}
Rules:
score: integer 0-100verdict: short status (pass, revise, or fail)category_match: true when the generated screenshot matches the intended UI category/styledifferences[]: concrete visual mismatches (layout, spacing, typography, colors, hierarchy)suggestions[]: actionable next edits tied to the differencesreasoning: 1-2 sentence summary
<Threshold_And_Loop>
- Target pass threshold is 90+.
- If
score < 90, continue editing and rerun /oh-my-claudecode:visual-verdict before any further visual review pass.
- Do not treat the visual task as complete until the next screenshot clears the threshold.
</Threshold_And_Loop>
<Debug_Visualization>
When mismatch diagnosis is hard:
- Keep
$visual-verdict as the authoritative decision.
- Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a secondary debug aid to localize hotspots.
- Convert pixel diff hotspots into concrete
differences[] and suggestions[] updates.
</Debug_Visualization>
<Example>
```json
{
"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."
}
```
</Example>
Task: {{ARGUMENTS}}