How do I install the Visual Verdict skill?

Run npx skillmds@latest add docevilock/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?

docevilock (@docevilock) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Visual Verdict by docevilock — Agent Skill

Name: Visual Verdict
Author: docevilock

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

---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 `$visual-verdict` before any further code edits in the next iteration.- Persist the verdict in a local progress record with both: - numeric signal (`score`, threshold pass/fail) - qualitative signal (`reasoning`, `suggestions`, `next_actions`)</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>

Frequently asked questions

Visual Verdict