What problem does it solve? Performance, code health, and accessibility gates can all pass while a token refactor, Tailwind upgrade, or stray global style silently breaks how pages look. This Skill adds a fourth CI gate that compares screenshots of built pages against committed baselines so unintended visual changes fail the build. ## Core Features & Use Cases - Native Playwright screenshot testing: Uses toHaveScreenshot with the same Playwright pin already installed for the accessibility job, adding one spec file and one CI job with no new dependencies. - CI-generated baselines: Baselines are rendered in the same CI environment that compares them (or a pinned Playwright Docker image), committed to the repo, and reviewed as PR diffs. - Determinism and flake discipline: Explicit maxDiffPixelRatio thresholds, disabled animations, self-hosted fonts, and masking of non-deterministic regions like WebGL canvases and videos. - Tool verdicts: Defaults to committed-baseline Playwright, escalates to Argos, Chromatic, or Percy (5,000 free snapshots/month each) when review UIs earn their place, and flags Lost Pixel and BackstopJS as tombstones. - Use Case: After a design token refactor, run the visual gate in GitHub Actions to confirm home, contact, and gallery pages render pixel-identically across desktop and mobile viewports before merging. ## Quick Start Add a Playwright visual regression job to my CI workflow that screenshots my built Astro pages and compares them against committed baselines.
