Is this skill suitable for general frontend development?

This skill is specialized for visual regression triage. For general feature development or creative redesigns, other frontend or design-system skills are more appropriate.

Will it automatically update my test baselines?

No, it follows a philosophy of evidence-based review. It will only recommend a baseline update once the design intent and implementation are both verified.

Can this skill fix flaky visual tests?

Yes, it helps identify and stabilize non-deterministic factors like animation states, font loading, viewports, and async timing to reduce test noise.

What visual testing tools does this skill support?

This skill is specifically optimized for reviewing and validating diffs from Storybook, Playwright, and Argos workflows.

UI Visual Regression Reviewer

Name: UI Visual Regression Reviewer
Author: jscraik

byjscraik

•

安全与测试

Analyzes and validates visual diffs from Storybook, Playwright, and Argos to distinguish intentional UI changes from accidental regressions.

This skill provides a deterministic approach to managing visual regression testing within the Claude Code environment. It streamlines the review process for Storybook snapshots, Playwright captures, and Argos diffs, helping developers identify flaky tests and stabilize capture conditions like viewports, fonts, and animations. Instead of providing broad frontend QA, it facilitates evidence-based classification of changes—categorizing them as expected, regressive, or noise—ensuring that UI fixes remain minimal, scoped, and aligned with existing design systems.

主要功能

01Deterministic analysis of Storybook, Playwright, and Argos visual diffs

022 GitHub stars

03Stabilization of capture conditions including viewports, fonts, and animation states

04Minimalist fix generation for layout, spacing, and typography issues

05Evidence-based baseline update verification to prevent accidental regressions

06Classification of UI changes into expected updates, regressions, or flaky noise

使用场景

01Validating that design system updates haven't caused unintended layout shifts

02Triaging failing visual regression tests in a Pull Request pipeline

03Stabilizing flaky snapshot tests by normalizing capture environments and mock data

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jscraik/agent-skills ui-visual-regression

For use in Claude.ai and ChatGPT

主要功能

01Deterministic analysis of Storybook, Playwright, and Argos visual diffs

022 GitHub stars

03Stabilization of capture conditions including viewports, fonts, and animation states

04Minimalist fix generation for layout, spacing, and typography issues

05Evidence-based baseline update verification to prevent accidental regressions

06Classification of UI changes into expected updates, regressions, or flaky noise

使用场景

01Validating that design system updates haven't caused unintended layout shifts

02Triaging failing visual regression tests in a Pull Request pipeline

03Stabilizing flaky snapshot tests by normalizing capture environments and mock data

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jscraik/agent-skills ui-visual-regression

For use in Claude.ai and ChatGPT