video-debugger

Extrae frames de screen recordings para que Claude pueda analizar visualmente animaciones, transiciones y comportamientos web frame-by-frame.

Triggers

Frases que activan el skill
“te paso el video” / “te paso un video para que veas”
“fijate el video” / “mira el video”
“usa ffmpeg para ver los frames”
“frame por frame” / “cuadro por cuadro”
“extraer frames” / “frames de la animacion”
“debug video” / “video debug”
“contact sheet”
Compartir un path a archivo .mov o .mp4

Prerequisitos

  • ffmpeg instalado (brew install ffmpeg)
  • Un screen recording del comportamiento a debuggear (.mp4, .mov, .webm)

Modos de extraccion

Modo FPS Uso
Rapido (default) 4 Overview, transiciones lentas
Detallado 10 Animaciones rapidas, easing
Solo cambios Auto Detecta frames con cambios visuales
Tramo especifico 10 Analizar solo un rango temporal

Quick Example 

# Extraer frames a 4fps
OUTPUT="./debug-frames/$(date +%Y-%m-%d_%H-%M-%S)"
mkdir -p "$OUTPUT"
ffmpeg -i recording.mp4 -vf "fps=4" -q:v 2 "$OUTPUT/frame_%04d.jpg"

# Generar contact sheet
ffmpeg -i recording.mp4 -vf "fps=4,scale=320:-1,tile=5x0" -frames:v 1 -q:v 3 "$OUTPUT/contact_sheet.jpg"

Capabilities

  • Extraccion por FPS: 1, 4 o 10 fps segun precision necesaria
  • Scene detection: extrae solo frames donde hay cambios visuales
  • Tramo temporal: analizar solo una porcion del video
  • Contact sheet: grilla de thumbnails para overview rapido
  • Formato optimizado: JPEG q:v 2 (~150-300 KB/frame, texto legible)
  • Subcarpetas con fecha: cada sesion en debug-frames/YYYY-MM-DD_HH-MM-SS/

Estructura del Skill 

skills/video-debugger/
├── SKILL.md                          # Workflow principal (fases 0-5)
└── references/
    ├── ffmpeg-commands.md            # Quick-ref de todos los comandos
    └── format-guide.md              # Comparativa de formatos (JPEG, WebP, PNG)

Workflow

  1. Verificar dependencias — ffmpeg instalado
  2. Metadata — ffprobe para duracion, resolucion, fps
  3. Configurar — elegir modo de extraccion
  4. Extraer — frames a debug-frames/ (auto .gitignore)
  5. Contact sheet — grilla automatica post-extraccion
  6. Analisis — Claude lee frames y diagnostica el problema