Visual QA (Dual-Oracle UI Verification)

What it does

After you build or change any UI, this skill proves whether it actually looks and behaves right instead of self-certifying.

• Surface detection: routes work into web/page, TUI/terminal, or reference-fidelity (clone/Figma/mockup) capture tracks — or both when a change touches each.
• Objective evidence: enumerates every page, tab, modal state, breakpoint and scroll position and captures all of them (a 40-slide deck means 40 captures), then runs the bundled Node CLI for image-diff JSON (diffRatio, similarityScore, hotspots, alphaChannelIntact) or tui-check JSON (maxWidth, overflowLines, borderMisaligned, wideCharColumns). It also enforces capture hygiene and freshness so stale or corrupt artifacts never pass.
• Two parallel oracles: Pass A audits design-system reality (tokens and reusable primitives vs. hardcoded one-offs or a pasted background image) and whether features truly work; Pass B opens the screenshots and grades pixel fidelity plus CJK line-breaking, clipping and wide-char drift.
• Motion evidence: hover/focus/scroll transitions must be captured as rest, mid-transition and settled frames; "the pixels differ because it animates" is explicitly not an excuse.
• Hard completion gate: not done until a fresh independent reviewer returns PASS with zero BLOCKING findings on a complete, freshly captured set of the current build; findings are tagged [product] vs [evidence] so the loop repairs the right thing.

Who it's for

• Engineers cloning sites or converting Figma/AI mockups into code who need region-by-region fidelity
• Product teams shipping Korean/Japanese/Chinese copy where orphaned particles and clipped descenders slip through
• CLI/TUI authors who care about box-drawing alignment and 2-cell wide characters
• Anyone who wants to forbid agent self-review before a "done" claim

Examples

1. Landing-page clone: capture reference and actual at the same viewport, run image-diff; a 97 similarity score with a top-right header hotspot points straight at a spacing/shadow token mismatch to fix.
2. Korean dashboard QA: Pass B inspects every page screenshot, flags headings breaking as 에이전트 오케스트 / 레이션 as REVISE, and you fix the wrapping rules before shipping.
3. TUI regression check: render the real pty through an xterm.js web terminal to PNG, then tui-check --cols 80 catches line 3 overflowing by 2 columns and borders misaligned at wide-char columns 12–13.

Install the skill I found on Claude Skill Mart.
Copy the packages/shared-skills/skills/visual-qa folder from the GitHub repo code-yeongyu/oh-my-openagent into my ~/.claude/skills/visual-qa/.
When it's done, tell me in one line what this skill can do.