Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Visual QA (Web & TUI Verification)

After any UI change, this skill captures fresh evidence, runs pixel/column diffs, then dispatches two parallel read-only reviewers to reach a single good/bad verdict.

Design & UIAdvanced★ 67,531⑂ 5,507AI score 9/10Last updated: Aug 9, 2026

What it does

  • Detects the surface under test — web/page UI (screenshots), TUI/terminal UI (terminal captures), or both — and applies the matching capture track.
  • Runs a bundled Node CLI (scripts/visual-qa.mjs): image-diff returns dimension match, diffRatio, similarityScore, alpha-channel integrity and ranked grid hotspots; tui-check returns maxWidth, overflow lines, border misalignment and wide-character columns.
  • Requires two read-only subagents dispatched in parallel. Pass A audits whether the UI is a real token-driven design system (not a pasted image or one-off hardcoded mock), whether features actually work, responsive/resize behavior, alpha handling and "slop animation". Pass B opens the screenshots directly for pixel-region fidelity plus rigorous CJK line-break/clipping checks.
  • Enforces discipline the way a human QA lead would: enumerate and capture every page (no sampling), validate capture hygiene, reject stale artifacts, tag findings [product] vs [evidence], and loop until an independent reviewer PASSes with no blockers on a complete fresh capture set.
  • Adds a reference-fidelity mode for clone / Figma-to-code tasks that demands both a pixel-compare oracle and a code-level design-system oracle to approve the same build.

Who it's for

  • Frontend and design-system engineers, and anyone rebuilding a mock, Figma file or existing site pixel-for-pixel.
  • Teams shipping Korean/Japanese/Chinese UI that keeps orphaning particles, splitting phrases, or clipping descenders.
  • CLI/TUI authors who need box-drawing alignment and wide-character width verified.
  • Anyone who wants to stop an agent from self-certifying "UI done".

Examples

  1. Landing page built from a Figma export: capture reference and actual at the same viewport, run image-diff, and have both oracles explain the top-right header hotspot from pixels and source together.
  2. A 40-slide deck or multi-route app: enumerate all pages, capture every one, and tell the reviewer the page count so skipped screens are caught.
  3. A Node TUI dashboard: render through a real pty into xterm.js, then tui-check --cols 80 flags line 3 overflowing by two columns and borders breaking at wide-char columns 12–13.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/HEAD/packages/shared-skills/skills/visual-qa/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

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.

Install with a command instead

git clone https://github.com/code-yeongyu/oh-my-openagent.git && mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/shared-skills/skills/visual-qa ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal in a scratch directory.
  2. Clone the repository: git clone https://github.com/code-yeongyu/oh-my-openagent.git
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r oh-my-openagent/packages/shared-skills/skills/visual-qa ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/visual-qa — you should see SKILL.md and scripts/visual-qa.mjs.
  6. Confirm Node.js is installed (node -v); the evidence CLI runs on Node.
  7. If you have no browser capture tooling, install one: npm install -g agent-browser && agent-browser install, or use your project's Playwright setup.
  8. Restart Claude Code and ask something like "run visual QA on this page" to trigger the skill.
  9. Note: the TUI capture example calls a script that lives in the original repo root. In other projects, recreate the "real pty → xterm.js → PNG" pattern yourself, or just feed a plain-text terminal capture to tui-check.
View source on GitHub ↗License: NOASSERTION