Agent skill · design visual · code-yeongyu
visual-qa
Runs rigorous visual QA across web, terminal, and paginated surfaces: an Apple HIG-based checklist, paired light/dark captures at phone and desktop widths, screenshot evidence, and a per-item PASS/FAIL verdict. Use for any UI build or change, or when asked whether a page, component, or TUI looks right or follows the platform's design guidelines.
Why this skill is useful
Adds specialized scripts for visual QA and evidence capture that the AI wouldn't reliably generate on its own.
What it needs
Requires node installed locally. About 13k tokens when loaded. Last updated 2026-08-07. 67,387 stars on the source repository.
What this skill does
Visual QA - Dual-Oracle Web and TUI Verification Verify a rendered UI against the platform baseline (the checklist below), against its brief and its reference when they exist, and against the stated intent: objective script evidence plus two parallel read-only oracle passes, synthesized into one per-item PASS/FAIL verdict inside a bounded review budget. The script numbers focus the reviewers. They are not the verdict. Purpose and when to use Use after you build or change any UI, before calling it done. Covers web/page UIs, TUI/terminal UIs, and paginated documents. Use with or without a reference: a mock, a baseline, or a source site when one exists; otherwise the checklist is the reference. A change to an existing surface runs Before/after mode (Step 6), which starts BEFORE the first edit. Also when you suspect a regression, when CJK (Korean/Japanese/Chinese) text may clip, misalign, or wrap awkwardly, when a claimed design system might actually be a flat image, or when a terminal layout may overflow or its borders may break. Skip when there is no rendered surface (pure backend or library logic with no visual or terminal output). For broad post-implementation review use review-work; this skill is the visual specialist. In the commands below, $SKILLDIR is this skill's own directory (the folder containing this SKILL.md). The bundled Node evidence CLI lives at scripts/visual-qa.mjs inside it; the TypeScript source in scripts/cli.ts is for development. Step 1 - Detect the surface Web/page UI: renders in a browser (HTML/CSS/JS, components, canvas, SVG). Evidence is screenshots. TUI/terminal UI: renders as text in a terminal (box-drawing, panes, status lines, REPL/TUI apps). Evidence is terminal captures. Paginated document: renders as ordered pages (PDF report, printed HTML, exported deck). Evidence is every page rendered to an image - pdftoppm -png -r 150 <file>.pdf <prefix> or the pipeline's own renderer. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills code-yeongyu/visual-qa