visual-regression-cinema

Record browser interactions and generate a filmstrip of visual transitions.

1|Updated Jan 9, 2026

Search Tags:#diff #playwright #ffmpeg #browser #imagemagick #visual-regression #record

Ready to run

npx skills add https://github.com/anouar1991/binaryPetsClaude --skill visual-regression-cinema

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-regression-cinema
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/visual-regression-cinema
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill visual-regression-cinema

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ffmpeg, imagemagick, and includes scripts (resource) components.

What problem does it solve?

This Skill helps QA engineers, designers, and developers capture and analyze visual changes during automated browser interactions by recording videos, extracting frame sequences at scene-change boundaries, and generating diffs to produce a concise visual filmstrip of what changed.

Core Features & Use Cases

Video recording of browser interactions using Playwright with built-in video capture.
Scene-change frame extraction using ffmpeg to produce meaningful states.
Pixel-diff between consecutive frames with ImageMagick to highlight changes and generate a filmstrip.
Use cases include verifying complex user flows, debugging UI transitions, reviewing visual regressions, and creating design reviews with a changelog of visual states.

Quick Start

Run a Playwright session with video recording enabled and follow the workflow to extract scene-change frames and generate the visual filmstrip.

Frequently Asked Questions about visual-regression-cinema

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I capture visual regressions across sequential browser interactions?▼

Capture visual regressions by recording browser interactions with Playwright, extracting scene-change frames via ffmpeg, and generating pixel-diff filmstrips with ImageMagick to reveal UI transitions. This produces scene frames, diff images, and a timeline of meaningful visual changes.

What's the best way to debug UI animations during automated browser tests?▼

Debug UI animations by recording the browser session and extracting frame sequences at scene-change boundaries using ffmpeg. This isolates meaningful visual transition states from the video recording, producing a concise filmstrip to review complex user flows and animation behaviors.

Do I need Playwright video recording enabled to generate a visual filmstrip?▼

Yes, Playwright video recording is required to generate a visual filmstrip. The video capture provides the raw browser session footage that ffmpeg processes into scene-change frames and ImageMagick analyzes to produce pixel-diff images of visual transitions.

How does frame extraction identify meaningful visual changes in a browser session?▼

Frame extraction identifies meaningful visual changes by using ffmpeg to detect scene-change boundaries within the recorded video, then applying ImageMagick pixel-diff operations between consecutive extracted frames to highlight exactly what shifted during the sequential user flow.

Can I use ffmpeg and ImageMagick to create a visual changelog for design reviews?▼

Yes, you can create a visual changelog for design reviews by using ffmpeg to extract scene-change frames and ImageMagick to generate diff images. This produces a filmstrip of sequential visual states suitable for reviewing complex user flows and UI regressions.