skills.rest
JubaKitiashvili
JubaKitiashviliCOMMUNITY
Explore all skills by this author →
Website𝕏@jubakitiashviliGitHub

debug-video

Extract key frames from screen recordings and analyze UI changes over time.

41|4|Updated Mar 10, 2026
Search Tags:#ui#debugging#timeline#video#animation#frames#mobile-app
One-click install
npx skills add https://github.com/JubaKitiashvili/everything-react-native-expo --skill debug-video
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-video
Source: https://github.com/JubaKitiashvili/everything-react-native-expo/tree/main/.claude/skills/debug-video
Command: npx skills add https://github.com/JubaKitiashvili/everything-react-native-expo --skill debug-video

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Video-based tool to extract key frames from screen recordings and analyze UI bugs over time, enabling reproducible debugging of visual issues.

Core Features & Use Cases

  • Key-frame extraction from videos to build a timeline of UI states.
  • Temporal analysis to detect animation faults, layout shifts, and gesture issues across frames.
  • Source-candidate identification to map issues to components, screens, and code paths for targeted fixes.
  • Use Case: QA engineers can automatically surface timing-dependent bugs in mobile apps during automated test runs.

Quick Start

Run the /debug-video command on a video file to begin extraction and temporal UI analysis.

Frequently Asked Questions about debug-video

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

FAQPage Schema
How do I debug animation glitches from a mobile app screen recording?▼

The tool extracts key frames from the screen recording to construct a temporal timeline of UI states. This timeline analyzes visual changes over time to detect animation faults, layout shifts, and gesture issues across frames.

What is temporal UI analysis for video debugging?▼

Temporal UI analysis examines extracted key frames sequentially to map UI state changes over time. It detects timing-dependent bugs, navigation transitions, and visual faults during mobile app recordings.

How do I map a UI bug to its source component from a video?▼

You map a UI bug by analyzing extracted video frames to identify source candidates. This process maps detected visual issues to specific components, screens, and code paths for targeted fixes.

Can I verify a UI fix by re-recording a mobile app video?▼

Yes, you verify a UI fix by running analysis on a re-recorded video. The tool supports iterative verification by comparing newly extracted key frames against the previous timeline to confirm resolution.

Does video-driven UI debugging work for automated test runs?▼

Video-driven UI debugging works for automated test runs by automatically surfacing timing-dependent bugs in mobile apps. It processes screen recordings produced during automated runs to detect animation and transition faults.

What is the best way to analyze gesture issues across screen recording frames?▼

The best way to analyze gesture issues is extracting key frames from the screen recording and evaluating them on a temporal timeline. This method pinpoints exact frames where gesture handling disrupts the UI.

Related Skills

Explore More Software Engineering Skills→
treesus6treesus6
1

erne-debug-video

Analyze screen recordings to detect animation glitches, gesture issues, and scroll jank.

Community
Advanced
frizzle-chanfrizzle-chan
3

healtests

Analyze test output, plan fixes, and re-run tests until all pass.

Community
Advanced
juspayjuspay
10

vhs

Record terminal sessions from .tape scripts and render them as GIFs.

Official
Intermediate
maxxthedevelopermaxxthedeveloper
3

video-disect

Analyze .mp4 video frames to detect animation issues like jank and layout shifts.

Community
Advanced