Communitygithub.com

JaviMaligno/agilabs-video-studio

Convierte un artículo de blog publicado en un vídeo explicativo vertical narrado y animado (30-60 s, 1080x1920) con la marca AGILabs, renderizado localmente con Remotion. Úsalo cuando te pidan hacer un vídeo, reel, short o explicativo a partir de un artículo o entrada de blog, o para re-renderizar uno creado con este plugin (una carpeta con video.config.mjs y src/timeline.ts).

¿Qué es agilabs-video-studio?

Esta skill orquesta la creación completa de vídeos explicativos cortos (30-60 segundos) en formato vertical (1080x1920) a partir de artículos de blog, utilizando AGILabs como identidad visual y renderizando localmente con Remotion. Es ideal para desarrolladores o creadores de contenido que deseen transformar publicaciones técnicas en vídeos para redes sociales (reels, shorts) manteniendo rigor científico y consistencia de marca. Funciona en cualquier proyecto donde esté instalado el plugin (entorno Claude Code, Cursor o similar), y consta de tres sub-skills complementarias: `explainer-script` (redacción del guion con selección de escenas visuales), `explainer-animation` (componentes de animación, línea de tiempo y componentes personalizados) y `narration` (síntesis de voz con TTS Cartesia y fallback Kokoro, con control de pronunciación y QA de audio). El flujo de trabajo incluye verificación rigurosa de hechos (fact-checking), uso obligatorio de branding AGILabs sin nombres personales, una puerta de aprobación antes de la renderización, y pasos de linting, pruebas y QA visual/sonoro. Soporta re-renderización de vídeos existentes desde carpetas con video.config.mjs y src/timeline.ts, y produce salidas en MP4 (vertical u horizontal opcional), poster PNG, subtítulos SRT y un manifiesto JSON.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/JaviMaligno/agilabs-video-studio/tree/HEAD/skills/article-video

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Article video

Orquesta el camino completo desde un artículo hasta un MP4 terminado. Las otras skills contienen los detalles; cárgalas en el paso que las necesite:

  • explainer-script: redacción del guion y elección de un visual por escena.
  • explainer-animation: catálogo de componentes, línea de tiempo, componentes personalizados e imágenes fijas.
  • narration: TTS (Cartesia, Kokoro como respaldo), pronunciación, QA de audio.

El proyecto Remotion vive en la carpeta template/ del plugin (${CLAUDE_PLUGIN_ROOT}/template cuando se instala como plugin; al lado de skills/ en el repositorio del plugin).

Innegociables

  • Verificar hechos. Cada número y cada afirmación, en pantalla o hablados, se rastrea hasta una oración del artículo. Mantén la tabla en factcheck.md (afirmación, dónde aparece, la oración del artículo citada). Las cifras se muestran exactamente como las escribe el artículo: mismo redondeo, mismas unidades, mismo "14/20" en lugar de "70%". Una discrepancia se corrige en la línea de tiempo, nunca en el artículo. La verificación de hechos cubre la narración y los números y afirmaciones mostrados en pantalla, nada más. Los visuales se eligen por impacto, no como una reproducción literal del experimento: una escena ilustrativa (datos reales reproducidos libremente, marcadores colocados para claridad, un mecanismo estilizado) es válida, porque el rigor reside en el artículo y su repositorio.
  • Voz. La narración habla como está escrito el artículo: en primera persona ("Ejecuté...", "Encontré..."), con afirmaciones no más contundentes que las del artículo. Si el artículo es cauteloso ("en esta configuración", "en estas 20 ejecuciones"), el guion también lo es. Sin redacción más impactante que la fuente.
  • Marca. Solo AGILabs: la insignia AGILabs y javieraguilar.ai. Sin nombre personal en ninguna parte, ni en las tarjetas, el póster, los subtítulos ni los metadatos del archivo.
  • Puerta de aprobación. Nada se construye antes de que el guion esté aprobado.

Flujo de trabajo

  1. Elige el artículo. Usa el que se haya nombrado. Si no se nombra ninguno, lee los artículos publicados y propón 2-3 candidatos, cada uno con su título, una frase de gancho, el número clave (citado) y una idea visual. Favorece artículos con un experimento, un número claro y un mecanismo que se pueda dibujar. Deja que la persona elija.

  2. Escribe el guion con explainer-script: las líneas de narración (EN, ES opcional), una idea visual por escena mapeada a un componente de la biblioteca o marcada como "bespoke", y la oración fuente de cada número.

  3. PARA para aprobación. Muestra el guion y espera. Aplica ediciones y muéstralo de nuevo si te lo piden.

  4. Crea la carpeta del vídeo. Copia la plantilla sin sus archivos generados:

    • dentro del repositorio del plugin: examples/<article-slug>/;
    • desde cualquier otro repositorio: ./video/<article-slug>/.
    rsync -a --exclude node_modules --exclude out --exclude public/audio --exclude public/music \
      --exclude .env "${CLAUDE_PLUGIN_ROOT}/template/" "video/<article-slug>/"
    cd "video/<article-slug>" && npm ci
    

    Guarda el guion aprobado como script.md en esa carpeta.

  5. Construye la línea de tiempo con explainer-animation: configura src/settings.ts (articleTitle, voices, subtitles, targetSeconds, poster) y escribe src/timeline.ts a partir del guion. Añade componentes personalizados si el guion los marcó, cada uno con su prueba frameState.

  6. Lint: npm run lint. Corrige cada hallazgo (longitud, velocidad de subtítulos, componente desconocido). Ejecuta también npm test cuando se haya añadido o modificado un componente.

  7. Verifica hechos contra el artículo y escribe factcheck.md (ver arriba).

  8. Narra: npm run tts, luego npm run audio-qa (consulta narration). Escucha cualquier cosa que marque. Vuelve a ejecutar npm run lint: las longitudes reales de las líneas reemplazan las estimaciones.

  9. Imágenes fijas, y míralas. Renderiza una imagen fija por escena más una cada ~3 s y lee cada PNG. Comprueba la marca, las áreas seguras, que nada se desborde, que los números coincidan con el artículo, y que los subtítulos coincidan con el compás en pantalla. Una compilación limpia no es prueba de que un fotograma se vea bien.

  10. Renderiza: npm run render (vertical EN). -- --es para la versión en español, -- --landscape para 1920x1080. Luego ejecuta npm run audio-qa de nuevo para medir la mezcla (-16 LUFS integrados).

  11. Entrega: npm run deliver escribe el PNG del póster, el SRT y out/manifest.json. Mira el póster. Entrega la ruta del MP4 y el póster; la publicación es un paso aparte.

Re-renderizar un vídeo existente

Abre su carpeta, ejecuta npm ci si falta node_modules, cambia src/timeline.ts o la configuración, luego repite desde el paso 6. TTS solo vuelve a dar voz a las líneas cuyo texto haya cambiado.

Dónde van las cosas

  • El código fuente (línea de tiempo, configuración, componentes personalizados, script.md, factcheck.md) se confirma en el repositorio.
  • out/, public/audio/, public/music/, node_modules/ y todos los .mp4/.wav no se confirman.
  • .env contiene la clave de TTS y nunca se confirma ni se imprime.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

Skills relacionados