sanky369/vibe-building-skills

Remotion Script Writer

Convierte un objetivo de video más (opcionalmente) una base de código en un JSON de Guión de Remotion — una especificación escena por escena lo suficientemente precisa para que un agente de Remotion la implemente sin hacer preguntas adicionales. El principio rector: el guión es la fuente única de verdad para la renderización — cada duración, elemento, animación y línea de voz en off se expresa en números y cadenas exactas, nunca "aproximadamente 5 segundos" o "algo de texto introductorio". Dos agentes que reciben la misma entrada deben emitir guiones estructuralmente idénticos.

Cuándo usar / cuándo no usar

• Úsalo cuando la salida se renderizará programáticamente con Remotion: demostraciones de productos de aplicaciones web, tutoriales de codificación con código animado, piezas de gráficos en movimiento, videos de visualización de datos, animaciones cortas para redes sociales.
• Si el concepto y los compases para un video de producto aún no están decididos → ejecuta skills/creative/product-video primero; su hoja de compases se convierte en la lista de escenas de esta habilidad.
• Video con persona en cámara → skills/creative/talking-head (Remotion no es la herramienta adecuada).
• Gráficos estáticos → skills/creative/social-graphics.
• Esta habilidad escribe solo el guión — la implementación de los componentes de React, la vista previa en Remotion Studio y la renderización son realizadas por las habilidades del agente de Remotion posteriores.

Archivos de reglas — leer antes de escribir el guión

• rules/prompt-structure.md — los campos de entrada a partir de los cuales se construye el guión (goal, targetAudience, code, videoType, duration, style, animations, transitions). Léelo al normalizar la entrada en el objeto de entrada.
• rules/script-generation.md — la estructura JSON de salida autorizada y las instrucciones de generación. Léelo antes de emitir el guión; el esqueleto a continuación es un resumen, ese archivo es el contrato.
• rules/animation-patterns.md — el vocabulario de animación/transición aprobado con formas JSON exactas y pautas de temporización. Léelo al especificar cualquier valor de animation o transitionToNextScene; no inventes tipos de animación fuera de este vocabulario.
• rules/scene-templates.md — JSON de escena listo para casos comunes (tarjeta de título, exhibición de funciones, tutorial de código, visualización de datos, outro/CTA). Léelo cuando una escena coincida con un patrón conocido; comienza desde la plantilla y edita.
• examples/product-demo-example.json — un guión de ejemplo completo. Léelo para calibrar la granularidad.

Entrada

Pregunta en un solo lote ajustado, solo lo que falta (nombres de campo según rules/prompt-structure.md):

1. goal y targetAudience — ¿qué debe lograr el video y para quién?
2. videoType — product-demo | coding-tutorial | animation | data-visualization | social-media?
3. duration (segundos) y plataforma de destino (decide ancho/alto/fps).
4. code — ruta a la base de código, URL del repositorio o fragmentos, si el video presenta una aplicación o código.
5. style — restricciones visuales/de marca (colores, fuentes, logotipo; una guía de estilo skills/creative/creative-strategist si existe).

Deduce en lugar de preguntar: language a partir de la base de código; dimensiones a partir de la plataforma (1920×1080 horizontal predeterminado, 1080×1920 para vertical en redes sociales, fps 30); preferencias de animación/transición a partir de style si no se proporcionan. No te detengas: con goal + videoType + duración conocidos, establece suposiciones y continúa.

Flujo de trabajo

1. Analizar el material fuente

Si se proporciona code, explóralo: identifica las funciones clave, los flujos de usuario, las estructuras de datos y las superficies de UI que vale la pena mostrar. Clasifica las funciones por relevancia para goal — el video muestra las 3–5 principales, no todo. Si no hay código, extrae la lista equivalente de la descripción del usuario.

2. Estructurar las escenas

Reglas de decisión según videoType:

• product-demo → tarjeta de título → problema/contexto → una escena por función (3–5 principales) → outro/CTA.
• coding-tutorial → título → configuración del concepto → una escena por paso de código (mostrar código, luego explicar) → resumen.
• data-visualization → título → contexto → una escena por gráfico/insight → conclusión.
• social-media → escena de gancho (≤3s) → 1–2 escenas de remate → CTA; total ≤60s.
• animation → derivar compases del concepto creativo (o de la hoja de compases de skills/creative/product-video).

El cálculo de temporización es obligatorio: las duraciones de las escenas más las superposiciones de transición deben sumar exactamente duration. Las transiciones TransitionSeries se superponen con escenas adyacentes — ten en cuenta la superposición, no solo sumes duraciones. Mantén el total por debajo de ~5 minutos (heurística de rendimiento de renderizado).

3. Especificar cada escena completamente

Para cada escena, completa todos los campos: sceneNumber, title, durationInSeconds, visuals.background, visuals.elements[] (type, cadena de contenido exacta, fuente, tamaño, color, posición, animation de rules/animation-patterns.md), audio.voiceover (las oraciones exactas dichas — verifica que encajen en la duración de la escena a ~2.5 palabras/segundo), y transitionToNextScene. Usa las plantillas de rules/scene-templates.md donde coincidan.

4. Compilar activos y requisitos técnicos

Enumera cada imagen, clip de video, pista de audio, fuente y logotipo referenciado por cualquier escena en requiredAssets — nada referenciado puede faltar en la lista. La generación de activos está fuera del alcance: marca cada uno como proporcionado por el usuario o descríbelo con precisión; las imágenes estáticas pueden producirse mediante skills/creative/image-generation (tubería del repositorio: docs/creative_cli.py, modelo fal-ai/nano-banana-pro). Enumera remotionPackages (por ejemplo, @remotion/transitions siempre que se usen transiciones) y cualquier biblioteca de terceros.

5. Validar contra el estándar de calidad, luego entregar el JSON

Entrega el guión más la nota de entrega (a continuación). El agente de Remotion posterior genera componentes, configura la composición, previsualiza en Studio y renderiza.

Formato de salida requerido

Emitir un único objeto JSON que coincida exactamente con la estructura en rules/script-generation.md:

{
  "videoMetadata": {
    "title": "...", "durationInSeconds": 60,
    "width": 1920, "height": 1080, "fps": 30,
    "videoType": "product-demo"
  },
  "scenes": [
    {
      "sceneNumber": 1, "title": "...", "durationInSeconds": 5,
      "visuals": {
        "background": "#RRGGBB or asset ref",
        "elements": [
          { "type": "text|image|code|chart", "content": "exact content",
            "animation": { "type": "<from rules/animation-patterns.md>", "durationInSeconds": 1 } }
        ]
      },
      "audio": { "voiceover": "Exact spoken sentence(s)." },
      "transitionToNextScene": { "type": "<from rules/animation-patterns.md>", "durationInSeconds": 1 }
    }
  ],
  "requiredAssets": { "images": [], "videos": [], "audio": [], "fonts": [], "logos": [] },
  "technicalRequirements": { "remotionPackages": [], "thirdPartyLibraries": [] }
}

Sigue el JSON con una breve nota de entrega en markdown: verificación de duración total (cálculo de escenas mostrado), las 1–3 suposiciones que hiciste y qué activos debe proporcionar el usuario antes de renderizar.

Estándar de calidad (verificar antes de entregar)

• Las duraciones de las escenas más las superposiciones de transición suman exactamente videoMetadata.durationInSeconds; muestra la aritmética en la nota de entrega.
• Cada animation y tipo de transition existe en rules/animation-patterns.md — sin tipos inventados.
• Cada línea de voz en off encaja en su escena a ~2.5 palabras/segundo; ninguna escena tiene elementos visuales sin un propósito indicado por la voz en off o el título.
• Cada activo referenciado en cualquier escena aparece en requiredAssets; las fuentes utilizadas por los elementos de texto están enumeradas.
• Corrección de Remotion integrada en la especificación: temporización basada en fotogramas mediante useCurrentFrame(), resortes con damping: 200 para revelaciones, máquina de escribir mediante división de cadenas (no opacidad por carácter), aleatoriedad determinista solo (random() de remotion, nunca Math.random()), premountFor en secuencias pesadas, <Sequence>/<Series>/<TransitionSeries> para ordenación.
• Los campos content son copia final, no marcadores de posición como "descripción de función aquí".
• La voz en off es un borrador automático — indica en la nota de entrega que el usuario puede querer refinarla.

Integración

• skills/creative/product-video → proporciona: concepto + hoja de compases + fotogramas clave para videos de producto; cada compás se convierte en una escena.
• skills/creative/creative-strategist → proporciona: guía de estilo (colores, fuentes, ambiente) aplicada a visuals y style.
• skills/creative/original-design → proporciona: un resumen del lenguaje de diseño; el vocabulario visual de cada escena debe provenir de ese mundo.
• skills/creative/image-generation → produce: activos estáticos enumerados en requiredAssets.images.
• skills/creative/social-graphics → consume: imágenes estáticas/miniaturas renderizadas para activos de publicaciones.
• Descendente: las habilidades del agente de Remotion (fuera de este repositorio) consumen el JSON para construir componentes, previsualizar y renderizar.