visual-verdict
Structured visual QA verdict for screenshot-to-reference comparisons
Best for UI development teamsWorks with GitHubLow risk
⌘source
- author
@Yeachan-Heo- language
- TypeScript
★30kstars
2.7kforks
Apr 18, 2026
✦overview.md
Key Features
- ·Compare UI screenshots against reference images
- ·Return structured JSON verdict with pass/fail status
- ·Provide concrete visual mismatches and actionable suggestions
- ·Target pass threshold of 90+ score
- ·Deterministic guidance for edit iterations
- ·Optional category hint for UI style matching
Use Cases
- →Verifying visual fidelity of generated UI components before deployment
- →Automating visual regression testing in CI/CD pipelines
- →Comparing design mockups against implemented screens
- →Iteratively improving UI layouts during development cycles
- →Validating that generated content matches reference styling and spacing
Best for
- ✓UI development teams
- ✓Visual regression testing
- ✓Automated QA workflows
Not ideal for
- !Non-visual testing
- !One-off manual comparisons
- !Subjective design evaluation
FAQs
name
visual-verdict
description
Structured visual QA verdict for screenshot-to-reference comparisons
level:2
<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>
<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, orfail)category_match:truewhen the generated screenshot matches the intended UI category/styledifferences[]: concrete visual mismatches (layout, spacing, typography, colors, hierarchy)
$install
1-click copynpx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdictSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
5/ 5
excellentVery clear and well structured, with almost no room for misunderstanding.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
5/ 5
very highHighly actionable with clear, concrete steps that an agent can follow directly.