skills.rest
vesviet
vesvietCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

setup-visual-regression

Configure Playwright or Chromatic visual diffing pipelines with containerized baselines and CI gates.

Updated Feb 10, 2026
Search Tags:#playwright#ui testing#chromatic#storybook#visual regression#snapshot testing#ci pipeline
One-click install
npx skills add https://github.com/vesviet/agent-skills --skill setup-visual-regression-vesviet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-visual-regression
Source: https://github.com/vesviet/agent-skills/tree/main/core/skills/frontend/setup-visual-regression
Command: npx skills add https://github.com/vesviet/agent-skills --skill setup-visual-regression-vesviet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI styling regressions slip into production because code review cannot catch pixel-level layout changes, and ad-hoc screenshot tests fail from non-deterministic rendering across environments. ## Core Features & Use Cases - Framework Setup: Installs and configures Playwright Test with toHaveScreenshot() for full-page diffs or Chromatic/Storybook for isolated component snapshots. - Deterministic Snapshots: Disables CSS animations, masks dynamic content like timestamps and avatars, and mocks network responses with MSW to eliminate flaky tests. - Containerized Baselines: Generates reference snapshots inside the official Playwright Docker container so local macOS/Windows renders never mismatch Linux CI runners. - CI Quality Gate: Adds a hard visual regression step to pull request pipelines with diff artifact uploads and mandatory UI/UX sign-off for baseline updates. - Use Case: A frontend team shipping a design system uses this to enforce cross-browser (Chromium, WebKit, Firefox) and multi-viewport snapshot coverage so unintended style changes block merges automatically. ## Quick Start Use the setup-visual-regression skill to add Playwright visual regression testing with containerized baselines and a CI gate to this repository.

Frequently Asked Questions about setup-visual-regression

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up visual regression testing with Playwright?▼

Install @playwright/test and use toHaveScreenshot() assertions for full-page and route-level diffs. Configure snapshot directories, set maxDiffPixelRatio to 0.01 and threshold to 0.2, then generate baselines inside the official Playwright Docker container matching your CI environment.

Playwright vs Chromatic for visual regression testing?▼

Playwright suits full-page and integrated route diffs across Chromium, WebKit, and Firefox. Chromatic with Storybook and TurboSnap targets isolated design system components. Use both together: component isolation plus full-page coverage.

Why do Playwright screenshots differ between local and CI?▼

Font rendering and sub-pixel differences between macOS/Windows and Linux cause false failures. Generate and compare baselines only inside the official mcr.microsoft.com/playwright Docker container that matches the CI runner image.

How do I prevent flaky visual snapshot tests?▼

Disable CSS animations and transitions with animations: 'disabled', mask dynamic content like timestamps and avatars using mask locators, and stub network responses with MSW so snapshots render deterministic fixed data.

What threshold should I use for visual diff comparisons?▼

Set maxDiffPixelRatio to 0.01 and threshold to 0.2 to absorb sub-pixel text rendering while catching real layout regressions. Default unconfigured thresholds are too loose; reject thresholds looser than 0.1% pixel delta per component category.

How do I update visual baselines after intentional UI changes?▼

Run the baseline regeneration command such as npm run test:visual -- -u inside the containerized environment. Require mandatory sign-off from a ui-ux-designer or frontend-developer before updated snapshots merge.

Related Skills

Explore More Software Engineering Skills→
Layer-FiLayer-Fi
10

storybook

Author Storybook stories and manage Chromatic visual regression snapshots for React components.

Official
Advanced
rjskenerjskene

evaluate-issue-pr

Evaluate pull requests against approved implementation plans with CI checks.

Community
Advanced
aroidoaroido

qa-testing

Automate end-to-end testing, visual regression, accessibility audits, and GitHub issue creation with Playwright.

Official
Advanced
refined-prunrefined-prun
35

review-pr

Review GitHub pull requests against project guidelines and produce a structured review artifact.

Official
Advanced