# Playwright Visual QA

> Validates rendered UI with browser or Playwright screenshots after implementation, redesign, responsive changes, or visual regressions.

- Skill: `mesteriis/playwright-visual-qa` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add mesteriis/playwright-visual-qa`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mesteriis/playwright-visual-qa/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Mesteriis (https://skillmd.com/u/mesteriis)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/mesteriis/playwright-visual-qa

---


# Playwright Visual QA

Verify the rendered UI, not just the build.

## Workflow

1. Read `ui-qa`.
2. Start or identify the local app URL.
3. Capture desktop and mobile screenshots.
4. Compare against the accepted concept, Figma frame, screenshot, or existing
   baseline.
5. Check layout, copy, typography, colors, assets, icons, states, and overflow.
6. Fix material drift when implementation is in scope.

## Output

- URL or app entrypoint
- screenshots/viewports checked
- reference used
- mismatches found
- fixes made or recommended
- remaining deviations

## Rule

Functional tests do not replace visual QA. If screenshots cannot be captured,
state the blocker.