https://www.knightli.com/es/tags/agent-skill/ Recent content in Agent Skill on KnightLi Blog Hugo -- gohugo.io es Fri, 15 May 2026 09:02:15 +0800 https://www.knightli.com/es/2026/05/15/web-video-presentation-agent-skill/ Fri, 15 May 2026 09:02:15 +0800 https://www.knightli.com/es/2026/05/15/web-video-presentation-agent-skill/ <p><code>web-video-presentation</code> es un agent skill dentro de <code>ConardLi/garden-skills</code>. Resuelve un problema concreto: convertir un artículo o guion de voz en una presentación web que pueda grabarse como video.</p> <p>Proyecto: <a class="link" href="https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation" target="_blank" rel="noopener" >https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation</a></p> <p>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.</p> <h2 id="no-quiere-hacer-slides">No quiere hacer slides </h2><p>El README lo llama “video production surface”, no slide deck.</p> <p>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.</p> <p>Sirve para convertir blogs en videos, visualizar guiones, hacer demos, tutoriales, charlas estilo keynote o presentaciones dinámicas que no parezcan PowerPoint.</p> <p>El valor no es sustituir un editor de video, sino usar el navegador como lienzo controlable e iterativo.</p> <h2 id="principios">Principios </h2><p>Usa un escenario fijo 16:9 en coordenadas <code>1920×1080</code>, escalado al viewport para evitar cambios de layout al grabar.</p> <p>Tiene un cursor global de step: clics y teclado avanzan <code>(chapter, step)</code> y guardan progreso local.</p> <p>Cada step debe contar una sola idea. No se trata de acumular bullets, sino de diseñar cada beat como una pantalla.</p> <p>El guion manda el ritmo, el outline define capítulos y steps, y la imagen sigue la narración.</p> <p>Cada escena debe tener un ancla visual con movimiento. Si solo hay texto estático, aún no es lenguaje de video.</p> <p>Los temas usan tokens semánticos para tipografía, color, tarjetas, fondo, separadores, decoración y tono.</p> <h2 id="workflow-en-cuatro-partes">Workflow en cuatro partes </h2><p>Primero se trabaja el contenido. Si el usuario da un artículo, el agente lo reescribe como <code>script.md</code> y genera <code>outline.md</code>. Si ya hay guion, lo guarda como <code>script.md</code> y crea el outline.</p> <p>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.</p> <p>Después puede venir audio opcional: extraer definiciones desde <code>narrations.ts</code> y pasar a síntesis de voz.</p> <p>Finalmente se graba la presentación en la web.</p> <p>Hay checkpoints estrictos: script, outline, tema, plan de assets, modo de desarrollo, aprobación del capítulo 1 y decisión sobre audio.</p> <h2 id="por-qué-el-outline-no-define-animaciones">Por qué el outline no define animaciones </h2><p><code>outline.md</code> 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.</p> <p>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.</p> <h2 id="narrationsts-como-fuente-de-verdad">narrations.ts como fuente de verdad </h2><p>Cada capítulo tiene <code>narrations.ts</code>, con número de steps y texto de narración. El máximo step usado en el <code>.tsx</code> del capítulo debe coincidir con <code>narrations.length</code>.</p> <p>Así se evita que <code>script.md</code>, <code>outline.md</code>, código, <code>chapters.ts</code> y audio se desalineen.</p> <h2 id="los-temas-no-son-skins">Los temas no son skins </h2><p>Los temas integrados incluyen <code>paper-press</code>, <code>warm-keynote</code>, <code>midnight-press</code>, <code>blueprint</code>, <code>chalk-garden</code>, <code>terminal-green</code>, <code>bauhaus-bold</code>, <code>sunset-zine</code>, <code>newsroom</code> y <code>monochrome-print</code>.</p> <p>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.</p> <h2 id="modos-de-desarrollo">Modos de desarrollo </h2><p>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.</p> <p>El paralelo es más rápido, pero puede generar diferencias de estilo entre capítulos. Los theme tokens ayudan a mantener unidad.</p> <h2 id="para-quién-sirve">Para quién sirve </h2><p>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.</p> <h2 id="resumen">Resumen </h2><p><code>web-video-presentation</code> vale porque convierte la producción de videos desde contenido en un flujo colaborativo, revisable y reutilizable.</p> <p>Une artículo, narración, outline, tema, capítulos, audio y grabación, y usa checkpoints para evitar que el agente avance sin control.</p>