# Visual Verdict

Structured visual QA verdict for screenshot-to-reference comparisons

- Repository: https://github.com/Yeachan-Heo/oh-my-claudecode (40492 stars)
- Category: Testing
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -g -a claude-code -y`
Codex: `npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -g -a codex -y`
Cursor: `npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -g -a cursor -y`
Gemini CLI: `npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Yeachan-Heo/oh-my-claudecode`

## Description

Structured visual QA verdict for screenshot-to-reference comparisons

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

<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:

```json
{
  "score": 0,
  "verdict": "revise",
  "category_match": false,
  "differences": ["..."],
  "suggestions": ["..."],
  "reasoning": "short explanation"
}
```

Rules:
- `score`: integer 0-100
- `verdict`: short status (`pass`, `revise`, or `fail`)
- `category_match`: `true` when the generated screenshot matches the intended UI category/style
- `differences[]`: concrete visual mismatches (layout, spacing, typography, colors, hierarchy)
- `suggestions[]`: actionable next edits tied to the differences
- `reasoning`: 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:
1. Keep `$visual-verdict` as the authoritative decision.
2. Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a **secondary debug aid** to localize hotspots.
3. Convert pixel diff hotspots into concrete `differences[]` and `suggestions[]` updates.
</Debug_Visualization>

The rest: https://github.com/Yeachan-Heo/oh-my-claudecode/blob/HEAD/skills/visual-verdict/SKILL.md