Does this work with Playwright?

Yes, it includes specific patterns and best practices for Playwright, as well as Puppeteer and other common testing frameworks.

How does it handle dynamic content?

Visual testing is best suited for stable components; the skill recommends disabling animations and using specific configuration thresholds to prevent false negatives from dynamic content.

What is the primary requirement of this skill?

The skill operates under the 'Iron Law': NO UI CHANGES WITHOUT VISUAL VERIFICATION. Every HTML or CSS change must be backed by screenshots and DevTools evidence.

When should I update my visual baseline?

Baselines should only be updated after a manual review of the diff image confirms that the visual changes are intentional and desired.

Can I use this for mobile testing?

Absolutely. The skill includes mandatory verification steps for mobile (375x667), tablet (768x1024), and desktop (1920x1080) breakpoints.

Frontend Visual Regression

Name: Frontend Visual Regression
Author: samjhecht

bysamjhecht

•

Security & Testing

Verifies UI correctness through automated screenshot comparisons and browser DevTools auditing to prevent visual regressions.

This skill enforces a rigorous visual verification process for frontend development, ensuring that no UI changes are shipped without objective evidence. By integrating visual regression testing into the TDD cycle, it helps developers catch unintended styling shifts, verify responsive layouts across multiple breakpoints, and maintain clean console logs. It provides a structured workflow for generating baselines, reviewing diffs, and managing snapshot updates, making it essential for teams working on design systems or complex CSS layouts.

Key Features

01Framework-agnostic patterns for Playwright, Puppeteer, and cloud tools

021 GitHub stars

03Visual TDD cycle for functional and aesthetic verification

04Automated element-level and responsive breakpoint screenshotting

05Mandatory DevTools console and network status auditing

06Baseline management and visual diff review workflows

Use Cases

01Preventing CSS regressions during site-wide style updates

02Verifying responsive behavior across mobile, tablet, and desktop viewports

03Implementing and refactoring design system components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add samjhecht/wrangler frontend

For use in Claude.ai and ChatGPT

Download Skill