rialto-visual-diff-review

Name: rialto-visual-diff-review
Availability: InStock
Author: mattbutlerengineering

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

Ready to run

npx skills add https://github.com/mattbutlerengineering/mattbutlerengineering --skill rialto-visual-diff-review

💬 Prompt for ChatGPT / Claude Chat▼

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.