How do I install the Visual Verdict skill?

Run npx skillmds@latest add spring-ai-alibaba/visual-verdict in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Visual Verdict skill do?

Structured visual QA verdict for screenshot-to-reference comparisons It is listed under Coding & Dev Tools on SkillMD.

Is Visual Verdict safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Visual Verdict?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Visual Verdict free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Visual Verdict?

spring-ai-alibaba (@spring-ai-alibaba) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Visual Verdict by spring-ai-alibaba

Name: Visual Verdict
Author: spring-ai-alibaba

File contents

{
  "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

Task: {{ARGUMENTS}}

---name: visual-verdictdescription: Structured visual QA verdict for screenshot-to-reference comparisons---<Purpose>Use this skill to compare generated UI screenshots against one or more reference images and return a strict JSON verdict that can drive the next edit iteration.</Purpose><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><Inputs>- `reference_images[]` (one or more image paths)- `generated_screenshot` (current output image)- Optional: `category_hint` (e.g., `hackernews`, `sns-feed`, `dashboard`)</Inputs><Output_Contract>Return **JSON only** with this exact shape:```json{ "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-qoder: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:1. Keep `$visual-verdict` as the authoritative decision.2. Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a **secondary debug aid** to localize hotspots.3. Convert pixel diff hotspots into concrete `differences[]` and `suggestions[]` updates.</Debug_Visualization><Example>```json{ "score": 87, "verdict": "revise", "category_match": true, "differences": [ "Top nav spacing is tighter than reference", "Primary button uses smaller font weight" ], "suggestions": [ "Increase nav item horizontal padding by 4px", "Set primary button font-weight to 600" ], "reasoning": "Core layout matches, but style details still diverge."}```</Example>Task: {{ARGUMENTS}}

Frequently asked questions

Visual Verdict