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-qaOr 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-qaSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- daymade/claude-code-skills (all skills from this repository)
- Path
- frontend-visual-qa/SKILL.md
- Branch
- main
- Updated
- 2026-09-20
Related skills
- 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.
- pentesting-with-aws-security-agent — Run an AWS Security Agent penetration test against a live web application — registers and verifies the target domain.
- review-walkthrough — Generates an interactive HTML walkthrough for reviewing code changes. Use only when explicitly called.
- running-release-tests — Run automated release testing (UI or API) via the AWS DevOps Agent using a pre-configured test profile.
- stitch::generate-design — Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP.