yeachan-heo/visual-verdict

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

Files1

1 files · 1.0 KB

Select a file to preview

Overall Score

82/100

Grade

B

Good

Grades are signals, not a certification. Always review a skill yourself before use.

Safety

95

Quality

78

Clarity

85

Completeness

75

Summary

A visual QA skill that compares generated UI screenshots against reference images and returns a deterministic JSON verdict with scores, mismatches, and actionable suggestions. It enforces a 90+ pass threshold and guides iterative refinement until visual fidelity is achieved.

Detected Capabilities

image comparisonjson output generationvisual analysisthreshold evaluation

Trigger Keywords

Phrases that agents use to match this skill to user intent.

visual qa verdictscreenshot comparisonui fidelity checkreference image validationlayout mismatch detection

Use Cases

Compare generated screenshots against reference images to validate UI fidelity
Identify and diagnose layout, spacing, typography, and styling mismatches
Generate actionable suggestions for iterative visual refinement
Establish pass/fail thresholds (90+) for visual acceptance in automated workflows
Drive screenshot-to-reference testing loops for UI correctness

Quality Notes

Clear, well-defined output contract with exact JSON shape specification
Explicit threshold rules (90+ pass) and loop control documented
Concrete example demonstrates expected output format and precision
Input requirements clearly specified (reference images, generated screenshot, optional category hint)
Debug guidance provided for difficult mismatches (pixel diff secondary aid)
Strong category matching and actionable suggestions pattern guidance
Scope is narrowly focused on visual comparison — no filesystem writes, shell execution, or network operations
Error cases not explicitly addressed (missing images, invalid format, comparison failures)
No guidance on handling edge cases (very large images, animated content, partial references)

Model: claude-haiku-4-5-20251001Analyzed: Sep 9, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

visual-verdict