Communitygithub.com

CrissAlvarezH/video-animado

Crea videos animados con código usando Remotion (React, SVG, three.js): explicadores, historias de personajes, gráficos en movimiento, tipografía cinética, collage en papel e infografías animadas, en 2D o 3D, a partir de un guion o voz en off, en cualquier relación de aspecto. Úsalo cuando te pidan animar un guion, hacer un video animado o Reel, o gráficos en movimiento. No sirve para editar metraje de cámara (video-edit) ni clips generados por IA (higgsfield-*).

¿Qué es video-animado?

Esta habilidad convierte un resumen en un video animado completamente generado con código, donde cada imagen se dibuja de forma procedimental o se construye a partir de activos fuente aprobados y renderizados de manera determinista. Está diseñada para desarrolladores y agentes de IA que necesitan producir videos explicativos, historias con personajes, gráficos en movimiento, tipografía cinética e infografías animadas, ya sea en 2D o 3D, en cualquier relación de aspecto. La habilidad se apoya en Remotion (React, SVG, three.js) y funciona mejor con modelos potentes y alto esfuerzo. El proceso incluye una lluvia de ideas visual, aprobación del concepto, storyboard, prueba en silencio y revisión, todo guiado por principios creativos como "la imagen explica, la voz confirma" y "el color dirige la mirada". También ofrece pautas para escalar la producción según la duración y complejidad del proyecto, desde piezas cortas hasta revisiones de películas completas.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/CrissAlvarezH/ai-reel-gen-app/tree/HEAD/.claude/skills/animated-video

Preguntar en tu IA favorita

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

Documentación

Video animado

En un espacio de trabajo de Reel Studio: carga la habilidad reel-studio (.claude/skills/reel-studio/SKILL.md) y la habilidad de estilo del video (styles/<id>/SKILL.md) primero. Estas tienen prioridad sobre los valores predeterminados que siguen: el estilo ya está elegido por video (no ofrezcas otros looks ni rondas de fotogramas de estilo), la narración es de ElevenLabs (voz desde Reel Studio → Ajustes → Voz) con tiempos de tools/el_words.py (no Whisper), los proyectos nuevos comienzan desde la plantilla del estilo (no templates/remotion-film/). La búsqueda de imágenes es libre en toda la web; Ajustes → Imágenes solo controla las integraciones API opcionales y la generación de imágenes. Usa esta habilidad para el método: lluvia de ideas visuales, aprobación del concepto, storyboard, prueba en silencio, revisión.

Convierte un resumen en un video animado terminado en el que cada imagen está hecha con código: dibujada procedimentalmente, o construida a partir de activos fuente aprobados renderizados de manera determinista. El metraje de imágenes o generadores de video es una ruta separada (paso 2). Lee primero ~/.animated-video/profile.md si existe: las preferencias declaradas del usuario tienen prioridad sobre los valores predeterminados aquí.

Qué hace la película

Sé tan inventivo como la idea lo permita. Para cada concepto que la película muestre, busca la imagen más sorprendente que aún lo haga comprensible. Las ideas descabelladas, imposibles, divertidas o hermosas son bienvenidas, y cada una se juzga con una prueba: ¿el espectador entiende el mecanismo más rápido, o lo recuerda por más tiempo, que con la imagen literal? La imagen literal es el plan de respaldo que gana solo cuando nada la supera. La precisión verifica una idea; una metáfora que la narración fundamenta se mantiene.

La imagen explica; la voz confirma. Sin sonido, un espectador aprende cada paso de lo que sucede en pantalla: el mecanismo se representa como causa y efecto (cortar, enviar, golpear, copiar), la idea de cada línea visible por su palabra, con etiquetas que apoyan el evento en lugar de reemplazarlo (movimiento).

La imagen guarda la pregunta. Un guion mantiene una pregunta abierta y la responde en pasos. El primer fotograma plantea esa pregunta, y ninguna imagen, etiqueta o título muestra la respuesta antes de que la narración la alcance: un espectador que ya ha visto la respuesta tiene una razón para irse.

El color dirige la mirada. Decide qué significa cada color desde el principio: la cosa que el espectador sigue lleva el acento y es lo más brillante y saturado del fotograma, y un color mantiene su significado durante toda la película. Dale a cada otro rol su propio color y deja que todo lo que no lleva significado permanezca en silencio. Para igualar un look de referencia, muestra sus colores de sus fotogramas y dale a los animadores los números: las luces, la niebla y la gradación desplazan un color nombrado hacia el gris.

Diseña fresco para cada resumen. Los paquetes de estilo, las piezas y las películas anteriores son puntos de partida. Una película anterior que al usuario le gustó establece el estándar de acabado y ritmo, nunca las ideas, los dispositivos o el look.

La retroalimentación reduce una imagen, nunca la imaginación. Cuando el usuario rechaza una idea, anota lo que estaba mal con esa idea (confundió, se sintió forzada, se vio barata) y encuentra una mejor de cualquier tipo. Se convierte en una regla sobre una categoría completa solo cuando el usuario la enuncia como tal, y los resúmenes que escribes para otros agentes llevan solo las reglas que el usuario enunció.

Pregunta con una recomendación, para que "sí" sea una respuesta completa. Di una vez al principio que la habilidad funciona mejor con el modelo más potente disponible y con alto esfuerzo.

Escala la producción según la pieza

  • Corta o simple: un solo agente puede realizarla, verificando fotogramas fijos. La lluvia de ideas aún va a un agente nuevo y la prueba en silencio aún se ejecuta.
  • Más larga, o con muchos actos: mantén las imágenes, el concepto y el look con un agente hasta que el usuario los apruebe, luego paraleliza la construcción según convenga. El storyboard fija la idea de cada ritmo; quien anima posee cómo se mueve y propone una mejor imagen cuando ve una. Mantén una hoja de señales para toda la película para que el sonido se mantenga intencional. En ejecuciones largas, envía el estado con un fotograma fijo y el tiempo total restante; haz que los agentes marquen las líneas de estado con el reloj de la máquina, ya que los tiempos autoinformados pueden desviarse por horas.
  • Una revisión de una película terminada: pregunta qué secciones reconstruir, recomendando las más débiles; mantén el resto y empalma las partes nuevas.
  • Un inserto para la línea de tiempo de otra persona (un plano animado dentro de una edición de cámara, que video-edit posee): insertos. Cuando no esté claro quién posee la línea de tiempo, pregunta una vez.
  • Un presentador en cámara en la película: composición antes de que esos planos sean planificados.

1. Encuentra las imágenes y el concepto

Elige la columna vertebral en dirección: una historia (alguien que quiere algo) o un explicador (cómo funciona algo, por qué, qué significa un número). Las imágenes provienen de un agente de lluvia de ideas nuevo que no ve reglas de producción, juzgadas por un selector separado (encuentra las imágenes); luego conceptos que realmente se diferencian, tu recomendación, y el elegido como una hoja de ritmos temporizada con la imagen de cada ritmo. Un guion terminado fija las palabras, no las imágenes. Con la habilidad de guion de video instalada, verifica la narración contra su lista de verificación.

Obtén la aprobación del usuario del concepto y sus imágenes antes de construir, incluidas las piezas cortas.

2. Fija el formato y el estilo

  • Cuando la solicitud nombre el formato y el estilo, confírmalo en una línea. De lo contrario, muestra estilos que realmente se diferencien como fotogramas de estilo del mismo ritmo (estilos) y obtén una elección; lee el paquete del estilo elegido cuando lo tenga.
  • Pregunta sobre la ruta y su costo: hecho en código es gratuito por plano y consistente; el video de IA cuesta por clip y varía.
  • Busca fotos de los objetos, lugares e interfaces reales que la película muestra. Si aparece una persona real, pregunta dónde vive su metraje y extrae fotogramas de él.

3. Construye la columna vertebral de audio

Cada ritmo se temporiza con la narración (sin una, con la base musical, elegida primero). Prefiere la grabación del usuario; antes de que exista, construye sobre temporizaciones de palabras provisionales, etiquetadas. templates/remotion-film/align.py proporciona marcas de tiempo de palabras y una envolvente de sonoridad; deriva cada señal de las palabras con cue("frase"), para que una nueva VO re-temporice la película. Los subtítulos son unidades de sentido escritas a mano verificadas contra la transcripción. La música y los efectos se envían con el primer corte: los archivos del usuario, la biblioteca de activos o muestras en disco antes de la síntesis (templates/parts/audio/designed.py), y cualquier cosa sintética está etiquetada.

4. Esqueleto y storyboard

Copia templates/remotion-film/, conecta actos, subtítulos y audio, y renderiza fotogramas fijos a lo largo de la línea de tiempo (canalización). Los hechos no verificados se quedan fuera de la película.

Muestra al usuario un storyboard de fotogramas clave antes de la animación completa: un fotograma fijo por ritmo en el estilo elegido, construido en los archivos de escena reales para que crezca hasta convertirse en los planos terminados. Los fotogramas fijos aprobados no muestran si sucede algo entre ellos; cuando el significado vive en el movimiento, una animática (formas aproximadas que realizan los ritmos sobre la VO) lo muestra de manera económica.

5. Construye los activos y los planos

Busca primero en la biblioteca de activos cuando esté instalada. Las piezas recurrentes se mantienen a cada escala que la historia necesita: personajes dibujados según personajes; partes tiene un globo terráqueo, un iPhone de iMessage, sonidos diseñados, un kit de realismo y un kit de movimiento para movimiento denso con three.js. Reestiliza lo que tomes.

Cuando varios agentes animen, dales un look y una barra escritos, tomados del paquete de estilo y de los fotogramas de anclaje (el fotograma de la película de referencia para cada ritmo, o el storyboard). En cada estilo, un objeto, interfaz, empresa o lugar real es reconociblemente sí mismo, y un sustituto recibe el mismo cuidado. Deriva los eventos de sonido de cada acto de las constantes que lo dibujan, para que mover un ritmo mueva su sonido.

6. Revisa y entrega

Los agentes ven fotogramas, no reproducción: verifica el movimiento como tiras de fotogramas consecutivos (verificaciones temporales) y el audio mediante medición, y di lo que solo se midió. Cuando no puedas confiar en tu propio ojo, haz que agentes nuevos independientes juzguen (revisión); deja de iterar cuando una ronda gane poco o el problema principal necesite al usuario.

Antes de que el primer corte completo vaya al usuario, un juez nuevo ejecuta la prueba en silencio en él; arregla lo que no pueda seguir. Un corte completo rechazado se reinicia desde las imágenes (reinicio).

Renderiza el final (render.sh normaliza la sonoridad; películas largas en fragmentos) y verifica el primer fotograma, el último segundo y la sonoridad. Reporta la ruta, los problemas abiertos, las verificaciones omitidas, las imágenes obtenidas y cualquier cosa sintética o inventada. Compromete cada versión en el repositorio git del proyecto. Con la biblioteca de activos instalada, cierra su catálogo.

A petición, reflexiona con el protocolo de reflexión.

Individual skills in this repo

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

CrissAlvarezH/new-style

Create a new visual style for the creator's videos in a Reel Studio workspace (styles/<id>/style.json): interview him for its name, feel, colours and what each one means, fonts, motion, where pictures come from, reference links and images, then write the style so it shows in Estilos and new videos can use it. Use when he asks for a new style or presses "Nuevo estilo" on the Estilos page.

CrissAlvarezH/persona-hablando

The "Persona hablando + animaciones" format of a Reel Studio video — the creator talks to camera in his own recording; you transcribe it, agree the cuts with him (pauses, flubs, retakes), cut it, and lay the video's style animations over or between his shots. Use for any video whose format.txt says persona-hablando.

CrissAlvarezH/reel-studio

How a narrated explainer video is made in a Reel Studio workspace, in any visual style — script, pictures, voice, images, build, board, sound, mute test, render — following the creator's settings from the studio (profile, format, voice, image sources). Use for any new or revised video in a project's videos/ (projects/<id>/videos/). The video's style adds its own skill (styles/<id>/SKILL.md) for the look and the Remotion kit; LESSONS.md has what past videos taught.

CrissAlvarezH/video-script

Write short-form video scripts that hold viewers, using the creator's own video analytics. Use when choosing the hook of a chosen idea, writing or tightening a script before filming (talking-head or narrated explainer), or turning a posted video's insights into lessons. Coming up with ideas is content-ideas'.

Skills relacionados