Un curso completo sobre la Skill video-demonstrativo: navega por tu app real con un navegador automatizado, captura pantallas reales paso a paso y arma un recorrido narrado — marco del navegador, cursor que hace clic en los controles, zoom y narración local. Todo en tu máquina, sin clave de API.
Diagrama ilustrativo del pipeline del video demostrativo
Dos skills hermanas, dos objetivos. Esta muestra una app real en uso; la otra explica un concepto con gráficos en movimiento.
Captura las pantallas reales de la app y anima el cursor + el zoom por encima. Tutorial o walkthrough de «cómo usar la herramienta X».
Escenas de motion graphics que explican un concepto. Sin una app real: todo es HTML animado. Ver curso →
Del concepto de walkthrough hasta el MP4 narrado de tu app en funcionamiento.
Qué es un video demostrativo, cuándo usarlo, el principio «capturar antes, animar después» y el stack sin API key (agent-browser + HyperFrames + Kokoro).
3 módulos · básico →Controlar la app real con agent-browser/Playwright: el actions.json, las coordenadas y los bounding boxes, el scroll en páginas largas, los inputs de React y los flujos multiestado.
4 módulos · práctico →Marco de navegador, cursor animado y zoom; estilo visual dark premium; narración TTS local Kokoro; y el render en HyperFrames con lint, inspect y la CTA de INEMA.CLUB.
3 módulos · avanzado →Uno actions.json describe la URL, el viewport y los pasos. agent-browser navega la app real y captura las pantallas reales (shots + steps.json).
El viewport fijo se convierte en el espacio de coordenadas. El cursor apunta a los controles, el zoom destaca la acción y la narración de Kokoro se mide para sincronizarse con cada paso.
HyperFrames ejecuta Chrome headless + FFmpeg y exporta el walkthrough en 16:9 con marco de navegador y la CTA de INEMA.CLUB. Sin nube, sin API.
Es una carpeta autocontenida: SKILL.md, scripts (capture + composición + narración), referencias y fuentes. Colócalos en ~/.claude/skills/ (global) o .claude/skills/ (proyecto) y pídele a Claude Code un video de demostración. Este curso completo explica cada parte de ella.