skills.rest
mattbutlerengineering
mattbutlerengineeringCOMMUNITY
Explore all skills by this author →
GitHub

rialto-visual-diff-review

Classify Playwright visual diff failures as intentional, regression, or stale.

1|Updated Jan 24, 2026
Search Tags:#github issues#playwright#visual regression#snapshot testing#rialto#ui triage#screenshot diffs
One-click install
npx skills add https://github.com/mattbutlerengineering/mattbutlerengineering --skill rialto-visual-diff-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rialto-visual-diff-review
Source: https://github.com/mattbutlerengineering/mattbutlerengineering/tree/main/apps/rialto-web/.claude/skills/rialto-visual-diff-review
Command: npx skills add https://github.com/mattbutlerengineering/mattbutlerengineering --skill rialto-visual-diff-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams quickly determine whether a failing visual regression is an intentional design change, a real UI regression, or an outdated screenshot so you can act correctly without guessing.

Core Features & Use Cases

  • Review the failing visual diff: Open the failing spec and inspect the light-.png versus light--diff.png outputs to understand what changed.
  • Classify the change: Decide between intentional updates (new components or styling changes), regressions (broken layout or missing elements), and stale screenshots (UI changed but snapshots weren’t updated).
  • Take the right next action: Either update snapshots when the change is intentional or create an issue with the relevant diff screenshot when it’s a regression.
  • Prevention-focused workflow: Encourages running visual tests before claiming UI completion and adding specs for new components.

Quick Start

Run the visual test suite to reproduce the failure, inspect the generated diff PNGs, then classify the outcome as intentional vs regression vs stale and update screenshots or file an issue accordingly.

Frequently Asked Questions about rialto-visual-diff-review

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

FAQPage Schema
How do I triage Playwright visual regression failures from screenshot diffs?▼

To triage Playwright visual regression failures, inspect the generated light-*-diff.png outputs to classify the change as intentional, a true regression, or a stale screenshot, then update snapshots or file a GitHub issue.

How do I know if a failing Playwright snapshot test is a real UI regression or an intentional change?▼

Determine if a failing Playwright snapshot test is a regression or intentional change by opening the failing spec and comparing the light-*.png against the diff PNG to see if the change reflects new styling or broken layout.

What is the correct workflow for updating stale Playwright screenshots after a UI change?▼

The correct workflow for updating stale Playwright screenshots involves running pnpm test:visual, inspecting the apps/rialto-web/e2e/screenshots outputs, and updating snapshots via Playwright with the correct spec if the change is intentional.

When should I file a GitHub issue for a visual regression instead of updating snapshots?▼

File a GitHub issue for a visual regression instead of updating snapshots when the diff PNG reveals a true regression like a broken layout or missing element, ensuring you attach the relevant diff screenshot artifact.

Does visual regression triage require running pnpm test:visual before reviewing diff artifacts?▼

Yes, visual regression triage requires running pnpm test:visual to reproduce the failure and generate the screenshot diff artifacts in apps/rialto-web/e2e/screenshots before you can inspect and classify the results.

Related Skills

Explore More Software Engineering Skills→
jls42jls42
1

Tests de Régression Visuelle

Capture and compare UI screenshots across viewports to detect visual regressions.

Community
Intermediate
cartridge-ggcartridge-gg
80

update-storybook-snapshots

Update Storybook visual regression snapshots after intentional UI changes.

Official
Intermediate
jonnymuirjonnymuir
1

workflow-action-editor-quality-gate

Validate workflow-editor action configurations and schema-driven UI components with build, test, and Playwright checks.

Community
Advanced
Camilo8902Camilo8902

visual-regression-tester

Automate visual regression testing with Playwright and Chromatic screenshot comparisons.

Community
Advanced