video-debug

Extract frames from screen recordings and analyze UI behavior for bug detection.

Updated Dec 15, 2019

Search Tags:#ffmpeg #ui-testing #bug-analysis #screen-recording #frame-extraction #video-debugging

Ready to run

npx skills add https://github.com/matsuyoshi30/dotfiles --skill video-debug

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: video-debug
Source: https://github.com/matsuyoshi30/dotfiles/tree/main/.agents/skills/video-debug
Command: npx skills add https://github.com/matsuyoshi30/dotfiles --skill video-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ffmpeg, ffprobe, ImageMagick, python3, and includes scripts (resource) components.

What problem does it solve?

Screen recording UI debugging often requires manual frame-by-frame inspection, making bug reproduction slow and error-prone.

Core Features & Use Cases

Frame extraction: Converts screen recordings into a sequence of frames using ffmpeg for chronological analysis.
UI behavior analysis: Tracks state changes, button interactions, modals, and loading indicators across frames to surface issues.
Bug discovery & verification: Helps QA diagnose layout problems, performance gaps, and interaction regressions with concrete frame references.
Use Case: When a bug reproduces only in video footage, quickly locate the exact frame where the issue appears and provide a reproducible description for developers.

Quick Start

Provide a screen recording video and ask the AI to analyze the frames for UI bugs.

Frequently Asked Questions about video-debug

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

FAQPage Schema

How do I debug UI bugs from a screen recording video?▼

Debug UI bugs from screen recordings by using ffmpeg to extract chronological frames, then analyzing state changes, button interactions, and loading indicators to pinpoint exact frames where issues occur.

How do I extract frames from a screen recording for bug analysis?▼

Extract frames from a screen recording by processing the video with ffmpeg, which converts the footage into a sequential image set for chronological UI behavior analysis and bug identification.

Do I need ffmpeg installed to analyze screen recordings for UI issues?▼

Yes, you need ffmpeg installed to extract frames from screen recordings, along with ffprobe, ImageMagick, and python3, as these dependencies are required for the video debugging workflow.

Can I use screen recording frame analysis for web app QA testing?▼

Yes, screen recording frame analysis applies to web app QA scenarios, bug investigations, and behavior verification, supporting common video formats across different recording lengths to diagnose layout and interaction regressions.

What's the best way to find the exact frame where a UI bug happens in a video?▼

Find the exact frame where a UI bug happens by extracting all frames with ffmpeg and reviewing the chronological frame analysis, which tracks UI state changes and interactions to locate the precise moment an issue appears.

Why does manual frame-by-frame inspection fail for video UI debugging?▼

Manual frame-by-frame inspection fails for video UI debugging because it makes bug reproduction slow and error-prone, whereas automated frame extraction and chronological analysis provide concrete frame references for developers.