remotion-shorts-skill

Habilidad de Remotion Shorts

Escribes un short como un archivo JSON de escenas. El proyecto Remotion incluido distribuye las palabras, temporiza cada escena según la velocidad de lectura, mantiene el texto dentro del área que ningún botón de la aplicación cubre, renderiza una hoja de revisión, una portada y el MP4, y el usuario puede publicarlo con WoopSocial.

No escribes código Remotion para cada video. Las plantillas son fijas y probadas; tu trabajo es el guion: qué dice cada pantalla, en qué orden y a qué velocidad.

0. Configuración (una vez por máquina)

Requiere Node 20 o superior. Verifica con node -v; si no está, envía al usuario a https://nodejs.org. Remotion es compatible con macOS 15 o superior, Windows x64 y Linux con glibc 2.35+ (Ubuntu 22.04, Debian 12 o superior).

node <skill-dir>/scripts/setup.mjs remotion-shorts

Esto copia el proyecto en ./remotion-shorts, instala los paquetes fijados (aproximadamente 260 MB) y descarga el navegador headless que Remotion usa para renderizar (100 a 150 MB). Tarda de 1 a 3 minutos la primera vez. Ejecútalo de nuevo después de una actualización de la habilidad: actualiza los archivos de plantilla (los que el usuario haya cambiado se guardan como .bak) y nunca toca sus scripts, activos o resultados.

Licencia. Remotion es gratuito para individuos y empresas de hasta 3 personas. Las empresas de 4 o más necesitan una licencia corporativa de Remotion, y renderizar desde scripts cuenta como automatización (remotion.pro/license). Si el usuario está renderizando para una empresa grande, díselo una vez, claramente, antes del primer render.

1. Pregunta lo que necesitas (un mensaje, omite lo que ya se sabe)

• El material. Un tema, artículo, URL, notas, datos, changelog o lista. Solo escribes hechos que puedas señalar. Si el usuario da un tema sin fuente, encuentra una fuente primaria (estadísticas oficiales, documentación, el changelog del producto) y nómbrala.
• Para quién es y la única conclusión. Un short dice una cosa.
• Apariencia. Un tema (ink, paper, volt, ocean, clean) o sus colores de marca, y un handle para la pantalla final.
• Audio. Los efectos de sonido incorporados están activados por defecto (un golpe en el gancho, un swoosh en cada corte, un pop en los destacados, ticks en los contadores); están hechos para esta plantilla y son seguros en todas las aplicaciones. Música solo de un archivo del que tengan derechos de uso (consulta references/writing-shorts.md para saber por qué ninguna biblioteca gratuita es segura en las tres aplicaciones).
• Dónde va. TikTok, Reels, Shorts o las tres.

2. Escribe el guion

Lee references/writing-shorts.md antes del primer guion de una sesión. La versión corta:

• La escena 1 es un gancho que indica el beneficio en aproximadamente 10 palabras o menos: un número, una afirmación o la promesa de la lista ("5 herramientas gratuitas que reemplazan..."). Aparece completamente en pantalla desde el fotograma 0. Si el gancho tiene un número, ponlo en big para que sea lo primero que vea el ojo.
• Una idea por escena. Una escena es un golpe, no un párrafo. Las escenas de estadísticas llevan un número y lo que significa. Los elementos de la lista cuentan hacia abajo o hacia arriba; dilo en el gancho.
• Información real en cada escena. Un video de texto con plantilla que no aporta nada nuevo es lo que YouTube llama contenido inauténtico e Instagram llama no original. Nunca rellenes.
• Los números son exactos y con fuente. Pon la fuente en footer ("Datos: USGS"). Nunca redondees un número a una afirmación diferente.
• Termina con una acción o una línea que lleve de regreso al gancho para que el bucle se sienta continuo. Nada de "gracias por ver".
• Duración: el objetivo es de 15 a 45 segundos; el renderizador advierte después de 59.

Escribe short.json en la carpeta del proyecto. El formato completo, cada tipo de escena y cada opción están en references/short-json.md. Un guion mínimo:

{
  "theme": "ink",
  "footer": "Datos: USGS",
  "handle": "@tuhandle",
  "scenes": [
    { "type": "hook", "big": "2.5%", "text": "del agua de la Tierra es dulce" },
    { "type": "stat", "value": "96.5", "suffix": "%", "label": "es agua salada en los océanos" },
    { "type": "stat", "value": "68.7", "suffix": "%", "label": "del agua dulce es hielo y glaciares", "highlight": "hielo y glaciares" },
    { "type": "end", "text": "Guarda esto para la noche de trivia", "highlight": "Guarda esto" }
  ]
}

3. Verifica antes de renderizar el video

cd remotion-shorts
node render.mjs short.json --stills

En pocos segundos, esto imprime el plan (segundos y tamaño de fuente por escena) y escribe:

• out/short/sheet.jpg: el último fotograma de cada escena (todo en pantalla), con las áreas de la zona segura marcadas con una línea discontinua fina (el texto debe permanecer dentro de ella).
• out/short/cuts.jpg: el fotograma 0 y los fotogramas alrededor de cada corte, para verificar el movimiento.
• out/short/cover.jpg: el gancho una vez que ha aterrizado (súbelo como portada de Reels).
• out/short/report.json: temporizaciones, saltos de línea y advertencias.

Abre ambas hojas y míralas. Verifica: ¿cada escena es legible en tamaño de teléfono?, ¿cada una dice una cosa?, ¿los destacados están en las palabras que importan?, ¿algo se ve apretado?, ¿el orden es correcto?, y ¿el fotograma 0 muestra el gancho completo? Corrige el JSON y vuelve a ejecutar --stills hasta que lo publicarías.

Las advertencias detienen el render del video (código de salida 2): texto demasiado largo para una pantalla, un gancho demasiado largo, un destacado que no está en el texto, una escena demasiado rápida para leer, un ritmo fuera de 0.85 a 1.25, o un short de más de 59 segundos. Corrige el guion; usa --force solo cuando el usuario haya visto la advertencia y quiera continuar. Algunos problemas son errores que --force no puede anular, como una palabra demasiado ancha para la pantalla a cualquier tamaño: esos pondrían el texto fuera de la pantalla.

4. Renderiza

node render.mjs short.json

Escribe out/short/short.mp4: 1080x1920, 30 fps, H.264, yuv420p, AAC (una pista silenciosa cuando no hay música), que TikTok, Reels y Shorts aceptan. Un short de 30 segundos se renderiza en aproximadamente un minuto en un portátil reciente. Las máquinas con 8 GB de memoria renderizan 2 fotogramas a la vez; si un render aún se cancela por falta de memoria, ejecútalo de nuevo con --concurrency 1.

Antes de mostrarlo, toma tres fotogramas y míralos (inicio, mitad, final), o reprodúcelo si tu cliente puede. Luego, muestra al usuario la portada, la hoja y la ruta del MP4.

Varias cuentas: nunca publiques el mismo archivo en muchas cuentas. Haz una variante por cuenta (un gancho, tema u orden de escenas diferente, guardado como su propio JSON) para que no haya dos cuentas que publiquen un contenido casi duplicado.

5. Publica (WoopSocial, con confirmación)

Lee references/woopsocial.md. En resumen:

1. social_accounts_list para encontrar las cuentas (conéctalas primero si es necesario).
2. Para TikTok, social_accounts_get_platform_inputs para la cuenta: las opciones de privacidad y el video más largo que permite. El usuario elige la privacidad; no hay valor por defecto.
3. Sube: media_uploads_create_session con el tamaño exacto en bytes de report.json, guarda la respuesta como session.json, ejecuta node upload.mjs session.json out/short/short.mp4, luego media_uploads_complete_session hasta que esté READY.
4. Escribe el título por plataforma (TikTok y Reels: una línea que añada algo al video más 3 a 5 hashtags específicos; YouTube: un título de menos de 100 caracteres más una descripción). Usa contentOverride para el texto por plataforma.
5. posts_validate, luego muestra al usuario: cuentas, título por plataforma, privacidad, hora de programación con zona horaria, la portada. Espera un "sí" claro. Luego posts_create y posts_get.

Campos de divulgación: isYourBrand: true en TikTok cuando el short promociona el producto propio del usuario; isAiGeneratedContent solo para imágenes, video o voz de IA realistas (el texto cinético no lo necesita). YouTube madeForKids es una declaración legal: pregunta, nunca adivines.

6. Informa

Muestra: la ruta del MP4, la duración, la hoja, dónde se publicó (enlaces de posts_get) o la programación, y cualquier cosa que no hayas podido hacer. Nunca inventes visitas o resultados; léelos más tarde con social_account_posts_list e informa la fecha en que fueron recopilados.

Editar la apariencia

• Colores de marca: pasa theme como un objeto (bg, fg, accent, accentText, font, uppercase). Mantén el contraste del texto en 7:1 o mejor; verifica también el acento sobre el fondo.
• Fotos o video detrás de las escenas: image por escena o background para todo el short. Se atenúan bajo el color del tema para que el texto siga siendo legible. Usa archivos que el usuario posea o tenga licencia, y acredítalos en el título cuando la licencia lo exija.
• Fuentes incluidas: Anton (condensada, mayúsculas, llamativa), Poppins, Inter. Todas OFL.
• Para cambiar las plantillas en sí, edita src/Short.tsx y previsualiza con npm run studio.

Casos extremos

• Sin fuente para un número: no lo uses. Di qué falta.
• Texto que no cabe: divide la escena; no reduzcas la fuente por debajo del mínimo (el renderizador no lo hará).
• Texto de derecha a izquierda o CJK, o emojis: las fuentes incluidas no los cubren y pueden mostrarse como cuadros vacíos. Dilo y déjalos fuera (los emojis pueden ir en el título).
• El usuario quiere un sonido de moda: las publicaciones API no pueden añadir uno. Publica en TikTok con postMode: MEDIA_UPLOAD para que llegue a la bandeja de entrada de TikTok y se termine en la aplicación.
• El render falla en Linux con bibliotecas faltantes: instala los paquetes listados en references/platform-specs.md.
• Windows: pasa siempre las props en el archivo JSON, nunca en línea en la línea de comandos.

Barra de calidad

Antes de darlo por terminado, debe cumplir con todo esto:

• El fotograma 0 muestra el gancho completo (verifica cuts.jpg); aproximadamente 10 palabras o menos, indicando el beneficio.
• Cada escena dice una cosa; ninguna escena supera aproximadamente las 14 palabras.
• Cada número coincide con su fuente; la fuente está en pantalla o en el título.
• Sin advertencias, o el usuario las vio y eligió --force.
• Ambas hojas verificadas: ningún texto fuera de la línea discontinua de la zona segura, destacados en las palabras correctas.
• De 15 a 59 segundos.
• Una versión distinta para cada cuenta.
• El usuario confirmó antes de publicar cualquier cosa.