Skip to content
cccskills
FreePublished on GitHub

visual-verdict

Compare a UI screenshot with reference images and receive a structured JSON assessment. Get a score, pass or revision status, concrete visual differences, and suggested edits for layout, spacing, typography, colors, and visual hierarchy.

OriginalShow the original description

Structured visual QA verdict for screenshot-to-reference comparisons

Yeachan-Heo/oh-my-claudecode

Run score Not tested

See how to install

Good for

  • Checking whether an implemented screen matches its reference
  • Finding differences in spacing, typography, and colors
  • Prioritizing edits from structured visual feedback
  • Rechecking screenshots after visual changes

Files included (1)

  • SKILL.md2.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

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

  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}}

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agent-doc-discipline

FreeSummary

Write or revise instructions, specifications, tickets, and skill files so an agent can act without prior chat history. Make rules checkable, explain their reasons, define completion criteria, and keep authoritative information in one place.

  • Clarifying instructions in CLAUDE.md
  • Making specifications and tickets actionable
  • Adding completion criteria to skill procedures
Yeachan-Heo/oh-my-claudecode40.2KUpdated Oct 23, 2026

ai-slop-cleaner

FreeSummary

Simplify bloated AI-generated code by removing dead code, duplicated logic, and unnecessary layers while checking that existing behavior stays intact. Use a limited cleanup scope, verify changes with relevant checks, or request a review without edits.

  • Removing duplicate logic and unused code
  • Simplifying unnecessary wrappers without changing behavior
  • Cleaning up only a specified set of changed files
Yeachan-Heo/oh-my-claudecode40.2KUpdated Oct 23, 2026

architecture-survey

FreeSummary

Review module relationships and change history to identify structural improvements in a codebase. Receive ranked candidates with file references, suggested changes, and risks, plus a recommendation for where to start, without modifying code.

  • Reviewing architecture after a batch of changes
  • Investigating changes that touch too many files
  • Prioritizing structural improvements
Yeachan-Heo/oh-my-claudecode40.2KUpdated Oct 23, 2026

ask

FreeSummary

Send questions, review requests, or implementation tasks to a supported local AI command-line tool through one shared command. The wrapper handles provider-specific options and saves the result as a Markdown file for later reference.

  • Requesting a security review of a patch
  • Seeking UX suggestions for a user flow
  • Drafting an implementation plan for an issue
Yeachan-Heo/oh-my-claudecode40.2KUpdated Oct 23, 2026

ask-navigator

FreeSummary

Turn an unclear idea into linked decision tickets on a repository’s issue tracker. Work through one decision per session, record outcomes and dependencies, and prepare a brief defining the objective, scope, and exclusions for delivery.

  • Clarifying the destination of an early idea
  • Mapping decisions and their dependencies
  • Resuming unresolved decisions across sessions
Yeachan-Heo/oh-my-claudecode40.2KUpdated Oct 23, 2026

autopilot

FreeSummary

Turn a short product idea into working code through requirements analysis, technical planning, implementation, testing, and review. It coordinates agents across these stages, fixes detected problems, and reports assumptions that still need a human decision.

  • Building a product from a short idea
  • Creating a bookstore inventory API
  • Developing a habit-tracking command-line tool
Yeachan-Heo/oh-my-claudecode40.2KUpdated Oct 23, 2026

See all skills by Yeachan-Heo

Report a problem with this skill