Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Frontend Visual QA

Audits already-rendered web, dashboard, HTML deck, and Electron UIs with real-browser journeys, inspected screenshots, and a bundled Playwright sweep to catch layout, responsive, state, and output defects.

Dev & CodingAdvanced★ 1,323⑂ 212AI score 9/10Last updated: Aug 8, 2026

What it does

  • Judges the interface the user can actually see, treating build success, DOM presence, and uninspected screenshot files as supporting signals only.
  • Enforces an evidence ladder (Level A real browser/native window → Level D source reasoning) so weak evidence never gets promoted into a strong claim.
  • Ships visual_layout_audit.mjs (Playwright) for a mechanical viewport/overflow/wrapping/media sweep, and silent_degradation_probe.mjs to catch invisible failures such as a declared-but-never-shipped font or a library class rename that silently voids whole CSS rule groups.
  • Forces you to name the correct state (logged out, empty, role-less, feature-flagged) before judging pixels — a clean screenshot of the wrong branch is invalid.
  • Defaults to audit-only: no source edits, dependency installs, rebuilds, or deploys without explicit authorization.
  • Reports findings with severity (Blocker/Major/Moderate/Minor), category, reproduction steps, cropped pixel evidence, and an explicit "not verified" list.

Who it's for

  • Frontend engineers doing a pre-release pass on rendered UI quality.
  • Teams that keep shipping "looked fine on my machine" responsive and mobile breakage.
  • Anyone maintaining dashboards/admin consoles, landing pages, HTML slide decks, maps, charts, or Electron shells.
  • Leads who want to stop agents from claiming "verified" without visual proof.

Examples

  1. Responsive sweep: "Audit the dashboard at localhost:5173 at 375, 768 and 1440px; focus on card title wrapping and clipped lower sections." → captures and actually opens each screenshot, falsifies apparent clipping against DOM geometry, and returns findings with cropped evidence.
  2. Browser output check: "Verify the Export report button really works." → clicks it in a real browser, opens the Chrome print preview and the downloaded file, and files blank-page/about:blank issues as Major.
  3. Reference parity: "Compare the current landing page against this design screenshot." → crops the same component at the same width for a scale-matched comparison and quotes deltas in CSS px, not device px.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the frontend-visual-qa folder from the GitHub repo daymade/claude-code-skills into my ~/.claude/skills/frontend-visual-qa/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/daymade/claude-code-skills.git /tmp/claude-code-skills && mkdir -p ~/.claude/skills && cp -r /tmp/claude-code-skills/frontend-visual-qa ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repository into a temp folder: git clone https://github.com/daymade/claude-code-skills.git /tmp/claude-code-skills
  3. Create your personal skills folder: mkdir -p ~/.claude/skills
  4. Copy just this skill: cp -r /tmp/claude-code-skills/frontend-visual-qa ~/.claude/skills/
  5. Confirm SKILL.md plus the scripts/ and references/ folders exist under ~/.claude/skills/frontend-visual-qa/.
  6. For the automated Level C sweep, make Playwright available in the project you are auditing: npm i -D @playwright/test && npx playwright install chromium
  7. Restart Claude Code and ask something like "run a visual QA pass on this page".
  8. Keep it in audit-only mode at first; say "fix-and-verify" explicitly when you want code changes.
View source on GitHub ↗License: MIT