Communitygithub.com

stanglivideo

Crea vídeos de motion design con código usando Remotion, sincronizados con música y efectos de sonido que caen exactamente en el fotograma. Ideal para promos, vídeos de lanzamiento, explicativos, cortes para redes, loops de landing page o cualquier vídeo de motion design, tenga o no un producto asociado.

¿Qué es stanglivideo?

Este skill transforma la creación de vídeos de motion design en un proceso sistemático, basado en código con Remotion. El agente analiza el producto del usuario, estudia de 2 a 5 vídeos de referencia seleccionados por el usuario (extrayendo fotogramas, espectrogramas y volumen), y se detiene en múltiples puntos para obtener la aprobación del usuario sobre el aspecto visual, las afirmaciones, la música y el storyboard. Todo el diseño se construye a partir del sistema de diseño propio del producto, y el vídeo final se evalúa mediante un riguroso sistema de puntuación que verifica la sincronía, el volumen y la calidad de imagen antes de darlo por terminado. Incluye modos opcionales para regenerar galerías de referencia con nuevas entradas y para generar fotos o loops de metraje con Gemini cuando el código no puede dibujarlos.

Compatible con~Claude Code~Codex CLI✓Cursor✓Gemini CLI
npx skills add https://github.com/ilijachrchev/skills/tree/HEAD/skills/stanglivideo

Preguntar en tu IA favorita

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

Documentación

¿Qué hace stanglivideo?

Una película que parece hecha por el producto, se mueve al ritmo y suena bien: cada sonido en su fotograma, cada palabra en pantalla con tiempo suficiente para ser leída, nada fuera del encuadre. Construida en Remotion desde código, por lo que permanece editable.

Las rutas a continuación son relativas a la carpeta de este skill a menos que comiencen con una ruta de proyecto de película. $PY es el python que el doctor imprime (el .venv del skill).

Cada ejecución comienza aquí

  1. Doctor. Primera ejecución (sin .venv o sin taste.md en esta carpeta): node scripts/doctor.mjs --setup. Crea .venv, instala requirements.txt y crea taste.md a partir de taste.example.md. Ejecuciones posteriores: node scripts/doctor.mjs. Verifica Node 18+, Python 3.10+ con numpy y scipy, un ffmpeg completo y el skill complementario. Si Node mismo falta, el doctor no puede ejecutarse: dígalo y proporcione la línea de instalación a continuación.

  2. Dígale al usuario claramente qué falta. Para cada FALLO, una línea corta: qué falta, por qué el skill lo necesita y el comando exacto para solucionarlo en su sistema. Luego deténgase hasta que el usuario diga que está resuelto y ejecute el doctor nuevamente.

    FaltaPor quéWindowsMac
    Node 18+construye y renderiza la películawinget install --id OpenJS.NodeJS.LTS -ebrew install node
    Python 3.10 a 3.13puntúa el sonido y ejecuta las comprobacioneswinget install --id Python.Python.3.12 -ebrew install [email protected]
    ffmpeg (compilación completa)análisis, codificación, comprobaciones de sonoridadwinget install --id Gyan.FFmpeg -ebrew install ffmpeg
    skill complementarioreglas de la API de Remotionnpx skills add remotion-dev/skillsigual

    Después de instalar Node, Python o ffmpeg, el usuario debe abrir una nueva terminal para que estén en el PATH y luego ejecutar node scripts/doctor.mjs --setup nuevamente. GEMINI_API_KEY es opcional: menciónela solo cuando realmente se desee una imagen o un loop generados.

  3. Skill complementario (obligatorio). remotion-best-practices, los skills oficiales de Remotion. No incluido aquí. Úselo para preguntas sobre la API de Remotion (medios, fuentes, subtítulos, opciones de renderizado).

  4. Gusto. Lea references/base-rules.md y taste.md (créelo a partir de taste.example.md si aún falta). Estas son las reglas permanentes del usuario; taste.md prevalece en caso de conflicto.

Innegociables

  • Su diseño gana. Los colores, tipografía, componentes, logotipo, voz y afirmaciones provienen del producto. Nunca incorpore el gusto de otro producto, incluido cualquier elemento de este skill que contradiga su diseño.
  • Cada fotograma es una función pura del tiempo. Sin transiciones CSS o keyframes, sin temporizadores, sin Date.now(), sin Math.random (rand con semilla), sin estado entre fotogramas.
  • Una única fuente de temporización. Cada src/films/<film>/cues.json contiene todos los tiempos de las señales. El TSX de la película lo importa y la puntuación lo lee (sound/cues.py). Ninguno tiene nunca un tiempo literal.
  • Medir, nunca adivinar. Los beats del audio, las posiciones de la superposición de depuración, los colores de los píxeles decodificados.
  • Afirmaciones honestas. Muestre solo lo que el producto hace. La lista de prohibiciones es aprobada por el usuario antes de redactar el texto.
  • Pregunte primero antes de confirmar, enviar o publicar cualquier cosa, y antes de cada llamada a la API de pago.
  • Sin guiones em o en en ningún texto, archivo o mensaje.

Flujo de trabajo y puertas de aprobación

Cada PARADA es una puerta estricta: pregunte (AskUserQuestion), espere y registre la respuesta en el BRAND.md del proyecto.

  1. Recepción (obligatorio). Pida de 2 a 5 vídeos que le gusten al usuario, una línea cada uno sobre lo que le gusta, incluido el sonido. Ejecute node scripts/intake/intake.mjs <project>/intake <videos...> y lea todas las hojas. Consulte references/intake.md.
  2. Descubrimiento. Aprenda el producto: archivos de reglas, tokens (claro y oscuro), componentes, logotipo, página de inicio, pantallas y texto reales, afirmaciones. Consulte references/discovery.md.
  3. Entrevista. El brief y los ingredientes. Consulte references/interview.md. Luego:
    • PARADA: claro u oscuro. Por película cuando hay varias; un conjunto mezcla ambos si el producto tiene ambos temas.
    • PARADA: afirmaciones prohibidas. Muestre lo que afirmarán las películas y la lista de lo que nunca deben decir (del código, el sitio y el usuario). Espere la aprobación de ambas listas.
  4. Kit de marca. Complete templates/BRAND.md en el proyecto. Cada regla cita su fuente.
  5. Música. Examine y mida los candidatos. PARADA: elección de música. Consulte references/music.md.
  6. Historia. Complete templates/film-prompt.md; escriba el plan de beats como cues.json. Consulte references/story.md y references/ingredients.md.
  7. Proyecto. node scripts/new-project.mjs <dir>, npm install. Un kit en src/kit/; una carpeta por película. Consulte references/engine.md.
  8. Storyboard. Construya las escenas, renderice de 5 a 8 fotogramas por película (en el proyecto: node scripts/stills.mjs), muéstrelos en mosaico. PARADA: aprobación del storyboard antes de cualquier renderizado completo. Consulte references/review.md.
  9. Renderizado. En el proyecto: node scripts/render.mjs <Composition> out/<film>.mp4 (seguridad incorporada). Hoja de contacto, revisión, corrección.
  10. Puntuación. En el proyecto: sound/scores/<film>.py a partir de cues.json; $PY sound/render.py <film>. Consulte references/sound-rules.md.
  11. Puerta (obligatorio). En el proyecto: $PY scripts/gate.py <film>. Nada se considera terminado hasta que pase. Consulte references/render.md.
  12. Entrega. Rutas, duraciones, sonoridad, pico, resultado de la puerta, qué cambió. Mantenga cada versión.

La puerta de sincronía

  • Los whooshes se colocan por su pico en el fotograma más rápido del movimiento (align="peak"; kit/speed.ts encuentra el fotograma más rápido de un movimiento de cámara; una entrada E.out es más rápida al inicio, una salida E.exit al final).
  • Los pops caen en el fotograma donde aterriza el elemento. Los chings en el fotograma donde aparece el número final.
  • Los risers terminan en el golpe (align="end").
  • Cada sonido lleva una etiqueta que nombra su evento en pantalla.
  • Después de cada mezcla: sound/check.py (ningún sonido antes de su cambio de imagen), scripts/final-check.py (-14 LUFS dentro de 1 LU, pico verdadero -2 dBFS o inferior, rango de sonoridad 4 LU o más, sin silencio, imagen idéntica al renderizado silencioso, duraciones iguales) y scripts/verify.py, todos ejecutados por scripts/gate.py. Una bandera se corrige moviendo el sonido (o la señal), nunca eximiéndola sin mirar su hoja.

Memoria del gusto

  • references/base-rules.md se envía con el skill: correcciones de películas reales, como reglas generales.
  • taste.md (ignorado por git, a partir de taste.example.md) es el de esta máquina. Cada nueva corrección que el usuario da se escribe allí como una regla general antes de arreglar la película, redactada de manera que hubiera prevenido el problema en cualquier película. Léalo al inicio de cada ejecución.
  • Una regla que se cumple en varias películas puede promoverse a base-rules.md mediante una pull request a este skill, nunca mediante una edición silenciosa.

Seguridad (incorporada en los scripts)

templates/project/scripts/safety.mjs, utilizado por cada paquete y renderizado: el espacio libre en disco se verifica primero (mínimo 10 GB), como máximo dos renderizados se ejecutan a la vez, los paquetes temporales se eliminan después de cada trabajo y los obsoletos antes. Renderice con concurrencia 1 en una máquina con poca memoria. Detenga solo los procesos que usted inició.

Modos opcionales

  • Medios generados. Solo para lo que el código no puede dibujar: fotos reales, texturas fotográficas, recortes y fondos filmados (seda, líquido, luz) cuando el usuario desea un aspecto real filmado. scripts/gemini/image.mjs toma imágenes de referencia para que los resultados coincidan con un aspecto elegido, más aspecto, tamaño, cambio de tamaño y clave de croma; scripts/gemini/video.mjs hace clips de Veo a partir de un primer fotograma con paleta combinada (o loops nativos). Clave de GEMINI_API_KEY en el entorno solamente; cada llamada imprime su costo y se ejecuta solo después de la confirmación del usuario. Consulte references/gemini.md.
  • Herramientas de medios (gratuitas, cualquier clip). scripts/media/loop.py convierte un clip en un loop de fondo sin costuras (búsqueda de costura, disolución exacta, interpolación a los fps de la película, loop más póster más secuencia de fotogramas más hoja de límites); LoopBackground en el kit lo coloca debajo de la capa de movimiento desde el cues.json de la película. scripts/media/clip.py sondea, recodifica al formato del proyecto, recorta bordes y extrae fotogramas o una hoja. scripts/media/imgpost.py aplica clave y cambia el tamaño de las imágenes.
  • Actualización. Cuando el usuario lo solicite: vuelva a estudiar prompt-motion.com, skillry.dev y el repositorio awesome-opus5-5-videos en busca de nuevas entradas y proponga actualizaciones de referencia mediante PR. Consulte references/refresh.md.

Piso de calidad (siempre)

  • Solo las propias superficies, colores, bordes y sombras del producto. Sin paneles o tintes inventados.
  • Legible en el tamaño de entrega. Menos palabras superan a palabras más pequeñas. Las líneas que la gente debe leer se revelan a aproximadamente 0.2 s por palabra y se mantienen 2 s o más.
  • Cada tarjeta, y la marca de cierre, completamente dentro del encuadre en cada fotograma de cada movimiento.
  • Mantenga cada toma de 5 a 6 s con un empuje lento; cuando se sienta atareado, corte una pantalla en lugar de acelerar.
  • El texto nunca está cubierto por un cursor o chip, nunca cruza otro texto, nunca se recentra mientras se construye.
  • Algo sucede en cada beat; los límites de las escenas caen en los compases; el último fotograma de un loop es igual al primero.
  • En un conjunto, no hay dos películas que compartan una estructura; cualquier cosa que se mantenga lado a lado está centrada exactamente.
  • Sin efectos que el lenguaje del producto no use: brillos, partículas, anillos de clic, easing con rebote, shaders.

Conocimiento

Trampas que cuestan tiempo real

  • Los fotogramas de Remotion no reenvían los registros de consola: imprima las medidas en el fotograma (kit/debug.tsx).
  • npx remotion still reempaqueta cada llamada: use scripts/stills.mjs (un paquete, muchos fotogramas).
  • El ffmpeg incluido con Remotion no tiene tmix, select o tile: use el ffmpeg del sistema que el doctor verificó.
  • Rango de color: decodifique el fotograma 0 de cada entrega y verifique (verify.py --bg); un master de rango limitado leído como rango completo eleva los fondos oscuros a gris.
  • interpolateColors no puede analizar color-mix(): use hexadecimal para cualquier cosa que anime.
  • Los componentes de imagen asíncronos pueden renderizarse vacíos en un fotograma: use <Img> de Remotion.
  • Un índice calculado a partir del tiempo es -1 justo antes de su sección: fíjelo (safeIndex).
  • will-change en cualquier cosa que la cámara escale desenfoca su texto.
  • Una máscara de revelación de palabras recorta las últimas letras sin relleno: use kit/components.tsx WordReveal.
  • La decodificación de vídeo dentro de los renderizados no es fiable: convierta los loops a secuencias de imágenes.

Individual skills in this repo

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

Skills relacionados