skills.rest
code-yeongyu
code-yeongyuCOMMUNITY
Explore all skills by this author →
Website𝕏@q_yeon_gyu_kimGitHub

visual-qa

Identify visual fidelity gaps between intended design and rendered UI.

3.2k|198|Updated May 25, 2026
Search Tags:#ui#qa#diff#screenshot#design-system#tui#visual
One-click install
npx skills add https://github.com/code-yeongyu/lazycodex --skill visual-qa-code-yeongyu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-qa
Source: https://github.com/code-yeongyu/lazycodex/tree/main/plugins/omo/skills/visual-qa
Command: npx skills add https://github.com/code-yeongyu/lazycodex --skill visual-qa-code-yeongyu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Rigorous visual QA is essential to ensure UI outputs match design intent across web and terminal interfaces, catching regressions before release.

Core Features & Use Cases

  • Dual-Oracle Pass: runs two read-only QA passes (design-system integrity and visual fidelity; CJK precision) and synthesizes a verdict.
  • Web and TUI support: captures screenshots for web and terminal captures for TUI.
  • Image diff + hotspot reporting: computes diffs, highlights hotspots, and generates a structured verdict.
  • Operates after UI builds or changes to verify visual correctness and design-system conformance.

Quick Start

Run visual QA on the latest UI build and generate the pass/fail verdict.

Frequently Asked Questions about visual-qa

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

FAQPage Schema
How do I perform visual QA to identify UI regressions after a build?▼

Visual QA after a UI build captures screenshots and terminal captures to compute image diffs, highlight hotspots, and generate a structured pass/fail verdict with actionable recommendations.

What is the best way to verify design-system conformance in a rendered UI?▼

Verifying design-system conformance involves running a dual-Oracle pass that checks visual fidelity and design integrity, producing a synthesized verdict with image diffs and reference captures.

Can I automate visual diff testing for both web and terminal interfaces?▼

Yes, visual diff testing supports both web and TUI contexts by capturing web screenshots and terminal captures, then computing diffs to highlight hotspots and report visual fidelity gaps.

How does visual QA handle CJK precision in UI rendering?▼

Visual QA handles CJK precision by applying a dedicated read-only QA pass during the dual-Oracle process to synthesize a verdict ensuring accurate rendering of complex character sets.

What evidence does a visual fidelity gap report include?▼

A visual fidelity gap report includes image diffs, terminal diffs, and reference captures, alongside structured results containing hotspots, a summary, and actionable recommendations.

Related Skills

Explore More Design & Creative Skills→
vijaykpatelvijaykpatel

before-and-after

Capture before/after screenshots from two URLs or image paths.

Community
Intermediate
CarbonTailsCarbonTails

wayfinder

Organize complex workflows into decision tickets on an issue tracker.

Official
Advanced
ambroviaambrovia

design-critique

Evaluate UI design variants against a multi-dimensional rubric for design system token adherence.

Official
Advanced
alvarettoalvaretto
1

Comparación Visual Inteligente

Compare generated images against originals and report visual differences.

Community
Advanced