web-video-presentation es un agent skill dentro de ConardLi/garden-skills. Resuelve un problema concreto: convertir un artículo o guion de voz en una presentación web que pueda grabarse como video.

Proyecto: https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation

No es una plantilla de slides ni una librería de componentes React. Es un flujo de producción para agentes: convertir contenido en guion, crear outline, elegir tema, construir una superficie web 16:9 con Vite + React + TypeScript y grabarla.

No quiere hacer slides

El README lo llama “video production surface”, no slide deck.

Cada clic avanza un beat de narración. Cada step ocupa un escenario de 1920×1080. La UI de progreso se oculta salvo hover para no ensuciar la grabación.

Sirve para convertir blogs en videos, visualizar guiones, hacer demos, tutoriales, charlas estilo keynote o presentaciones dinámicas que no parezcan PowerPoint.

El valor no es sustituir un editor de video, sino usar el navegador como lienzo controlable e iterativo.

Principios

Usa un escenario fijo 16:9 en coordenadas 1920×1080, escalado al viewport para evitar cambios de layout al grabar.

Tiene un cursor global de step: clics y teclado avanzan (chapter, step) y guardan progreso local.

Cada step debe contar una sola idea. No se trata de acumular bullets, sino de diseñar cada beat como una pantalla.

El guion manda el ritmo, el outline define capítulos y steps, y la imagen sigue la narración.

Cada escena debe tener un ancla visual con movimiento. Si solo hay texto estático, aún no es lenguaje de video.

Los temas usan tokens semánticos para tipografía, color, tarjetas, fondo, separadores, decoración y tono.

Workflow en cuatro partes

Primero se trabaja el contenido. Si el usuario da un artículo, el agente lo reescribe como script.md y genera outline.md. Si ya hay guion, lo guarda como script.md y crea el outline.

Luego viene el desarrollo web. El agente crea un proyecto Vite / React / TypeScript y desarrolla por capítulos. El capítulo 1 debe hacerlo el hilo principal y ser aprobado por el usuario, porque fija el estilo.

Después puede venir audio opcional: extraer definiciones desde narrations.ts y pasar a síntesis de voz.

Finalmente se graba la presentación en la web.

Hay checkpoints estrictos: script, outline, tema, plan de assets, modo de desarrollo, aprobación del capítulo 1 y decisión sobre audio.

Por qué el outline no define animaciones

outline.md planifica ritmo e información, pero no animaciones concretas. Puede describir capítulos, número de steps, contenido de pantalla, assets y duración estimada; no debe fijar CSS animations, tiempos, clip-path o filtros.

Si el outline bloquea la animación, el desarrollo posterior se vuelve mecánico. La sensación de video debe diseñarse al implementar cada capítulo según la relación entre ideas.

narrations.ts como fuente de verdad

Cada capítulo tiene narrations.ts, con número de steps y texto de narración. El máximo step usado en el .tsx del capítulo debe coincidir con narrations.length.

Así se evita que script.md, outline.md, código, chapters.ts y audio se desalineen.

Los temas no son skins

Los temas integrados incluyen paper-press, warm-keynote, midnight-press, blueprint, chalk-garden, terminal-green, bauhaus-bold, sunset-zine, newsroom y monochrome-print.

No son simples cambios de color. Representan lenguajes visuales distintos: prensa, keynote, planos, terminal, newsroom. En la planificación, el agente debe recomendar dos o tres según tema y tono.

Modos de desarrollo

El capítulo 1 siempre se desarrolla y revisa primero. Después hay tres modos: confirmación capítulo por capítulo, desarrollo secuencial o desarrollo paralelo con subagents.

El paralelo es más rápido, pero puede generar diferencias de estilo entre capítulos. Los theme tokens ayudan a mantener unidad.

Para quién sirve

Sirve mejor cuando ya existe material: artículo, guion, descripción de producto, tutorial o explicación técnica. Si el usuario no tiene contenido, el agente debería pedirlo. No es una herramienta de ideación, sino un flujo de contenido a video.

Resumen

web-video-presentation vale porque convierte la producción de videos desde contenido en un flujo colaborativo, revisable y reutilizable.

Une artículo, narración, outline, tema, capítulos, audio y grabación, y usa checkpoints para evitar que el agente avance sin control.