TIPS 56 · VIDEO

Este vídeo lo ha montado Claude

Vídeos hechos de código con Remotion y Claude Code: las skills oficiales, el flujo del guion al archivo final, el control de los fotogramas y cómo meterlo todo en una skill que arranca con un comando.

Qué es y por qué importa

Montar a mano 45 segundos de vídeo vertical son horas: cortes, subtítulos palabra por palabra, tiempos. Y si cambias una frase del guion, rehaces la mitad del trabajo.

Remotion cambia las reglas: es una librería que hace vídeos con React. Cada vídeo es un proyecto React, cada escena es un componente, es decir, un trozo de código que dice qué hay en pantalla en cada fotograma. Como es código, Claude Code sabe escribirlo, cambiarlo y exportarlo. Cambias una frase, regeneras, y el vídeo cambia.

Nuestros vídeos los hacemos así, con una skill propia: le escribo la idea y ella hace guion, voces, subtítulos, escenas, exportación, y luego revisa los fotogramas uno a uno. Esta guía es para quien tiene que publicar vídeos y no tiene tiempo, o ganas, de aprender a montar.

1. El proyecto y las skills oficiales

Necesitas Node.js y Claude Code. Remotion tiene una página dedicada a Claude Code, y estos son sus comandos, en orden:

Los comandos
npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

El primero crea un proyecto vacío, el tercero instala las skills de Remotion para agentes, el último abre Remotion Studio: la vista previa del vídeo en el navegador. Luego, en un segundo terminal, en la misma carpeta, arrancas claude. Las skills también se instalan con npx skills add remotion-dev/skills. Cada una se llama con la barra:

  • /remotion-best-practices: las contiene todas. Si no sabes cuál usar, usa esta.
  • /remotion-create: un proyecto o una composición nueva (una composición es un vídeo, con medidas, fotogramas por segundo y duración).
  • /remotion-markup: animaciones, maquetación, textos, fuentes, audio y tiempos.
  • /remotion-captions: los subtítulos.
  • /remotion-render: exporta un vídeo o un solo fotograma.
  • /remotion-upgrade: actualiza Remotion y las skills instaladas.

2. Del guion al archivo final

  1. El guion. Frases cortas, una cosa por frase. Para nosotros, 45-55 segundos son unas 120 palabras.
  2. Las voces: ElevenLabs u OmniVoice. Un archivo de audio por cada frase: así cada escena dura exactamente lo que su frase, y si cambias una solo regeneras esa.
  3. Los subtítulos sobre las palabras. Se transcribe el audio con los tiempos de cada palabra. Remotion también lo hace en local, gratis, con Whisper.cpp (el paquete @remotion/install-whisper-cpp), y con createTikTokStyleCaptions() agrupa las palabras en páginas como en las redes.
  4. Las escenas. Un componente por escena, puestas en fila con los tiempos sacados del audio, nunca escritos a mano. Las medidas las decide la composición: para un vídeo vertical, 1080×1920.
  5. La exportación, con npx remotion render. Luego el control, que merece su propia sección.
El mensaje
Crea un vídeo vertical de 45 segundos con este guion: [guion]. Usa Remotion, 1080×1920, una escena por frase, voces con [ElevenLabs u OmniVoice], un archivo de audio por frase, subtítulos sobre las palabras. Saca los tiempos del audio, no los escribas a mano. Antes de exportar, enséñame la lista de escenas con inicio y fin.

3. El control de los fotogramas

Es la parte que marca la diferencia, y la que yo a mano no haría nunca. Claude no ve un vídeo como tú, pero las imágenes sí. Así que exporta fotogramas fijos en los momentos que importan, uno con npx remotion still, muchos de una vez con npx remotion render y la opción --frames, y los pone en una hoja de contactos: una página con todos los fotogramas en cuadrícula. Luego la mira y busca:

  • textos que se salen de los bordes o acaban debajo de los botones de la red social;
  • un subtítulo que no corresponde a la palabra dicha en ese momento;
  • un fotograma vacío o negro justo en el corte;
  • un elemento que aparece antes de tiempo, o una pantalla que no muestra lo que dice la voz.
El mensaje
Revisa cada corte en una hoja de contactos: exporta un fotograma justo antes y otro justo después de cada corte, más uno a mitad de cada subtítulo, ponlos en una cuadrícula con el número de fotograma debajo y mírala. Búscame textos cortados, subtítulos equivocados, fotogramas vacíos. Corrige, vuelve a exportar y rehaz la hoja hasta que esté limpia. Luego dime qué has corregido.

4. Todo en una skill, un comando con la idea

Cuando el flujo funciona, lo metes en una skill. Una skill es una carpeta con un archivo SKILL.md dentro: las instrucciones que Claude Code sigue cuando escribes /nombre-de-la-skill. La pones en ~/.claude/skills/<nombre>/SKILL.md para tenerla en todos los proyectos, o en .claude/skills/<nombre>/SKILL.md para tenerla solo en este. Lo que escribes después del comando llega a la skill como $ARGUMENTS. La nuestra funciona así: escribo el comando y la idea, ella hace el resto.

El archivo
---
name: video
description: Crea un vídeo vertical con Remotion, de la idea al archivo final.
disable-model-invocation: true
argument-hint: [idea del vídeo]
---

Idea: $ARGUMENTS

1. Escribe el guion: <duración>, frases cortas. Enséñamelo y espera mi visto bueno.
2. Genera las voces con <ElevenLabs u OmniVoice>, un archivo por frase.
3. Transcribe el audio con los tiempos de cada palabra y pon los subtítulos sobre las palabras.
4. Construye las escenas siguiendo estilo.md.
5. Exporta en 1080×1920.
6. Haz la hoja de contactos de cada corte y revísala con controles.md. Corrige hasta que esté limpia.
7. Dime dónde está el archivo y qué has corregido.

disable-model-invocation: true quiere decir que solo arranca cuando la llamas tú: un vídeo cuesta tiempo y créditos de voz, mejor no lanzarlo por error. El estilo y la lista de controles van en archivos aparte, en la misma carpeta: Claude los lee solo cuando hacen falta. La documentación recomienda mantener SKILL.md por debajo de las 500 líneas.

El mensaje
Convierte lo que hemos hecho hoy en una skill: crea .claude/skills/video/SKILL.md con los pasos en orden, pon el estilo en estilo.md y en controles.md los controles y los errores que hemos encontrado. Usa disable-model-invocation: true y la idea en $ARGUMENTS.

5. La licencia de Remotion

Remotion es gratis, también para uso comercial, si eres una persona, una empresa con 3 empleados como máximo o una organización sin ánimo de lucro, y también para probarlo antes de usarlo para trabajar. Por encima de 3 empleados hace falta la Company License. No puedes revender Remotion ni una versión modificada tuya. Antes de empezar, vuelve a leer la página de la licencia, porque las condiciones pueden cambiar, y revisa también las condiciones del servicio que usas para las voces.

Errores comunes

  • Escribir a mano los tiempos de las escenas. En cuanto cambias una frase, todo se desplaza: los tiempos se sacan de la duración del audio.
  • Mirar solo el vídeo final. Un error que dura un fotograma no lo ves a velocidad normal: en la hoja de contactos, sí.
  • Subtítulos sacados de una transcripción por frases. Hacen falta los tiempos de cada palabra, si no el texto llega antes o después de la voz.
  • Una skill que arranca sola. Sin disable-model-invocation: true, Claude puede lanzarla cuando una petición se le parece.
  • Dar la licencia por hecha. Si la empresa supera los 3 empleados, hace falta la Company License.

Lista de comprobación

  • El proyecto Remotion arranca y Remotion Studio muestra la vista previa
  • Las skills de Remotion están instaladas y /remotion-best-practices responde
  • Un archivo de audio por frase, y los tiempos de las escenas salen del audio
  • Los subtítulos siguen las palabras, no las frases
  • La hoja de contactos de cada corte está limpia
  • La skill arranca con /nombre y la idea, y solo cuando la llamo yo
  • He comprobado que la licencia de Remotion cubre mi empresa

Preguntas frecuentes

¿Tengo que saber React?

No, el código lo escribe Claude. Pero saber leer una escena ayuda: cuando algo no te gusta, puedes decir «sube el título en la escena 3» en lugar de «no me convence».

¿Y si cambio una frase después de exportar?

Cambias la frase en el guion, regeneras solo la voz de esa frase, y Claude rehace los tiempos, vuelve a exportar y revisa otra vez la hoja de contactos. Por eso conviene un archivo de audio por frase.

¿Funciona solo con Claude Code?

No. La página de Remotion sobre agentes también cita Codex, Kimi Code y OpenCode, y las skills siguen el estándar abierto Agent Skills. Esta guía usa Claude Code porque es el que uso yo.

← Todas las guías