1---2name: visual-verdict3description: Structured visual QA verdict for screenshot-to-reference comparisons4---5
6<Purpose>
7Use 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.
8</Purpose>
9
10<Use_When>
11- The task includes visual fidelity requirements (layout, spacing, typography, component styling)
12- You have a generated screenshot and at least one reference image
13- You need deterministic pass/fail guidance before continuing edits
14</Use_When>
15
16<Inputs>
17- `reference_images[]` (one or more image paths)
18- `generated_screenshot` (current output image)
19- Optional: `category_hint` (e.g., `hackernews`, `sns-feed`, `dashboard`)
20</Inputs>
21
22<Output_Contract>
23Return **JSON only** with this exact shape:
24
25```json
26{
27 "score": 0,
28 "verdict": "revise",
29 "category_match": false,
30 "differences": ["..."],
31 "suggestions": ["..."],
32 "reasoning": "short explanation"
33}
34```
35
36Rules:
37- `score`: integer 0-100
38- `verdict`: short status (`pass`, `revise`, or `fail`)
39- `category_match`: `true` when the generated screenshot matches the intended UI category/style
40- `differences[]`: concrete visual mismatches (layout, spacing, typography, colors, hierarchy)
41- `suggestions[]`: actionable next edits tied to the differences
42- `reasoning`: 1-2 sentence summary
43
44<Threshold_And_Loop>
45- Target pass threshold is **90+**.
46- If `score < 90`, continue editing and rerun `/oh-my-claudecode:visual-verdict` before any further visual review pass.
47- Do **not** treat the visual task as complete until the next screenshot clears the threshold.
48</Threshold_And_Loop>
49
50<Debug_Visualization>
51When mismatch diagnosis is hard:
521. Keep `$visual-verdict` as the authoritative decision.
532. Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a **secondary debug aid** to localize hotspots.
543. Convert pixel diff hotspots into concrete `differences[]` and `suggestions[]` updates.
55</Debug_Visualization>
56
57<Example>
58```json
59{
60 "score": 87,
61 "verdict": "revise",
62 "category_match": true,
63 "differences": [
64 "Top nav spacing is tighter than reference",
65 "Primary button uses smaller font weight"
66 ],
67 "suggestions": [
68 "Increase nav item horizontal padding by 4px",
69 "Set primary button font-weight to 600"
70 ],
71 "reasoning": "Core layout matches, but style details still diverge."
72}
73```
74</Example>
75
76Task: {{ARGUMENTS}}
yeachan-heo