How does this skill help with flaky visual tests?

It provides patterns for masking dynamic content like timestamps and ads, and includes custom fixtures to disable animations and transitions to ensure screenshots remain stable.

Can I use this for Storybook components?

Yes, it includes specific configurations and examples for integrating Percy with Storybook to capture component-level snapshots in various interaction states.

Does it support dark mode testing?

Absolutely. The skill includes implementation patterns for programmatically toggling dark mode classes to validate UI appearance in both light and dark themes.

Is CI/CD integration covered?

Yes, it provides ready-to-use GitHub Actions configurations for running Playwright visual tests and syncing results with Percy on every pull request.

Visual Regression Testing for React

Name: Visual Regression Testing for React
Author: IvanTorresEdge

byIvanTorresEdge

0•

Security & Testing

Automates UI visual consistency checks using Playwright and Percy to detect unintended layout or style changes across browsers and devices.

This skill empowers developers to implement robust visual regression testing workflows within React applications. By leveraging Playwright for local screenshot comparisons and Percy for cloud-based visual review, it helps catch subtle UI bugs, broken layouts across screen sizes, and unintended CSS side effects that traditional functional tests often miss. It provides pre-configured patterns for handling dynamic content, stabilizing animations, dark mode testing, and Storybook integration to ensure a polished and consistent user experience across every deployment.

Key Features

01Advanced stability techniques for masking dynamic content and freezing animations

02Cloud-based visual review integration with Percy and Storybook

030 GitHub stars

04Cross-browser and responsive layout validation for mobile, tablet, and desktop viewports

05Automated screenshot comparison with Playwright's toHaveScreenshot API

06Pre-configured GitHub Actions workflows for continuous visual integration

Use Cases

01Catching CSS regressions during large-scale refactors of global stylesheets

02Implementing visual approval workflows for design system components using Storybook

03Verifying UI consistency across a wide range of device resolutions and browsers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ivantorresedge/molcajete.ai visual-regression

For use in Claude.ai and ChatGPT

Download Skill