skills.rest
andrew-t-james
andrew-t-jamesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-verdict

Compare generated screenshots against reference images and return a JSON verdict with score and differences.

Updated Jul 3, 2025
Search Tags:#automation#qa#design-review#pixel-diff#screenshot-diff#ui-quality#visual-verdict
One-click install
npx skills add https://github.com/andrew-t-james/dotfiles --skill visual-verdict-andrew-t-james
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-verdict
Source: https://github.com/andrew-t-james/dotfiles/tree/main/dot_codex/skills/visual-verdict
Command: npx skills add https://github.com/andrew-t-james/dotfiles --skill visual-verdict-andrew-t-james

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use this skill to compare a generated UI screenshot against reference images and produce a strict JSON verdict that can drive the next edit iteration.

Core Features & Use Cases

  • Structured, deterministic evaluation across layout, spacing, typography, and component styling.
  • Produces a JSON verdict with a numeric score, a pass/revise/fail label, and concrete differences and actionable suggestions.
  • Use cases include QA cycles for UI dashboards, feeds, and app screens to guide design and implementation.

Quick Start

Run the visual-verdict tool to compare a generated screenshot against reference images and produce a strict 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 compare a generated UI screenshot against a reference image for visual differences?▼

To compare a generated UI screenshot against reference images, the visual-verdict skill identifies visual differences and returns a strict JSON object containing a numeric score, a deterministic verdict, and actionable suggestions to guide the next edit iteration.

Can I automate UI design review and get a deterministic pass or fail verdict?▼

Yes, you can automate UI design review by running the visual-verdict tool to evaluate layout, spacing, typography, and component styling, which outputs a deterministic pass, revise, or fail label along with a numeric score in a structured JSON format.

What is the best way to detect pixel diffs between app screens during QA cycles?▼

The best way to detect pixel diffs during QA cycles is using a deterministic screenshot comparison process that evaluates dashboards and feeds, returning a JSON verdict with category matches, concrete differences, and actionable suggestions for implementation.

Does visual regression testing for UI layouts require any external dependencies?▼

No, visual regression testing for UI layouts using this skill requires no external dependencies, allowing you to directly compare screenshots against reference images and produce a structured JSON verdict without additional environment setup.

What specific UI elements are evaluated when comparing screenshots for visual differences?▼

When comparing screenshots for visual differences, the evaluation specifically targets UI layout, spacing, typography, and component styling across app screens, feeds, and dashboards to produce a comprehensive numeric score and deterministic verdict.

Related Skills

Explore More Design & Creative Skills→
EvolutionAPIEvolutionAPI
520

dev-visual-verdict

Compare before and after screenshots to detect visual regressions in UI components.

Official
Intermediate
Pryma-TechPryma-Tech

visual-verdict

Compare UI screenshots against reference images and return a strict JSON verdict.

Community
Advanced
chmcchmc

visual-verification

Visually verify ListAll app UI implementations across macOS, iOS, and watchOS using MCP tools.

Community
Intermediate
MadAppGangMadAppGang
7

compare

Compare UI screenshots pixel-by-pixel and generate diff reports with JSON output.

Official
Advanced