visual-verdict

Compare generated screenshots with reference images and output a JSON verdict.

1|Updated Sep 22, 2025
One-click install
npx skills add https://github.com/prthik/prathik-astro --skill visual-verdict-prthik
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/prthik/prathik-astro/tree/main/.codex/skills/visual-verdict
Command: npx skills add https://github.com/prthik/prathik-astro --skill visual-verdict-prthik

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured, deterministic verdict by comparing a generated UI screenshot with one or more reference images to guide visual QA iterations.

Core Features & Use Cases

  • Deterministic pass/fail verdicts for visual QA comparisons between current renders and references.
  • Produces a strict JSON payload suitable for automated pipelines and handoff between design and engineering.
  • Use Case: Run a UI visual check across components to surface layout, spacing, and typography discrepancies for remediation.

Quick Start

Run a visual verdict check by supplying generated_screenshot and reference_images to obtain a JSON verdict.

Frequently Asked Questions about visual-verdict

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get a deterministic visual verdict comparing a UI screenshot against reference images?

To get a deterministic visual verdict, supply a generated screenshot and one or more reference images to identify visual discrepancies. The Skill evaluates layout, typography, and styling differences, returning a strict JSON payload with a pass/fail verdict, score, and actionable suggestions.

Can I automate UI visual regression testing using JSON output?

Yes, you can automate UI visual regression testing using the strict JSON output produced by this visual verdict process. The deterministic pass/fail verdicts and structured difference logging are designed for automated pipelines and seamless handoff between design and engineering teams.

What visual discrepancies does a UI screenshot comparison detect?

A UI screenshot comparison detects visual discrepancies in layout, spacing, and typography. By applying domain-specific evaluation through an optional category hint, the visual verdict precisely identifies styling differences between the generated render and the provided reference images.

Does the visual verdict output include suggestions for fixing UI styling differences?

Yes, the visual verdict output includes specific suggestions for fixing UI styling differences. The strict JSON payload contains a differences array detailing the layout and typography issues, alongside reasoning and remediation suggestions to guide the next visual QA iteration.

How do I evaluate UI components for specific domains during visual QA?

To evaluate UI components for specific domains during visual QA, provide a category hint alongside the generated screenshot and reference images. This domain-specific evaluation context helps tailor the pixel-diff comparison and refines the resulting JSON verdict for accurate visual regression checks.

What is the best way to structure visual QA results for engineering handoff?

The best way to structure visual QA results for engineering handoff is using a strict JSON output containing score, verdict, category match, differences, suggestions, and reasoning. This deterministic format ensures automated pipelines can process UI visual discrepancies without manual parsing.