Can I adjust the sensitivity of the visual detection?

Yes, you can modify the threshold parameter (default 0.3) to capture subtler visual changes or ignore minor transitions based on your project's needs.

Is this skill compatible with CI/CD pipelines?

Yes, although some CI environments may require xvfb or a similar virtual display buffer to enable Playwright's video recording functionality in a headless environment.

How does the skill detect UI changes?

It uses ffmpeg's scene detection filters to identify moments where the UI changes significantly and then applies ImageMagick's compare tool to generate pixel-level diffs.

What kind of output does the skill provide?

It generates a series of PNG frames representing different states, diff images highlighting changes in red, and a text file containing timestamps and RMSE values for quantitative analysis.

What external tools are required for Visual Regression Cinema?

This skill requires the Playwright MCP server, ffmpeg (for video processing), and ImageMagick (for image comparison and diffing) to be installed on your system.

Visual Regression Cinema

Name: Visual Regression Cinema
Author: anouar1991

byanouar1991

•

安全与测试

Automates the creation of visual filmstrips and pixel-diff comparisons from browser interaction videos to detect UI regressions.

Visual Regression Cinema is a specialized Claude Code skill that streamlines the process of capturing and analyzing UI changes during browser-based workflows. By leveraging Playwright to record interactions, ffmpeg for intelligent scene detection, and ImageMagick for precise pixel-level diffing, it generates a comprehensive visual timeline of transitions. This allows developers to see exactly how an interface evolves during complex multi-step flows, identify subtle layout shifts, and debug flaky visual tests by inspecting captured frames and quantitative change metrics in a single, automated workflow.

主要功能

01Automatic video recording of multi-step Playwright browser sessions

02High-precision pixel-diffing with ImageMagick to highlight UI changes

031 GitHub stars

04Quantitative analysis using RMSE values for measuring visual shifts

05Visual filmstrip generation for timeline review of state changes

06Intelligent scene-change frame extraction using ffmpeg heuristics

使用场景

01Debugging and reviewing CSS transitions, animations, and dynamic content behaviors

02Verifying visual consistency across complex multi-step user authentication or checkout flows

03Creating a visual changelog of UI interactions for design reviews and stakeholder approval

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude visual-regression-cinema

For use in Claude.ai and ChatGPT

Download Skill