---
name: playwright-visual-verification
description: Verify local browser-visible layout and styling with accessibility snapshots, screenshots, and computed-style checks using Playwright.
---

# Playwright Visual Verification

Use this skill when browser-visible behavior, layout, styling, screenshots, or computed CSS need verification.

Do not load it merely because a task mentions Playwright. For test placement, CI-only failures,
timeouts, retries, suite design, or process cleanup, load `test-layer-fit` instead.

## Local Target

- Verify local changes against localhost or the active local dev server.
- Do not verify local work against deployed URLs unless the task explicitly asks for deployed verification.
- Record the exact URL, environment, and viewport tested.

## Inspection Workflow

- Inspect the accessibility snapshot before interacting with the page.
- Use interactions from the snapshot when possible so element targeting stays intentional.
- Use computed styles for specific CSS assertions such as padding, display, color, overflow, position, and visibility.
- Capture desktop and mobile screenshots when visual behavior or responsive layout is affected.

## Reporting

- Report the tested URL and viewport sizes.
- Summarize the relevant computed-style checks instead of relying only on screenshots.
- Note any visual areas that were not verifiable locally.