Mapa de la ruta
Contenido detallado
🎯 Demostrativo vs. explicativo
La skill video-demonstrativo MUESTRA una app real en uso; no explica un concepto con motion graphics. Aquí entiendes qué es un walkthrough, cuándo usarlo y qué ofrece la skill.
Un walkthrough es un video que recorre una aplicación web paso a paso y muestra pantallas reales de la aplicación en uso: hacer clic, completar campos, generar, ver el resultado.
Es el formato que muestra cómo funciona algo en la práctica, sin que el usuario tenga que abrir la app por su cuenta.
App real, paso a paso, pantalla por pantalla, narrada.
video-explicativo explica un concepto con motion graphics (escenas animadas). video-demonstrativo muestra una app real navegada de verdad.
Elegir la skill equivocada cuesta tiempo. Concepto abstracto → explicativo; herramienta concreta → demostrativo.
Mostrar vs. explicar; pantalla real vs. motion graphics.
Si hay una pantalla para mostrar (una app, un localhost, una URL), es demostrativo. Si es una idea sin interfaz, es explicativo.
Un criterio único elimina la duda y te dirige al flujo correcto desde el principio.
"¿Hay una pantalla?" = demostrativo; "¿Es un concepto?" = explicativo.
Onboarding de producto, tutorial de una nueva feature, video de lanzamiento y material de soporte son usos naturales del walkthrough.
Reconocer el caso de uso ayuda a definir el guion de pasos adecuado.
Onboarding, feature, lanzamiento, soporte.
Las capturas reales van en un marco de navegador (barra + URL), con un cursor animado que hace clic en los controles, zoom en el resultado y narración TTS.
Estos cuatro elementos transforman capturas estáticas en un video que parece una grabación de pantalla profesional.
Marco de navegador, cursor, resaltado/zoom, narración.
El resultado es un MP4 en 16:9 (las pantallas de las apps son apaisadas), con narración en PT-BR y la CTA de INEMA.CLUB en la escena final.
Conocer el formato natural evita pedir 9:16 (lo que exigiría recortar) y alinea las expectativas.
16:9, MP4, narrado, CTA final.
El punto de partida es simplemente el enlace de la app: una URL pública o un localhost:8000. La app debe estar en línea para que la captura pueda navegarla.
Entender que la entrada es el enlace (y no un archivo de guion) cambia cómo preparas el trabajo.
Enlace de la app, localhost, app en línea.
🧠 Capturar primero, animar después
El principio que rige toda la skill. El render de HyperFrames es determinista: no hay red durante el render. Por eso se capturan screenshots reales antes, y el viewport fijo de la captura se convierte en el espacio de coordenadas del cursor.
HyperFrames renderiza el HTML en frames de forma determinista: nada de fetch o solicitudes de red durante el render.
Es la restricción técnica de la que nace todo lo demás del principio.
Determinístico, sin red, frame a frame.
Como el renderizado no accede a la red, la app nunca se carga en vivo dentro del video (ni en un iframe): sería inconsistente y fallaría.
Evita la tentación equivocada de «embeber el sitio» y orienta hacia la captura.
Sin transmisión en vivo, sin iframe de la app, solo imagen.
Antes de montar el video, navega por la app de verdad y toma una captura de pantalla real por estado (pantalla inicial, después de completar los campos, después del resultado…).
Estas son las capturas que van dentro del marco: la base visual de todo.
1 toma por estado, pantallas reales antes del renderizado.
El viewport fijo usado en la captura (p. ej., 1280×800) se convierte en el sistema de coordenadas donde se posiciona todo después.
Si el viewport cambia entre la captura y la medición del recuadro, el cursor no acierta al objetivo.
Viewport fijo, mismo tamaño, ≤ ~1280 de ancho.
La posición de cada elemento objetivo viene de getBoundingClientRect — coordenadas relativas al viewport, no «a ojo».
Es el cuadro real que hace que el cursor caiga justo sobre el control, dándole un aspecto profesional.
getBoundingClientRect, relativo al viewport, caja real.
El cursor se anima apuntando al centro de cada bounding box. Para acertar, la captura de pantalla y el cuadro deben provenir del mismo viewport y tener el mismo scroll.
La consistencia entre toma y coordenada es lo que mantiene el cursor siempre alineado con lo que aparece en pantalla.
El cursor apunta a la box, mismo viewport, mismo scroll.
🧰 El stack sin clave de API
Tres componentes locales hacen todo: agent-browser (Playwright) para capturar, HyperFrames (HTML→MP4) para renderizar y Kokoro TTS para narrar. Sin claves de API: todo funciona en tu máquina.
agent-browser controla un navegador mediante Playwright: abre la URL, navega por la app, ejecuta acciones y toma capturas de pantalla reales.
Es la herramienta que produce la materia prima del video (shots + bounding boxes).
Playwright, navegación automatizada, capturas de pantalla.
HyperFrames convierte una página HTML animada en MP4, usando Chrome headless para generar frames y FFmpeg para ensamblar el video.
Es el motor de salida: entender que es HTML→MP4 explica por qué el render es determinístico.
HTML→MP4, Chrome headless, FFmpeg.
Kokoro genera la narración en PT-BR localmente (voz pf_dora, --speed 0.98) — un WAV por paso, sin servicio externo.
Es la fuente del audio; el generador mide estos WAV para sincronizar el timing.
TTS local, pf_dora, PT-BR, WAV por paso.
Las tres piezas se ejecutan localmente: la captura, el render y la narración no dependen de ningún servicio de pago ni de una clave de API.
Significa costo cero por video y ningún dato sale de tu máquina.
Local, sin API, costo cero, privado.
Hay tres formas: clonar el repo de la skill, copiar la carpeta skills/video-demonstrativo/ para ~/.claude/skills/, o crear un symlink (para desarrollar).
Como una skill es solo una carpeta, instalarla es copiar y pegar: sin instalador.
unzip, copiar carpeta, symlink.
~/.claude/skills/ hace que la skill sea global (en todo el proyecto); .claude/skills/ en el repositorio lo limita a ese proyecto.
Decidir el alcance correcto evita duplicar la skill o no encontrarla.
Global, proyecto, alcance.
Pedidos como "video de demostración", "demo de la app", "walkthrough" o simplemente compartir un enlace/localhost activan la skill.
Conocer los disparadores garantiza que se active la skill correcta (y no la de videos explicativos).
Frases desencadenantes, dar el enlace, walkthrough.