Structured visual QA verdict for screenshot-to-reference comparisons
Structured visual QA verdict for screenshot-to-reference comparisons
npx skills add https://github.com/ImL1s/flutter-claude-skills --skill visual-verdictCopy and paste this command into Claude Code to install the skill
Automated UI verification loop: Marionette screenshot -> Figma reference -> pixel-diff -> difference list -> auto-fix iteration. Solves the false-positive verification problem flagged in insights reports (UI claimed fixed without actually being compared against the reference). Triggers (English): verify ui, ui compare, pixel diff, figma compare, automated ui verification, golden test fail. 自动 UI 验证：Marionette 截图 → Figma 参考图 → pixel-diff → 差异列表 → 自动修复循环。 触发关键字（中文）：verify ui、ui 对比、pixel diff、figma 对比、自动验证
Operational rules for driving Codex CLI from scripts: success-signal contract, diff-feeding semantics, worktree -C flag, and stdin vs argv. Triggers when invoking `codex exec` programmatically (not interactively) — script wrappers, ralph loops, cron pipelines, multi-CLI fan-out. Surfaces silent failure modes that exit 0 but produce no useful output. Triggers (English): codex exec, codex cli, codex review, codex rescue, codex fallthrough, agent script invocation, programmatic codex.
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
Socratic deep interview with mathematical ambiguity gating before autonomous execution
Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes
Use when partner provides a complete implementation plan to execute in controlled batches with review checkpoints - loads plan, reviews critically, executes tasks in batches, reports for review between batches
| name | visual-verdict |
| description | Structured visual QA verdict for screenshot-to-reference comparisons |
| requires-omc | true |
| level | 2 |
Compare generated UI screenshots against one or more reference images and return a strict JSON verdict that can drive the next edit iteration.
reference_images[] (one or more image paths)generated_screenshot (current output image)category_hint (e.g., hackernews, sns-feed, dashboard)Return JSON only with this exact shape:
{
"score": 0,
"verdict": "revise",
"category_match": false,
"differences": ["..."],
"suggestions": ["..."],
"reasoning": "short explanation"
}
Rules:
score: integer 0-100verdict: short status (pass, revise, or fail)category_match: true when the generated screenshot matches the intended UI category/styledifferences[]: concrete visual mismatches (layout, spacing, typography, colors, hierarchy)suggestions[]: actionable next edits tied to the differencesreasoning: 1-2 sentence summaryscore < 90, continue editing and rerun /oh-my-claudecode:visual-verdict before any further visual review pass.When mismatch diagnosis is hard:
$visual-verdict as the authoritative decision.differences[] and suggestions[] updates.{
"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."
}
verify-ui — manual screenshot comparison. Use this skill after verify-ui to quantify the diff with image-based metrics.figma-implement-design → figma-use — after implementing a Figma design, use verify-ui and visual-verdict to validate the implementation matches the reference.verify-ui-auto — after visual-verdict confirms the diff is acceptable, set up automated golden tests to prevent regressions.