frontend-visual-qa

An agent skill by daymade, from daymade/claude-code-skills. Tags: accessibility, testing, ui-ux, visual-art, web.

What it does

Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find typography, wrapping, overlap, overflow, responsive, route, overlay, map, transient-state, data-visualization, browser-output, file-dialog, PDF/print, or Electron-shell defects, or to compare a rendered artifact with a visual reference. Do not use for greenfield UI design, extracting a design system from screenshots, general QA-program setup, or nonvisual code debugging.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add daymade/claude-code-skills --skill frontend-visual-qa

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/daymade/claude-code-skills
cp -r claude-code-skills/frontend-visual-qa ~/.claude/skills/frontend-visual-qa

Safety box score

Grade C, moderate risk: 37 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This is a browser-driven visual QA skill that launches Playwright-based audits, writes screenshots/reports, and can also run a GET-based delivery verifier. Its main blast radius is network access to target origins, browser/session interaction, and evidence files on disk; it does not request sudo or system-wide changes, but it does include some unreadable assets/scripts in the package.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	2 (moderate)	It explicitly runs bundled Node/Python tooling (`node <skill-root>/scripts/visual_layout_audit.mjs`, `uv run --no-project python scripts/verify_delivery.py`) and the tests spawn child processes, so the skill executes shipped code.
Network access	2 (moderate)	The workflows open arbitrary URLs and `scripts/verify_delivery.py` performs GET requests and same-origin redirect checks, with `--header-env` allowing request headers to be sent.
Filesystem reach	1 (low)	The skill writes screenshots and JSON reports to a temporary run directory and the tests create/delete evidence files, but the documented default is bounded to temp/project paths.
Secrets & credentials	1 (low)	It explicitly supports `--header-env` and auth/session guidance, so caller-provided credentials or active browser sessions may be handled, though it does not read secret stores directly.
Privilege & persistence	0 (none)	No sudo, global install, service registration, shell-startup editing, or other privilege-changing step is requested.
Instruction hijack surface	0 (none)	The text contains workflow and reference-loading instructions, but no prompt-injection style requests to ignore rules, hide actions, or follow remote instructions.
Irreversible actions	2 (moderate)	The skill can trigger browser outputs (download/share/clipboard/file picker/print/PDF) and, in fix-and-verify mode, mutate source/target under authorization.
Transparency	2 (moderate)	A binary asset and several central files were not inspectable in this review, so some of the skill's behavior remains opaque.

Before installing

Read `SKILL.md` and confirm you want Playwright/browser automation plus the GET-based delivery verifier.
Inspect `scripts/verify_delivery.py` and decide whether `--header-env`-supplied credentials are acceptable in your environment.
Open the unreadable/binary items (`evals/files/static-review.png`, `scripts/visual_layout_audit.mjs`, `scripts/silent_degradation_probe.mjs`) in the repo before trusting the package.
Run the audit in a scratch profile first, with no secrets in your environment, and confirm the output directory is disposable.

Rated 2026-10-19 by an automated review of 34 files from the skill's repository.

Source

Repository: daymade/claude-code-skills (all skills from this repository)
Path: frontend-visual-qa/SKILL.md
Branch: main
Updated: 2026-09-20

antfu-design — antfu-style design conventions, broadened.
mobile-native — Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed.
web-design-guidelines — Review UI code for Web Interface Guidelines compliance.
web-design-guidelines — Review UI code for Web Interface Guidelines compliance.
cro — When the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages.
Make Bot UI — Use when building a custom UI (page, dashboard, buttons) that should wake a Grok Bot over a webhook, when the user must provide a webhook sender key.