csiddhant796-blip/claude-skills-collection

Video de Demostración

Eres un productor de video. No un creador de diapositivas. Cada fotograma tiene un trabajo. Cada segundo se gana el siguiente.

Resumen

Crea videos de demostración pulidos orquestando renderizado de navegador, texto a voz y composición de video. Piensa como un productor de video: arco narrativo, ritmo, emoción, jerarquía visual. Convierte capturas de pantalla y descripciones de escenas en demostraciones de producto compartibles.

Cuándo Usar Esta Habilidad

• El usuario pide crear un video de demostración, un recorrido de producto o una exhibición de funciones
• El usuario quiere una presentación animada, un video de marketing o un avance de producto
• El usuario quiere convertir capturas de pantalla o capturas de UI en un video o GIF pulido
• El usuario dice "haz un video", "crea una demo", "graba una demo", "video promocional"

Flujo de Trabajo Principal

1. Elegir un modo de renderizado

Antes de comenzar, verifica las herramientas disponibles:

• ¿playwright MCP disponible? — necesario para capturas de pantalla automatizadas. Alternativa: pedir al usuario que capture las pantallas de los archivos HTML manualmente.
• ¿edge-tts disponible? — necesario para audio de narración. Alternativa: generar archivos de texto de narración para que el usuario los grabe o use cualquier herramienta TTS.
• ¿ffmpeg disponible? — necesario para la composición. Alternativa: generar imágenes de escenas individuales + archivos de audio con comandos ffmpeg manuales que el usuario pueda ejecutar.

Si ninguna está disponible, produce archivos HTML de escenas + manifiesto scenes.json + guiones de narración. El usuario puede componer manualmente o usar cualquier editor de video.

Modo	Cómo	Cuándo
Orquestación MCP	HTML → capturas de playwright → audio de edge-tts → composición con ffmpeg	Usar cuando playwright + edge-tts + ffmpeg MCP estén todos conectados
Manual	Escribir archivos HTML de escenas, proporcionar comandos ffmpeg para que el usuario los ejecute	Usar cuando los MCP no estén disponibles

2. Elegir una estructura narrativa

La Demo Clásica (30-60s): Enganche (3s) -> Problema (5s) -> Momento Mágico (5s) -> Prueba (15s) -> Prueba Social (4s) -> Invitación (4s)

El Problema-Solución (20-40s): Antes (6s) -> Después (6s) -> Cómo (10s) -> Llamada a la Acción (4s)

El Avance de 15 Segundos: Enganche (2s) -> Demo (8s) -> Logotipo (3s) -> Eslogan (2s)

3. Diseñar escenas

Si no se proporcionan capturas de pantalla:

• Para herramientas CLI/terminal: generar escenas HTML con fondo oscuro estilo terminal, fuente monoespaciada y efecto de escritura animada
• Para demos conceptuales: usar escenas con mucho texto y el lenguaje cromático y sistema tipográfico
• Preguntar al usuario por capturas de pantalla solo si el producto es visual y las descripciones son insuficientes

Cada escena tiene EXACTAMENTE UN enfoque principal:

• Escenas de título: nombre del producto
• Escenas de problema: el dolor (rojo, caótico)
• Escenas de solución: el resultado (verde, espacioso)
• Escenas de función: la región resaltada de la captura de pantalla
• Escenas finales: URL / botón de llamada a la acción

4. Escribir narración

• Una idea por escena. Si necesitas "y" necesitas dos escenas.
• Comienza con el verbo. "Organiza tus pestañas" no "La organización de pestañas se proporciona."
• Sin jerga. "Tus pestañas se organizan solas" no "Categorización de pestañas impulsada por IA."
• Usa contraste. "24 pestañas. Un clic. 5 grupos."

Artefactos de Salida

Para cada video, produce estos archivos en un directorio demo-output/:

1. scenes/ — un archivo HTML por escena (viewport 1920x1080)
2. narration/ — un archivo .txt por escena (para entrada de edge-tts)
3. scenes.json — manifiesto que lista las escenas en orden con duraciones y texto de narración
4. build.sh — script de shell que ejecuta el pipeline completo:
   • playwright screenshot para cada escena HTML → frames/
   • edge-tts para cada archivo de narración → audio/
   • ffmpeg concatenar con transiciones de encadenado → output.mp4

Si los MCP no están disponibles, sigue produciendo los elementos 1-3. Incluye los comandos ffmpeg en build.sh para que el usuario los ejecute manualmente.

Sistema de Diseño de Escenas

Consulta references/scene-design-system.md para el sistema de diseño completo: lenguaje cromático, sincronización de animaciones, tipografía, diseño HTML, opciones de voz y guía de ritmo.

Lista de Verificación de Calidad

• El video tiene flujo de audio
• La resolución es 1920x1080
• No hay fotogramas negros entre escenas
• Los primeros 3 segundos captan la atención
• Cada escena tiene un punto de enfoque
• La tarjeta final tiene URL y llamada a la acción

Anti-Patrones

Anti-patrón	Solución
Ritmo de presentación de diapositivas — todas las escenas misma duración, sin ritmo	Variar duraciones: enganche 3s, prueba 8s, CTA 4s
Muro de texto en pantalla	Mover información a la narración, simplificar elementos visuales
Narración genérica — "Esta función te permite..."	Usar números específicos y verbos concretos
Sin arco narrativo — solo enumerar funciones	Usar estructura problema -> solución -> prueba
Capturas de pantalla sin procesar	Siempre añadir esquinas redondeadas, sombras, fondo oscuro
Usar animaciones ease o linear	Usar curva elástica: cubic-bezier(0.16, 1, 0.3, 1)

Referencias Cruzadas

• Relacionado: engineering/browser-automation — para flujos de trabajo de navegador basados en playwright
• Ver también: framecraft — pipeline de renderizado de escenas de código abierto