skills.rest
KasimKaizer
KasimKaizerCOMMUNITY
Explore all skills by this author →
GitHub

visual-qa

Verifies rendered web, TUI, and document UIs against intent using screenshot diffs and dual reviewer passes.

1|Updated Jan 27, 2025
Search Tags:#design system#UI testing#TUI#CJK#visual QA#screenshot diff#pixel comparison
One-click install
npx skills add https://github.com/KasimKaizer/nix-darwin-config --skill visual-qa-kasimkaizer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-qa
Source: https://github.com/KasimKaizer/nix-darwin-config/tree/main/modules/home/agents/skills/visual-qa
Command: npx skills add https://github.com/KasimKaizer/nix-darwin-config --skill visual-qa-kasimkaizer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? UI changes often ship with visual regressions, broken layouts, clipped CJK text, or faked mock-only implementations that self-review misses. This Skill enforces rigorous, evidence-based visual verification before any UI is called done. ## Core Features & Use Cases - Objective evidence capture: Runs bundled Node scripts for pixel-level PNG image diffs (diffRatio, similarityScore, hotspots) and TUI width/border/wide-character checks, producing structured JSON. - Dual independent review passes: Dispatches a design-system/functional integrity advisor and a visual-fidelity/CJK-precision reviewer in parallel, then synthesizes one good/bad verdict with a completion gate that loops until an independent PASS on fresh captures. - Reference-fidelity mode: For clone-this-site or Figma-to-code tasks, adds mandatory pixel-perfect design-compare and code-level design-system fidelity verifications. - Use Case: After rebuilding a landing page from a Figma export, capture same-viewport screenshots, run the image-diff script, dispatch both reviewer passes, and loop fixes until the page matches the target region by region. ## Quick Start Ask the agent to run visual QA on the UI you just built, for example: verify this page matches the reference mockup and check for layout or CJK text issues.

Frequently Asked Questions about visual-qa

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visually verify a UI after building or changing it?▼

Capture reference and actual screenshots at the same viewport, run the bundled image-diff script for diffRatio and hotspots, then dispatch two independent read-only reviewer passes and synthesize one verdict. Loop fixes until a reviewer passes on fresh captures.

How to check a TUI for width overflow and border misalignment?▼

Capture the terminal output as a raw ANSI stream, render a true-color screenshot with freeze, and run the tui-check command with the expected column count. It reports maxWidth, overflow lines, border misalignment, and wide-character columns.

Does visual QA work for CJK text rendering issues?▼

Yes, the reviewer pass specifically inspects Korean, Japanese, and Chinese text for orphaned particles, split phrases, broken citations, clipped descenders, and wide-character column drift in TUIs. These findings are blocking regardless of similarity score.

Can I use this for cloning a website or Figma design?▼

Yes, reference-fidelity mode adds two mandatory verifications: a pixel-perfect design-compare reviewer and a code-level design-system fidelity review. The task is not done until both confirm structure, tokens, and design match the target.

Why is a high similarity score not enough to pass visual QA?▼

The diff script only quantifies pixels and cannot judge whether the UI is a real component tree, whether features work, or whether intent was met. A 97/100 score can still hide a pasted-image fake or broken interaction, so independent reviewer passes decide the verdict.

When should I not use visual QA?▼

Skip it when there is no rendered surface, such as pure backend or library logic with no visual or terminal output. For broad post-implementation review of non-visual code, use a general code review skill instead.

Related Skills

Explore More Software Engineering Skills→
humanerd-drewhumanerd-drew
2

designer

Create UI/UX mockups, SVG assets, and design documentation.

Official
Intermediate
zb-sszb-ss
1

Review phase procedures - verdict rules, issue format, re-review protocol, zero-tolerance policy

Enforce zero-tolerance PASS/FAIL verdicts with structured ISSUE reporting on changed files.

Official
Advanced
izzoaizzoa
22

ss-verify

Inspect rendered browser screenshots for visual defects in layout, typography, contrast, and spacing.

Community
Advanced
MathiasPaulenkoMathiasPaulenko

webdriverio

Automate end-to-end web and mobile tests with WebdriverIO.

Community
Advanced