visual-verdict

Compare generated UI screenshots against reference images and output a JSON verdict.

2|1|Updated Oct 8, 2009
One-click install
npx skills add https://github.com/riethmayer/dotfiles --skill visual-verdict-riethmayer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/riethmayer/dotfiles/tree/main/stow/agents/.agents/skills/visual-verdict
Command: npx skills add https://github.com/riethmayer/dotfiles --skill visual-verdict-riethmayer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

An automated method to identify and report strict visual differences between a generated UI screenshot and reference images, enabling fast, repeatable QA feedback.

Core Features & Use Cases

  • Deterministic JSON verdicts (score, verdict, category_match, differences, suggestions, reasoning) for UI screenshots.
  • Supports multiple reference images and a single generated_screenshot to drive design iterations.
  • Integrates into QA workflows and CI pipelines to quickly decide if a design passes visual checks.

Quick Start

Run the visual-verdict workflow with your 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 automate screenshot comparison for UI regression testing?▼

Automated screenshot comparison for UI regression testing is achieved by passing your reference images and a generated UI screenshot to generate a deterministic JSON verdict. This verdict includes a visual score, differences, and reasoning to provide repeatable QA feedback.

What is a deterministic visual verdict for design review?▼

A deterministic visual verdict is a strict JSON report identifying visual differences between a UI screenshot and reference images. It outputs consistent fields like score, category match, and suggestions to enable fast, repeatable visual acceptance decisions.

Can I use multiple reference images to compare against one generated screenshot?▼

Yes, you can supply multiple reference images to evaluate against a single generated screenshot. The workflow processes these inputs to output a JSON verdict, helping you verify if a design iteration passes visual checks across various expected conditions.

How do I integrate visual diff checks into a CI pipeline?▼

You integrate visual diff checks into a CI pipeline by running the screenshot comparison workflow during automated builds. It evaluates the generated screenshot against reference images and returns a JSON verdict to quickly decide if the UI passes visual acceptance.

Do I need any external dependencies to run image diff evaluation?▼

No external dependencies are required to run image diff evaluation. The workflow operates independently to process your reference images and generated screenshots, directly producing a JSON verdict with score, differences, and suggestions.

What format does the visual verdict output for automated QA?▼

The visual verdict outputs a structured JSON format for automated QA. This JSON includes specific fields such as score, verdict, category match, differences, suggestions, and reasoning to facilitate strict visual difference reporting.