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.