Shrimer06/remotion-video-superpowers

Remotion Video Superpowers

Usa esta habilidad para ejecutar la producción de video con Remotion como un flujo de trabajo disciplinado: especificación → plan → ejecución → verificación. No te lances directamente a la animación para videos no triviales.

Flujo de trabajo

1. Crear o actualizar una especificación de video antes de la implementación.

   • Lee references/writing-video-specs.md.
   • Guarda las especificaciones bajo docs/video/specs/YYYY-MM-DD-nombre-proyecto.md en el proyecto cuando sea práctico.
   • Captura objetivos, no objetivos, audiencia, dirección visual, activos, requisitos de voz en off, restricciones y criterios de aceptación.

2. Crear o actualizar un plan de producción.

   • Lee references/writing-video-plans.md.
   • Guarda los planes bajo docs/video/plans/YYYY-MM-DD-nombre-proyecto.md en el proyecto cuando sea práctico.
   • Usa tareas con casillas de verificación. Cada tarea debe listar archivos, pasos, validación y condiciones de parada.

3. Completar la obtención de activos antes de la implementación de la animación.

   • Lee references/asset-sourcing.md.
   • Recopila y registra activos del producto, activos de marca, referencias de UI, capturas de pantalla, modelos 3D, recursos de mapas/geoespaciales, tokens/nombres de entorno de servicio, referencias de audio, licencias, atribuciones, rutas locales y alternativas.
   • No comiences la animación de escenas hasta que los activos requeridos estén disponibles localmente o se haya registrado explícitamente una alternativa.

4. Ejecutar el plan tarea por tarea.

   • Lee references/remotion-scene-execution.md antes de editar código Remotion.
   • Lee references/frontend-animation-system.md cuando el video contenga UI web, interfaz de producto, dashboard, animación al estilo frontend, Three.js, Anime.js o coreografía de animación compleja.
   • Lee references/3d-map-and-model-resources.md cuando el video necesite mapas, rutas, ciudades, terreno, edificios, puntos de referencia, gemelos digitales, equipos, naves espaciales, objetos 3D del mundo real o servicios basados en tokens como Mapbox/Cesium ion.
   • Usa useCurrentFrame() e interpolate() para animación segura con búsqueda.
   • Evita transiciones CSS y animaciones en tiempo de ejecución no deterministas.
   • Mantén el texto de la escena corto; traslada la explicación a la voz en off.
   • Renderiza fotogramas clave alrededor de inicios, picos y transiciones de escena antes del render final.

5. Manejar la voz en off como una fuente de timeline de primera clase.

   • Lee references/elevenlabs-v3-scripting.md antes de escribir scripts de ElevenLabs v3.
   • Lee references/audio-sync-and-muxing.md antes de importar, sincronizar o multiplexar audio.
   • Inspecciona la duración real del audio con el script scripts/inspect-audio.sh de esta habilidad.
   • Prefiere estirar la temporización de la escena para ajustar la voz en off final sobre cortar el audio.

6. Ejecutar QA final antes de la entrega.

   • Lee references/qa-checkpoints.md.
   • Ejecuta el lint/typecheck del proyecto cuando esté disponible.
   • Renderiza fotogramas clave de control de calidad con el script scripts/render-checkpoints.sh de esta habilidad o con comandos explícitos npx remotion still.
   • Renderiza el MP4 final.
   • Multiplexa la voz en off con el script scripts/mux-voiceover.sh de esta habilidad cuando la fiabilidad del audio sea importante.
   • Verifica duración, flujo de audio y volumen con ffprobe/ffmpeg.

Reglas Superpowers

• Trata la especificación como la fuente de verdad. Si la implementación entra en conflicto con la especificación, actualiza la especificación o detente y pregunta.
• Trata el plan como ejecutable. No marques una tarea como completada hasta que su verificación pase.
• Detente en validaciones fallidas que afecten la calidad final del video: lint roto, texto ilegible, escenas superpuestas, audio faltante, duración no coincidente o imágenes clave en blanco.
• Para revisiones, identifica primero la escena afectada y el rango de fotogramas, renderiza fotogramas antes/después, luego parchea solo el código necesario.
• Preserva los medios proporcionados por el usuario. Cópialos o refiéreles deliberadamente; no sobrescribas las descargas originales.
• No uses capturas de pantalla como lenguaje visual principal para un video promocional a menos que el usuario quiera explícitamente un recorrido por la pantalla. Traduce ideas de producto a metáforas de movimiento y usa capturas como evidencia, transiciones o prueba breve del producto.

Enrutamiento de Referencias

• Necesitas diseñar el video: lee writing-video-specs.md.
• Necesitas planificar la implementación: lee writing-video-plans.md.
• Necesitas recopilar activos del producto, activos de modelo, capturas de pantalla, tokens, licencias o referencias: lee asset-sourcing.md.
• Necesitas codificar escenas o transiciones de Remotion: lee remotion-scene-execution.md.
• Necesitas diseñar animaciones ricas al estilo frontend: lee frontend-animation-system.md.
• Necesitas mapas, ciudad/terreno 3D, rutas o modelos 3D externos: lee 3d-map-and-model-resources.md.
• Necesitas un guion de voz en off, especialmente ElevenLabs v3: lee elevenlabs-v3-scripting.md.
• Necesitas alinear audio MP3/WAV o arreglar "sin sonido": lee audio-sync-and-muxing.md.
• Necesitas inspeccionar la calidad final: lee qa-checkpoints.md.

Cuando ejecutes scripts empaquetados desde un directorio de proyecto, usa la ruta absoluta al directorio scripts/ de esta habilidad a menos que existan scripts equivalentes locales al proyecto.