Frontend Visual QA Skill: Audit Rendered UI

What is the frontend-visual-qa skill?

A screenshot nobody opened counts as no evidence at all. That blunt stance runs through this skill, which treats build success, DOM presence and unviewed image files as supporting signals and never as visual proof.

It is meant for the stage after implementation. The description says it audits web apps, decks, dashboards, design systems and Electron or native apps through real browser or app journeys and a Playwright sweep.

The four evidence levels

• Level A is a real visible browser or native window, driven through the user journey.
• Level B is browser DevTools or a project E2E or Playwright run with representative data.
• Level C is a fresh headless sweep from the bundled script, good for overflow, wrapping and images.
• Level D is source, lint, build or unit tests, which count only as hypotheses.
• A lower level may never be promoted into a stronger claim, such as using an empty state run to verify a populated one.

What an audit returns

1. A scope contract naming the artifact, actor, job, target, state, viewports and authorization.
2. A verification status of verified, partial or blocked.
3. Findings tied to visible evidence, with impact, state, viewport and reproduction.
4. A list of what was exercised and what remains unverified.

Who the frontend-visual-qa skill is for

Best for

• Checking a finished page for typography, overflow, responsive, routing, data visualization, browser output or native shell defects. ui-screenshots is a related skill for capture work.
• Comparing a render against a reference screenshot, product or quality tier.
• Release reviews where you need to know exactly what was and was not verified. For a second reviewer, try web-design-reviewer.

Not for

• Greenfield design. The description sends that work to ui-designer, and QA program setup to qa-expert.
• Debugging logic, data or backend code that produced no visible defect.
• Making edits by default. It will not change code, add tests, install packages or update snapshots unless you ask. For broader scoring, see web-quality-audit.

Use it with UiChemy

After UiChemy converts a design into a WordPress page, the live result is a rendered artifact. Point the skill at that page, name the viewports and state, and let it report findings. Then adjust in Composer. Click Get Started.

How to install Frontend Visual QA Skill: Audit Rendered UI

git clone https://github.com/daymade/claude-code-skills.git

1. Clone the repository

   Run git clone https://github.com/daymade/claude-code-skills.git. The README also documents /plugin marketplace add daymade/claude-code-skills inside Claude Code and a curl install.sh script as install routes.

2. Copy the skill folder

   Copy the frontend-visual-qa folder from the clone into the place where your agent loads skills. Keep the references, evals and assets folders with SKILL.md, because it links to them.

3. Check the prerequisites

   The description says the skill drives real browser journeys and a Playwright sweep, so your agent needs a browser it can drive, and ideally a visible one for the strongest evidence level.

Check that it loaded

Ask your agent to audit a rendered page for overflow and responsive defects. With the skill loaded it should first write a scope contract, name the evidence level for each claim and end with verified, partial or blocked.

Read the official instructions on GitHub

Key features

• Audit only by defaultThe agent does not edit the implementation, add tests, install dependencies or update snapshots unless you explicitly ask for a fix. Permission to fix source does not authorize rebuilding or deploying.
• Eight audit profilesCore visual, responsive, state and journey, browser output, native shell, page contract, reference parity and data visualization. The agent selects the smallest profile that covers the request.
• Evidence ladderLevels A to D separate real windows, DevTools runs, headless sweeps and source reading, so each claim is only as strong as its evidence.
• Scope contractA written, falsifiable contract names the artifact, actor, target identity, conditional state, viewports, reference, authorization and the pass condition before any pixels are judged.
• State before pixelsLogged out, empty, permission denied, seeded and loading branches can look like different products, so the agent must prove the correct state first.
• Reproducible sweepsA scripted sweep needs a fixture, required rendered markers or a deep link that restores the state. Otherwise it is labeled a fresh session diagnostic and not a pass.
• Reference parityWhen the goal is to match a screenshot or product, the first act is a measured structural inventory of the reference, followed by a per relationship diff.
• Dead click detectionA pointer cursor, hover style or click badge cannot verify that a click does anything. Only triggering it confirms the handler.
• Honest verdictsMissing evidence is reported as partial or blocked, instead of lowering the real objective to whatever was easiest to collect.
• Bundled references and evalsReference notes cover auth and environment traps, browser driving traps, data visualization audits and a history derived checklist, plus eval fixtures.

Frequently asked questions