Agent skill · software engineering · daymade
frontend-visual-qa
Audits rendered UI and specific task/object-link handoffs; excludes ordinary source citations alone. Audits already-rendered UI and Markdown/Obsidian image layout — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep. Use after UI implementation to find typography, overflow, responsive, routing, data-viz, browser-output, or native-shell defects, or to compare a render against a reference. Not for greenfield UI design (use ui-designer) or QA-program setup (use qa-expert).
Why this skill is useful
Adds specific auditing procedures and profiles for frontend visual quality assurance that the AI wouldn't reliably generate on its own.
What it needs
About 11k tokens when loaded. Last updated 2026-08-07. 1,320 stars on the source repository.
What this skill does
Frontend Visual QA Audit the interface the user can actually see. Treat build success, DOM presence, and uninspected screenshot files as supporting signals, never as visual proof. Default to audit-only. Do not edit implementation, add tests, install dependencies, or update snapshots unless the user explicitly asks to fix or change the UI. Permission to fix source does not authorize rebuilding, restarting, or deploying any target. Scope And Routing Use this skill only after a rendered artifact exists. Select the smallest audit profile that covers the request: core visual — composition, typography, spacing, wrapping, clipping, images; responsive — breakpoints, reflow, mobile alternatives, scroll ownership; state and journey — conditional branches, transitions, recovery, routes; browser output — download, share, clipboard, popup, file dialog, print, PDF; native shell — Electron or hybrid chrome, permissions, drag regions, IPC UI; page contract — dashboard/admin, landing/deck, design-system artifact, browser tool/game, map/GIS, or review tool; reference parity — comparison with a named screenshot, product, or tier; data visualization — chart hierarchy, tokens, semantics, and accessibility. For a specific task/object link handoff, select state and journey for that destination, including authoritative machine and run/job identity when titles repeat. Keep the audit bounded to the promised destination. For an illustrated spreadsheet or fill-in grid, also read grid image forms. Judge recognizable thumbnails, readable labels and usable entry fields together; a visible-row target alone does not establish readability. For a website/document converted to Markdown, or an illustrated transcript/note consumed in Obsidian or another named reader, load references/markdown-reader-handoff.md before judging figure readability. Compare the complete source figure with its actual document reading canvas, including HTML captions and SVG/CSS dependencies. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daymade/frontend-visual-qa