Skip to content
Get packs

Visual QA Verdict

Scores a UI screenshot against reference images and returns a structured pass/revise/fail verdict.

Source Download skill
Repository
Yeachan-Heo/oh-my-claudecode
Stars
40,512
Licence
MIT
Files
1 file

What it does

When an agent builds or edits a user interface, this skill makes it compare the generated screenshot with one or more reference images (such as a design mock or a target site). It returns a strict JSON report with a 0-100 score, a pass/revise/fail verdict, a list of visual differences, and specific suggested edits. The agent uses that report to decide what to change next and keeps iterating until the score reaches the 90+ target.

Great for

  • Developers who ask an AI agent to replicate a design or screenshot and want measurable feedback
  • Designers checking how closely generated UI matches a reference mock-up
  • Teams running automated edit-and-check loops on front-end work

Skip it if

  • Tasks without a visual reference, since the skill needs at least one reference image to compare against
  • Final design sign-off or accessibility audits, because the score comes from an AI judgment and is not a validated measurement
  • Users expecting pixel-exact results: the skill's pixel-diff step is only an optional debugging aid

Try asking

  • “Compare my current login page screenshot against reference_images/login.png and tell me what to fix”
  • “Score this dashboard screenshot against the Figma export and list spacing and typography differences”
  • “Keep editing the feed layout until the visual verdict reaches 90 or above”
Step-by-step guide: how to use Visual QA VerdictInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    visual-verdict.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip visual-verdict.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip visual-verdict.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide clear, full-resolution reference images and a category_hint such as dashboard or sns-feed to improve category matching
  • Treat the score as a guide for iteration rather than a final quality judgment, and review the differences yourself
  • Make sure the screenshot is taken at the same viewport size as the reference so comparisons are fair

What's inside

  • SKILL.md

Redistributed unmodified from Yeachan-Heo/oh-my-claudecode under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.