Agent skill

Visual Verdict Screenshot QA

by Yeachan-Heo in Yeachan-Heo/oh-my-claudecode

Compares a generated UI screenshot with reference images and returns a strict JSON verdict with a score, differences and suggested edits to drive the next iteration.

MITAuto-check passedTesting & QA

Install Visual Verdict Screenshot QA

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode visual-verdict --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/visual-verdict .claude/skills/visual-verdict && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "visual-verdict" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict into .claude/skills/visual-verdict/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-verdict", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode visual-verdict --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/visual-verdict .agents/skills/visual-verdict && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "visual-verdict" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict into .agents/skills/visual-verdict/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-verdict", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode visual-verdict --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/visual-verdict .cursor/skills/visual-verdict && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "visual-verdict" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict into .cursor/skills/visual-verdict/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-verdict", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/Yeachan-Heo/oh-my-claudecode.git --path skills/visual-verdict

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode visual-verdict --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/visual-verdict .gemini/skills/visual-verdict && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "visual-verdict" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict into .gemini/skills/visual-verdict/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-verdict", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode visual-verdict

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/visual-verdict .github/skills/visual-verdict && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "visual-verdict" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict into .github/skills/visual-verdict/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-verdict", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install Yeachan-Heo/oh-my-claudecode visual-verdict --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Yeachan-Heo/oh-my-claudecode.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/visual-verdict .opencode/skills/visual-verdict && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "visual-verdict" agent skill from https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict into .opencode/skills/visual-verdict/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-verdict", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: visual-verdict
GitHub stars: 40k
Token cost: ~609 tokens
SKILL.md length: 212 words
Files: 1
Skills in repo: 47
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Compares a generated UI screenshot with reference images and returns a strict JSON verdict with a score, differences and suggested edits to drive the next iteration.

Works in 3 steps: Keep $visual-verdict as the… → Use pixel-level diff tooling (pixel diff… → Convert pixel diff hotspots into…
Checking a generated page against a design mockup before the next edit
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Getting a pass or fail signal for visual fidelity in layout, spacing and typography

What it does

You give the agent one or more reference images and the current screenshot, with an optional category hint such as a news site, social feed or dashboard. It answers with JSON only: an integer score from 0 to 100, a short verdict of pass, revise or fail, whether the screenshot matches the intended UI category, a list of concrete differences in layout, spacing, typography, colors and hierarchy, matching suggestions and a brief reasoning.

The target is a score of 90 or more. Below that, the agent keeps editing and reruns the verdict before any further visual review, and the visual task is not considered done until a new screenshot clears the bar. When mismatches are hard to localize, pixel-diff tooling such as a pixelmatch overlay can serve as a secondary aid, but the verdict stays authoritative and the hotspots are turned into concrete differences and suggestions.

When your agent uses it

Checking a generated page against a design mockup before the next edit
Getting a pass or fail signal for visual fidelity in layout, spacing and typography
Looping on UI changes until a screenshot clears a score threshold

Example prompts

“Compare screenshots/home.png with designs/home-reference.png and give me the visual verdict.”
“Score my dashboard screenshot against these two reference images and list the differences.”
“Keep editing the landing page until the visual verdict score reaches 90.”

Requirements

A generated screenshot and at least one reference image file

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

Keep $visual-verdict as the authoritative decision.
Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a secondary debug aid to localize hotspots.
Convert pixel diff hotspots into concrete differences[] and suggestions[] updates.

What it can do on your machine

Read from SKILL.md and the folder at commit 454bae0. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are json).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Visual Verdict Screenshot QA loads about 609 tokens when it runs. Until then it costs about 21 tokens; SKILL.md has 212 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~21
When it runs · the whole SKILL.md, loaded when a task matches: ~609

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Yeachan-Heo/oh-my-claudecode at commit 454bae0, republished under its MIT licence (© Yeachan-Heo). 212 words, ~609 tokens.

Download SKILL.mdSave it as .claude/skills/visual-verdict/SKILL.md (or your agent's skills folder).

name: visual-verdict
description: Structured visual QA verdict for screenshot-to-reference comparisons
level: 2

<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-claudecode: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:

Keep $visual-verdict as the authoritative decision.
Use pixel-level diff tooling (pixel diff / pixelmatch overlay) as a secondary debug aid to localize hotspots.
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}}

Files

Just SKILL.md in skills/visual-verdict of Yeachan-Heo/oh-my-claudecode.

Open the folder on GitHubat commit 454bae0

Compare with similar skills

Visual Verdict Screenshot QA next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Visual Verdict Screenshot QA compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Visual Verdict Screenshot QA this skillYeachan-Heo/oh-my-claudecode	40k	—	~609	Automated safety check: Pass	MIT	2 days ago
Pixel Perfect ReplicationYu-369/VibeCurb	979	—	~8.7k	Automated safety check: Pass	MIT	2 mo ago
Handsontable Visual Test Demoshandsontable/handsontable	22k	—	~1.3k	Automated safety check: Pass	Custom licence	yesterday
Kc Screenshotimran31415/kube-coder	388	—	~870	Automated safety check: Notes	MIT	2 days ago
Visual QA For Web And Terminal UIscode-yeongyu/oh-my-openagent	70k	—	~9.5k	Automated safety check: Pass	Custom licence	today
Visual Diff Screenshot Comparisonkeybase/client	9.3k	—	~740	Automated safety check: Pass	BSD-3-Clause	yesterday

Similar skills

Pixel Perfect Replication
Yu-369/VibeCurb
Image-to-code replication pipeline. An agent skill from Yu-369/VibeCurb.
979 GitHub stars~8.7k tokensUpdated 2 mo ago
DatabasesAuto-check passed
Handsontable Visual Test Demos
handsontable/handsontable
Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.
22k GitHub stars~1.3k tokensUpdated yesterday
Testing & QAAuto-check passed
Kc Screenshot
imran31415/kube-coder
Capture desktop + mobile, dark + light screenshots of the kube-coder dashboard SPA for visual QA of a UI change.
388 GitHub stars~870 tokensUpdated 2 days ago
Testing & QAAuto-check: notes
Visual QA For Web And Terminal UIs
code-yeongyu/oh-my-openagent
Checks a built UI against a human-interface checklist and any reference image, pairing day and night screenshots at two screen widths.
70k GitHub stars~9.5k tokensUpdated today
Testing & QAAuto-check passed
Visual Diff Screenshot Comparison
keybase/client
Captures baseline and current screenshots of the Keybase desktop app and compares them with ImageMagick to find pixel-level regressions between branches or edits.
9.3k GitHub stars~740 tokensUpdated yesterday
Testing & QAAuto-check passed
Handsontable Visual Testing
handsontable/handsontable
Guide to Playwright visual regression tests in Handsontable: when a screenshot is justified, the tablePage fixture, naming, reg-suit comparison and demo routes.
22k GitHub stars~2.3k tokensUpdated yesterday
Testing & QAAuto-check passed

Questions about Visual Verdict Screenshot QA

What does Visual Verdict Screenshot QA do?

Compares a generated UI screenshot with reference images and returns a strict JSON verdict with a score, differences and suggested edits to drive the next iteration. You give the agent one or more reference images and the current screenshot, with an optional category hint such as a news site, social feed or dashboard. It answers with JSON only: an integer score from 0 to 100, a short verdict of pass, revise or fail, whether the screenshot matches the intended UI category, a list of concrete differences in layout, spacing, typography, colors and hierarchy, matching suggestions and a brief reasoning.

When should I use Visual Verdict Screenshot QA?

Visual Verdict Screenshot QA fits situations like: checking a generated page against a design mockup before the next edit; getting a pass or fail signal for visual fidelity in layout, spacing and typography; looping on UI changes until a screenshot clears a score threshold.

How do I install Visual Verdict Screenshot QA in Claude Code?

Run `npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a claude-code`. Or copy the skill folder (skills/visual-verdict in Yeachan-Heo/oh-my-claudecode) into .claude/skills/visual-verdict in your project. Claude Code loads it when a task matches its description.

How do I install Visual Verdict Screenshot QA in Codex?

Run `npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a codex`. Or copy the skill folder (skills/visual-verdict in Yeachan-Heo/oh-my-claudecode) into .agents/skills/visual-verdict in your project. Codex loads it when a task matches its description.

Can I use Visual Verdict Screenshot QA in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Yeachan-Heo/oh-my-claudecode --skill visual-verdict -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-verdict, .gemini/skills/visual-verdict, .github/skills/visual-verdict and .opencode/skills/visual-verdict in your project.

What does Visual Verdict Screenshot QA need to run?

SKILL.md names no scripts, command-line tools or credentials: Visual Verdict Screenshot QA is instructions for the agent only. Our summary lists: A generated screenshot and at least one reference image file.

Does Visual Verdict Screenshot QA access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Visual Verdict Screenshot QA safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Visual Verdict Screenshot QA use?

Visual Verdict Screenshot QA is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Visual Verdict Screenshot QA use?

About 609 tokens (SKILL.md is roughly 2.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Visual Verdict Screenshot QA?

Skills that share tags, products or a category with Visual Verdict Screenshot QA: Pixel Perfect Replication (Yu-369/VibeCurb, 979 stars), Handsontable Visual Test Demos (handsontable/handsontable, 22k stars), Kc Screenshot (imran31415/kube-coder, 388 stars) and Visual QA For Web And Terminal UIs (code-yeongyu/oh-my-openagent, 70k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visual Verdict Screenshot QA?

Yeachan-Heo (a GitHub user) maintains it in Yeachan-Heo/oh-my-claudecode, which has 39,751 GitHub stars. The repository holds 47 skills in this directory. The repository was last updated on October 8, 2026.

Source: Yeachan-Heo/oh-my-claudecode on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Visual Verdict Screenshot QA

Install Visual Verdict Screenshot QA

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Files

Compare with similar skills

Similar skills

Pixel Perfect Replication

Handsontable Visual Test Demos

Kc Screenshot

Visual QA For Web And Terminal UIs

Visual Diff Screenshot Comparison

Handsontable Visual Testing

More from Yeachan-Heo/oh-my-claudecode

Ask Advisor Routing

Ask Navigator

Self-Improve Evolutionary Loop

Autopilot

OMC Mode Cancellation

Hierarchical AGENTS.md Generator

Questions about Visual Verdict Screenshot QA

Install Visual Verdict Screenshot QA

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Files

Compare with similar skills

Similar skills

More from Yeachan-Heo/oh-my-claudecode

Related

Questions about Visual Verdict Screenshot QA