visual-qa

MUST USE after building/changing any UI or when asked whether a page, component, or TUI looks right. Rigorous visual QA across web/page and terminal UIs. Prefer browser:control-in-app-browser for unauthenticated browser/page QA in Codex, then Playwright/agent-browser/dev-browser. Captures screenshot/TUI evidence with bundled diff scripts, runs design-system/functional and visual-fidelity/CJK reviewer passes, then synthesizes a good/bad verdict. Triggers: visual QA, screenshot/pixel diff, UI looks wrong, reference fidelity, design system check, responsive check, CJK text clipping, TUI alignment, box-drawing drift.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body delivers highly actionable, well-sequenced guidance with strong validation and feedback loops, but it is verbose and monolithic for its token budget. Tightening repeated phrasing and moving the large inline reviewer prompt templates into reference files would improve both conciseness and progressive disclosure.

Suggestions

Remove the three repeated 'If a code block below conflicts with this section, this section wins' lines (state the precedence rule once near the top) and trim the Codex tool-translation table to the essential mappings.

Extract the two large Pass A / Pass B oracle prompt templates (and the Step 5 clone-fidelity prompt) into reference files (e.g. references/pass-a-prompt.md) and link to them, leaving only the field-by-field checklists inline.

Condense over-elaborated paragraphs in Step 2 (e.g. motion/interaction capture) to bullet form so every token earns its place without losing the actionable detail.

Dimension	Reasoning	Score
Conciseness	Mostly efficient and specific, but padded: the phrase 'If a code block below conflicts with this section, this section wins' repeats three times, the Codex tool-translation table is large, and several paragraphs over-elaborate points Claude already grasps. Not 3 because tokens could be trimmed without losing clarity; not 1 because the core is procedural and skill-specific rather than generic concept explanation.	2 / 3
Actionability	Fully executable commands ('node "$SKILL_DIR/scripts/visual-qa.mjs" image-diff <reference.png> <actual.png>', tui-check invocations), concrete JSON field names (diffRatio, similarityScore, hotspots[], wideCharColumns[]), and complete copy-paste reviewer prompt templates. Not 2 because guidance is concrete and ready to run, not pseudocode or abstract direction.	3 / 3
Workflow Clarity	Clear Step 1-5 sequence with explicit validation checkpoints ('Evidence must be fresh', 'Capture hygiene - validate before dispatching reviewers') and a hard-stop completion gate with feedback loops (fix source -> re-capture touched pages -> dispatch FRESH reviewer; repair capture pipeline for [evidence] findings). Not 2 because validation and error-recovery loops are explicit, not implicit.	3 / 3
Progressive Disclosure	References are well-signaled and one level deep (scripts/visual-qa.mjs, scripts/cli.ts, references/agent-browser-setup.md, all real files), but the SKILL.md is a ~355-line monolith with two large inline oracle prompt templates (~100 lines) and a Codex-compatibility block that could live in separate reference files. Not 3 because substantial content that could be split out remains inline; not 1 because references that exist are clearly signaled and not deeply nested.	2 / 3
	Total	10 / 12 Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is strong: third-person voice, concrete actions, explicit trigger guidance, and a well-scoped niche that distinguishes it from generic review skills. It cleanly answers both what the skill does and when to use it.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions: 'Captures screenshot/TUI evidence with bundled diff scripts, runs design-system/functional and visual-fidelity/CJK reviewer passes, then synthesizes a good/bad verdict.' Not 2 because it enumerates several distinct specific actions rather than naming only a domain plus a few.	3 / 3
Completeness	Explicitly answers both what (rigorous visual QA across web/page and terminal UIs with diff scripts and dual reviewer passes) and when ('MUST USE after building/changing any UI' plus a 'Triggers:' clause). Not 2 because the 'when' is explicit, not merely implied.	3 / 3
Trigger Term Quality	Good coverage of natural user terms in the explicit 'Triggers:' list (visual QA, screenshot/pixel diff, UI looks wrong, CJK text clipping, TUI alignment, box-drawing drift) plus 'when asked whether a page, component, or TUI looks right.' Not 2 because it covers many common phrasings a user would actually say.	3 / 3
Distinctiveness Conflict Risk	Clear niche (visual QA of rendered web/page and TUI surfaces) with distinct triggers unlikely to fire for unrelated skills. Not 2 because the scope is narrow and the triggers are specific to visual verification rather than overlapping with general review skills.	3 / 3
	Total	12 / 12 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: code-yeongyu/lazycodex
Path: plugins/omo/skills/visual-qa/SKILL.md
Commit: 895b70c

Reviewed: 4 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.