Agent skill

Visual QA For Web And Terminal UIs

by code-yeongyu in code-yeongyu/oh-my-openagent

Checks a built UI against a human-interface checklist and any reference image, pairing day and night screenshots at two screen widths.

Custom licenceAuto-check passedTesting & QA

Install Visual QA For Web And Terminal UIs

skills CLI
$ npx skills add code-yeongyu/oh-my-openagent --skill visual-qa -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install code-yeongyu/oh-my-openagent visual-qa --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/code-yeongyu/oh-my-openagent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/shared-skills/skills/visual-qa .claude/skills/visual-qa && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
visual-qa
GitHub stars
70k
Token cost
~9.5k tokens
SKILL.md length
4,049 words
Files
19 (incl. scripts, references)
Skills in repo
44
Repo updated
First seen
Licence
Custom licence

At a glance

Checks a built UI against a human-interface checklist and any reference image, pairing day and night screenshots at two screen widths.

  • Works in 5 steps: Detect the surface → Capture objective reference evidence → Dispatch two read-only QA subagents in… → …
  • Checking a newly built or changed UI before considering it finished
  • SKILL.md covers Purpose and when to use, Step 1 - Detect the surface, Step 2 - Capture objective… and The checklist - every item…, plus 4 more sections
  • Runs TypeScript and JavaScript scripts from its folder; calls node and pdftoppm

What it does

This skill runs after a UI is built or changed, before calling the work finished, and covers three kinds of surfaces: pages rendered in a browser, terminal UIs rendered as text, and paginated documents such as PDFs or exported decks, where every page becomes an image since extracted text hides layout problems like a stranded block or a near-empty page.

It gathers objective evidence first — screenshots, terminal captures, or rendered pages — then runs two parallel, read-only review passes against a baseline checklist, any available reference, and the stated intent, folding both passes into one pass-or-fail verdict per checklist item. It calls out cases worth special attention, including text that may clip or wrap awkwardly, or a design that turns out to be a flat image rather than a live layout.

When your agent uses it

  • Checking a newly built or changed UI before considering it finished
  • Verifying a layout in both light and dark mode at phone and desktop widths
  • Checking a terminal UI for overflow or broken borders

Example prompts

  • “Run visual QA on this new settings page before I call it done.”
  • “Check this terminal layout for overflow at a narrow width.”
  • “Compare this page against the mockup and flag mismatches.”

Requirements

  • Node.js to run the bundled visual-qa evidence CLI

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Detect the surface
  2. Capture objective reference evidence
  3. Dispatch two read-only QA subagents in parallel
  4. Synthesize one verdict
  5. Reference-fidelity mode (when the task has a concrete visual target)

What it can do on your machine

Read from SKILL.md and the folder at commit cbd7dd2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 16 files in scripts/ (TypeScript and JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • pdftoppm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Visual QA For Web And Terminal UIs loads about 9.5k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 89 tokens; SKILL.md has 4,049 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~89
When it runs · the whole SKILL.md, loaded when a task matches
~9.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~11k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 4,049 words (~9,489 tokens).

“Verify a rendered UI against the platform baseline (the checklist below), against its reference when one exists, and against the stated intent: objective script evidence plus two parallel read-only oracle passes, synthesized into one per-item PASS/FAIL verdict. The script numbers…”

— opening of SKILL.md by code-yeongyu, Custom licence
name
visual-qa

Read the full SKILL.md on GitHub

Files

SKILL.md and 18 other files (scripts, references) in packages/shared-skills/skills/visual-qa of code-yeongyu/oh-my-openagent.

  • SKILL.md
  • AGENTS.md
  • references/browser-setup.md
  • scripts/ansi.test.ts
  • scripts/ansi.ts
  • scripts/cli.test.ts
  • scripts/cli.ts
  • scripts/east-asian-width.test.ts
  • scripts/east-asian-width.ts
  • scripts/image-diff.test.ts
  • scripts/image-diff.ts
  • scripts/png-crc.ts
  • scripts/png-decode.test.ts
  • scripts/png-decode.ts
  • scripts/png-synth.ts
  • scripts/tui-grid.test.ts
  • scripts/tui-grid.ts
  • scripts/types.ts
  • scripts/visual-qa.mjs

Open the folder on GitHubat commit cbd7dd2

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in code-yeongyu/oh-my-openagent, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Visual QA For Web And Terminal UIs next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Visual QA For Web And Terminal UIs compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Visual QA For Web And Terminal UIs this skillcode-yeongyu/oh-my-openagent70k—~9.5kAutomated safety check: PassCustom licence
Visual QAliangdabiao/Godogen127—~1.4kAutomated safety check: PassMIT
Glance TestDebugBase/glance156—~827Automated safety check: PassMIT
QA Verify Consoleopenshift-eng/ai-helpers120—~3.3kAutomated safety check: PassApache-2.0
Visual QARandallLiuXin/GodotMaker549—~1.8kAutomated safety check: PassCustom licence
Reproduce Chat Statesdifferent-ai/openwork24k—~673Automated safety check: PassCustom licence

Similar skills

  • Visual QA

    liangdabiao/Godogen

    Visual quality assurance — analyze game screenshots for defects, compare against reference, check motion in frame sequences.

    127 GitHub stars~1.4k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed
  • Glance Test

    DebugBase/glance

    Run E2E browser tests on any web application using Glance MCP.

    156 GitHub stars~827 tokensUpdated 5 mo ago
    Testing & QAAuto-check passed
  • QA Verify Console

    openshift-eng/ai-helpers

    Capture before/after screenshots of OpenShift Console PRs running against a live cluster using Puppeteer, generate visual diff comparisons, and post evidence to the PR.

    120 GitHub stars~3.3k tokensUpdated today
    Testing & QAAuto-check passed
  • Visual QA

    RandallLiuXin/GodotMaker

    Visual quality assurance: analyze game screenshots for defects, compare against reference, check motion in frame sequences.

    549 GitHub stars~1.8k tokensUpdated 20 days ago
    Testing & QAAuto-check passed
  • Reproduce Chat States

    different-ai/openwork

    Fires known chat states in the running OpenWork desktop app, such as provider errors, retries and tool steps, so you can check how each renders.

    24k GitHub stars~673 tokensUpdated today
    Testing & QAAuto-check passed
  • Handsontable Visual Test Demos

    handsontable/handsontable

    Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.

    22k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

More from code-yeongyu/oh-my-openagent

All 44 skills in this repo
  • ast-grep Structural Search

    code-yeongyu/oh-my-openagent

    Searches and rewrites code by syntax-tree shape across 25 languages with ast-grep, for codemods, structural queries and YAML lint rules, using a Python wrapper script.

    70k GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Browser Control with Omowright

    code-yeongyu/oh-my-openagent

    Drives a real browser through the omowright library, either the user's own signed-in browser or a separate browser the code launches, for forms, QA, screenshots and scraping.

    70k GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • Codex Plugin QA

    code-yeongyu/oh-my-openagent

    Tests the omo Codex plugin in an isolated CODEX_HOME with a local mock model, proving hooks fired through app-server notifications without touching ~/.codex.

    70k GitHub stars~1.9k tokensUpdated today
    Auto-check passed
  • Coding Agent Session Finder

    code-yeongyu/oh-my-openagent

    Finds, reads and reconstructs past coding-agent sessions across Codex, Claude, OpenCode, Senpi and many other local agent logs.

    70k GitHub stars~2.8k tokensUpdated today
    Auto-check passed
  • LSP Setup

    code-yeongyu/oh-my-openagent

    Detects which languages a project uses, installs the matching language server, writes its config and checks it with a real call so diagnostics and go-to-definition work.

    70k GitHub stars~1.4k tokensUpdated today
    Auto-check: notes
  • OpenCode QA Toolkit

    code-yeongyu/oh-my-openagent

    Tests the opencode coding agent itself: its CLI, server, plugin hooks and events, the terminal UI under tmux, and its SQLite session database, using tested helper scripts.

    70k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

Questions about Visual QA For Web And Terminal UIs

What does Visual QA For Web And Terminal UIs do?

Checks a built UI against a human-interface checklist and any reference image, pairing day and night screenshots at two screen widths. This skill runs after a UI is built or changed, before calling the work finished, and covers three kinds of surfaces: pages rendered in a browser, terminal UIs rendered as text, and paginated documents such as PDFs or exported decks, where every page becomes an image since extracted text hides layout problems like a stranded block or a near-empty page.

When should I use Visual QA For Web And Terminal UIs?

Visual QA For Web And Terminal UIs fits situations like: checking a newly built or changed UI before considering it finished; verifying a layout in both light and dark mode at phone and desktop widths; checking a terminal UI for overflow or broken borders.

How do I install Visual QA For Web And Terminal UIs in Claude Code?

Run `npx skills add code-yeongyu/oh-my-openagent --skill visual-qa -a claude-code`. Or copy the skill folder (packages/shared-skills/skills/visual-qa in code-yeongyu/oh-my-openagent) into .claude/skills/visual-qa in your project. Claude Code loads it when a task matches its description.

How do I install Visual QA For Web And Terminal UIs in Codex?

Run `npx skills add code-yeongyu/oh-my-openagent --skill visual-qa -a codex`. Or copy the skill folder (packages/shared-skills/skills/visual-qa in code-yeongyu/oh-my-openagent) into .agents/skills/visual-qa in your project. Codex loads it when a task matches its description.

Can I use Visual QA For Web And Terminal UIs in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add code-yeongyu/oh-my-openagent --skill visual-qa -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-qa, .gemini/skills/visual-qa, .github/skills/visual-qa and .opencode/skills/visual-qa in your project.

What does Visual QA For Web And Terminal UIs need to run?

Going by SKILL.md and its folder, Visual QA For Web And Terminal UIs needs TypeScript and JavaScript for the scripts in its folder and the command-line tools its instructions call (node and pdftoppm). Our summary lists: Node.js to run the bundled visual-qa evidence CLI.

Does Visual QA For Web And Terminal UIs access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Visual QA For Web And Terminal UIs safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Visual QA For Web And Terminal UIs use?

Visual QA For Web And Terminal UIs has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Visual QA For Web And Terminal UIs use?

About 9.5k tokens (SKILL.md is roughly 38k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.3k tokens, read only when the agent opens those files.

What are the alternatives to Visual QA For Web And Terminal UIs?

Skills that share tags, products or a category with Visual QA For Web And Terminal UIs: Visual QA (liangdabiao/Godogen, 127 stars), Glance Test (DebugBase/glance, 156 stars), QA Verify Console (openshift-eng/ai-helpers, 120 stars) and Visual QA (RandallLiuXin/GodotMaker, 549 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visual QA For Web And Terminal UIs?

code-yeongyu (a GitHub user) maintains it in code-yeongyu/oh-my-openagent, which has 69,850 GitHub stars. The repository holds 44 skills in this directory. The repository was last updated on October 7, 2026.

Source: code-yeongyu/oh-my-openagent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.