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

86/100

Grade

A

Excellent

Safety

95

Quality

84

Clarity

87

Completeness

78

Summary

A structured visual QA skill that compares generated UI screenshots against reference images and returns a deterministic JSON verdict (pass/revise/fail) with actionable differences and suggestions. The skill provides a feedback loop mechanism for iterative UI refinement, with a 90+ pass threshold to drive editing iterations until visual fidelity matches target standards.

Detected Capabilities

image analysisvisual comparisonJSON output generationstructured verdict generationdifference detection and reporting

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

visual regression testingscreenshot verificationui fidelity checkdesign qa feedbackreference image comparison

Use Cases

Validate UI rendering matches design specifications before release
Generate actionable feedback for screenshot-to-reference comparison iterations
Establish objective pass/fail criteria for visual regression testing
Drive iterative UI refinement with structured QA verdicts
Compare multi-category UI outputs (dashboards, feeds, news sites) against references

Quality Notes

Clear output contract with strict JSON schema—agent knows exactly what structure to produce
Explicit threshold and loop guidance (90+ for pass)—removes ambiguity about when to stop iterating
Practical debug visualization section—addresses hard-to-diagnose edge cases with secondary tooling hints
Well-structured example verdict—shows agent the expected granularity of differences and suggestions
Concrete input requirements (reference_images, generated_screenshot, optional category_hint)—scope is precise
Actionable suggestions must be 'tied to differences'—prevents generic feedback
Does not perform filesystem writes, shell execution, or network requests—minimal attack surface

Model: claude-haiku-4-5-20251001Analyzed: May 11, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Version History

v1.1

Content updated

2026-04-20

Latest

v1.0

No changelog

2026-04-12

visual-verdict