What this prompt does
This prompt builds a visual regression testing pipeline for a [framework] app using [vrt_tool]. It captures screenshots of [page_count] key pages at your [breakpoints], compares them against approved baselines with a [threshold]% pixel-difference tolerance, masks dynamic content (dates, avatars, animations) so it does not cause false diffs, generates a side-by-side diff report, integrates with [ci_tool] to run on every PR, supports an approval workflow for new baselines, adds Storybook component-level tests, and organises snapshots by page and viewport.
The structure works because it catches the layout breakage that unit tests never see. Small CSS changes can silently shift a dashboard, and pixel comparison surfaces exactly that. The masking requirement is what keeps baselines trustworthy instead of noisy — without it, a changing timestamp would flag a failure every run. The [page_count], [breakpoints], and [threshold] variables tune sensitivity to what the UI actually needs to hold.
When to use it
- You ship UI where small CSS changes can quietly break layouts.
- You want unintended visual changes caught on every PR.
- You need multi-breakpoint coverage across your
[breakpoints]. - You want dynamic content masked so diffs stay meaningful.
- You need an approval workflow for updating baselines.
- You are adding component-level visual tests via Storybook.
Example output
You get a [vrt_tool] setup: config and an example test for [example_page], snapshot capture for [page_count] pages across [breakpoints], a [threshold]% comparison tolerance, masking regions for dynamic elements, a side-by-side diff report, a [ci_tool] workflow running per PR, an approval path for new baselines, and snapshots organised by page and viewport.
Pro tips
- List the
[page_count]pages that matter most; visual testing everything makes the suite slow and noisy. - Set
[breakpoints]to the viewports your design actually supports so you catch responsive breakage. - Mask every genuinely dynamic region — timestamps, avatars, animations — or baselines will flag false positives constantly.
- Tune
[threshold]carefully: too low and antialiasing causes noise, too high and real regressions slip through. - Keep baseline approval deliberate; rubber-stamping new baselines defeats the whole pipeline.
- Stabilise animations before capture so screenshots are deterministic.
