Agent skill

visual-verdict

Structured visual QA verdict for screenshot-to-reference comparisons

View SKILL.md on GitHub Repository

Stars 28,047

Forks 2,600

Install this agent skill to your Project

npx add-skill https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict

SKILL.md

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

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

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>

Task: {{ARGUMENTS}}