본문으로 건너뛰기
cccskills
무료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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Structured visual QA verdict for screenshot-to-reference comparisons

Yeachan-Heo/oh-my-claudecode
설치 방법 보기

이럴 때 유용합니다

  • 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

포함된 파일(1)

  • SKILL.md2.4 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

agent-doc-discipline

무료

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-claudecode4만2026년 10월 22일 업데이트

ai-slop-cleaner

무료

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-claudecode4만2026년 10월 22일 업데이트

architecture-survey

무료

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-claudecode4만2026년 10월 22일 업데이트

ask

무료

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-claudecode4만2026년 10월 22일 업데이트

ask-navigator

무료

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-claudecode4만2026년 10월 22일 업데이트

autopilot

무료

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-claudecode4만2026년 10월 22일 업데이트

Yeachan-Heo의 스킬 모두 보기

이 스킬의 문제 신고