remotion-best-practices (remotion-dev/skills)
Dirige las tareas de Remotion a la guía adecuada: creación de vídeo, marcado, mapas, multimedia e interactividad.
skill de Remotion: la misma calidad de vídeo que sin skill y que una frase de sus reglas, con 1.4x los tokens
Codex CLI · gpt-6-astra
22.9 / 30
Mejora frente a sin skill: -0.01 · Según el caso · 18 ejecuciones
Según el caso: la mejora -0.01 está por debajo de +1.0. Para ser recomendada hace falta un total de 22/30, una calidad de salida de 3.5 y una mejora de +1.0.
SOTA
AprobadaProbada con Codex.
Cubre Codex, Claude Code
Codex CLI 0.166 (nivel SOTA): 18 ejecuciones puntuadas. Una pasada aquí también cubre Claude Code según nuestra regla de niveles; no dice nada sobre el segundo nivel.
Puntuaciones
Cada dimensión va de 0 a 5 y las seis suman el total sobre 30. 5 es mejor en todas las dimensiones. Coste 5 significa barato y rápido. Instalación 5 significa fácil.
- Fiabilidad de activación
- 5.0
- Mejora frente a sin skill
- 2.0
- Calidad de salida
- 4.9
- Coste en tokens y tiempo
- 3.0
- Instalación y portabilidad
- 4.0
- Seguridad
- 4.0
Revisión de seguridad
SeguraEscaneo estático: 13 CRITICAL / 16 HIGH / 0 MEDIUM. Revisión manual: Segura para ejecutar (sandbox sin red). Un escaneo limpio no demuestra que una skill sea segura.
Instalar
npx skills@latest add remotion-dev/skills --skill remotion-best-practices
Commit fijado: 30d4553ecd46fbc5212fd0ff006ae43af522158b
Probada: 2026-11-02
Qué probamos
- Teaser de producto de 15 s — En este proyecto Remotion (componentes React en src/, id de composición 'Main', renderizado con npx remotion render src/index.ts Main), crea un teaser de producto de 15 segundos, 1920x1080 y 30 fps para Tidepool, una suscripción mensual de aperitivos de algas. Texto obligatorio en pantalla: el…
- Explicación animada con gráfico de barras de 20 s — En este proyecto Remotion (componentes React en src/, id de composición 'Main', renderizado con npx remotion render src/index.ts Main), crea una explicación animada de 20 segundos, 1920x1080 y 30 fps: un gráfico de barras de ingresos mensuales (ago $42k, sep $58k, oct $71k). Título 'Ingresos…'
- Vídeo vertical con subtítulos de 30 s — En este proyecto Remotion (componentes React en src/, id de composición 'Main', renderizado con npx remotion render src/index.ts Main), crea un vídeo corto vertical para redes sociales de 30 segundos, 1080x1920 y 30 fps con subtítulos incrustados. Subtítulos, en orden, cada uno en pantalla unos 5 se…
Ventajas
- La skill se activó sin nombrarla: se leyó el archivo de la skill en 6/6 ejecuciones con skill.
- Calidad absoluta alta con la skill: 4.91 sobre 5.
Inconvenientes
- Sin mejora medible frente a sin skill (-0.01, dentro del ruido).
- Un prompt de una frase obtuvo 4.89, frente a 4.91 con la skill (+0.02).
- El control ya obtiene 4.91: efecto techo, así que la prueba no puede mostrar mejora.
- n=2 por tarea y rama; las diferencias de menos de aproximadamente 1 punto son ruido.
Reseña
Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en una máquina de prueba Mac, con un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales en cada ejecución, la skill instalada (grupo con skill), sin ella (control) o sin ella pero con el requisito central de la skill comprimido en una frase añadida al prompt (grupo del prompt de una frase), 2 ejecuciones por grupo y tarea, red desactivada y escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la formulación indicada más abajo). Entorno: la plantilla del proyecto (proyecto Remotion con id de composición Main) es la misma para todos los grupos. El sandbox no tiene red ni herramientas de Remotion, así que ninguno de los grupos pudo iniciar Studio ni renderizar; solo escribieron el código fuente. Después renderizamos cada proyecto en una máquina sin conexión aparte con Remotion 4.0.539. El paso de la skill 'abrir primero la vista previa' no pudo tener lugar.
Comparación de tres ramas
| Rama | Puntuación media (0-5) | Tokens por ejecución |
|---|---|---|
| Sin la skill | 4.91 | 159k |
| Prompt de una frase | 4.89 | 156k |
| Con la skill | 4.91 | 217k |
Medido con Codex CLI en 18 ejecuciones, puntuado con comprobaciones basadas en reglas y sin juez LLM. Total 22.9 / 30, veredicto Según el caso.
Veredicto: Según el caso (22.9 / 30). Fuente: remotion-dev/skills, skills/remotion-best-practices, fijada en el commit 30d4553. Instalación: npx skills@latest add remotion-dev/skills --skill remotion-best-practices. Licencia: Licencia de Remotion (el uso por empresas de más de 3 personas requiere una licencia de pago; solo evaluación).
Qué es
La skill remotion-best-practices, el enrutador del conjunto oficial de skills de Remotion (remotion-dev/skills, versión 4.0.539, Licencia de Remotion). SKILL.md (unas 600 palabras) envía al agente a subskills: crear un vídeo, buenas prácticas de marcado (impulsar la animación con useCurrentFrame() e interpolate(), tomar los fps de useVideoConfig(), nada de transiciones CSS ni clases de animación de Tailwind), mapas, subtítulos, studio, renderizado y más. Unas 12 subskills de Markdown, dos pequeños scripts locales .mjs. También indica al agente que abra la vista previa de Remotion Studio y que no renderice salvo que se lo pidan.
Cómo lo probamos
Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un Mac de pruebas, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales por ejecución, skill instalada (tratamiento) o ausente (control) o ausente con el requisito central de la skill comprimido en una frase añadida al final del prompt (grupo de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la formulación indicada abajo).
Entorno: la plantilla del proyecto (proyecto Remotion con id de composición Main) es la misma para todos los grupos. El sandbox no tiene red ni herramientas de Remotion, así que ninguno de los grupos pudo iniciar Studio ni renderizar; solo escribieron código fuente. Después renderizamos cada proyecto en una máquina separada sin conexión con Remotion 4.0.539. El paso de la skill «abre primero la vista previa» no pudo ocurrir.
- Teaser de producto de 15 s — En este proyecto Remotion (componentes React en src/, id de composición 'Main', renderizado con
npx remotion render src/index.ts Main) crea un teaser de producto de 15 segundos, 1920x1080 y 30 fps para Tidepool, una suscripción mensual de snacks de algas. Texto obligatorio en pantalla: el… - Explicativo animado de 20 s con gráfico de barras — En este proyecto Remotion (componentes React en src/, id de composición 'Main', renderizado con
npx remotion render src/index.ts Main) crea un explicativo animado de 20 segundos, 1920x1080 y 30 fps: un gráfico de barras de ingresos mensuales (ago $42k, sep $58k, oct $71k). Título «Reven… - Short vertical de 30 s con subtítulos — En este proyecto Remotion (componentes React en src/, id de composición 'Main', renderizado con
npx remotion render src/index.ts Main) crea un short social vertical de 30 segundos, 1080x1920 y 30 fps con subtítulos incrustados. Subtítulos, en orden, cada uno en pantalla unos 5 se…
La puntuación es programática (tests ocultos / detección de problemas sembrados / comprobaciones de restricciones / renderizado + OCR cuando corresponde), 0–5 por ejecución. Ningún juez LLM decidió ninguna puntuación.
Resultados
La frase única que recibió el tercer grupo: "Impulsa cada animación con useCurrentFrame() e interpolate()/spring() (nunca transiciones/animaciones CSS), toma los fps de useVideoConfig() y convierte segundos a fotogramas con ello, y estructura el vídeo como escenas <Sequence>/<Series> dentro de la composición."
| Tarea | Puntuación control | Una frase | Con la skill | Tokens control | Tokens de una frase | Tokens con la skill | Skill leída |
|---|---|---|---|---|---|---|---|
| t1-teaser | 5.0 | 4.93 | 5.0 | 230k | 168k | 254k | 2/2 |
| t2-chart | 4.74 | 4.73 | 4.71 | 121k | 168k | 198k | 2/2 |
| t3-vertical | 5.0 | 5.0 | 5.0 | 124k | 129k | 197k | 2/2 |
Puntuación media: 4.91 sin vs 4.91 con la skill (delta -0.01). Tokens por ejecución: 159k vs 217k (1.36x); tiempo 161s vs 177s. Grupo de una frase: 4.89 (la ganancia de la skill sobre la frase única: +0.02; la ganancia de la frase única sobre sin skill: -0.03); tokens de la frase única 156k por ejecución, así que la skill cuesta 1.39x la frase única.
Qué ocurrió
- La calidad de vídeo fue la misma. Los 18 proyectos se renderizaron con el tamaño, la duración y la velocidad de fotogramas correctos, y el OCR encontró todo el texto obligatorio (nombre, eslogan, $14 / caja, línea de cierre, título del gráfico, subtítulos) en cada uno. Puntuación media 4.91 sin la skill, 4.89 con solo una versión de una frase de sus reglas, 4.91 con la skill. Los únicos puntos perdidos, en todos los grupos, son el explicativo con gráfico de barras que se queda quieto durante tramos largos (15-23% de fotogramas con movimiento) y dos teasers de una frase con 48-52%.
- Vimos hojas de contacto del teaser de los tres grupos: todas parecen anuncios de producto terminados (escenas crema y verde oscuro, una ilustración de bolsa, una tarjeta final con el precio) y no pudimos clasificarlas.
- La regla concreta principal de la skill se siguió con o sin ella. Leyendo el código: en los 6 proyectos sin skill ninguno llama a
useVideoConfig()(codifican 30 fps a mano), en los 6 proyectos con skill y los 6 de una frase se usa, y ningún proyecto de ningún grupo usa transiciones ni keyframes CSS. Así que la frase única llevaba la misma regla, y los agentes ya animan conuseCurrentFrame()einterpolate()sin que se les pida. - La skill se lee siempre (6/6 ejecuciones de tratamiento) y cuesta más: 217k tokens por ejecución frente a 159k sin ella (1.36x) y 156k con la frase única (1.39x), 14 comandos frente a 9. Es la sobrecarga más pequeña de las tres skills de vídeo que probamos.
- Parte no pudo ejecutarse. La primera instrucción de la skill es iniciar Remotion Studio y abrir una vista previa antes de construir; sin red ni herramientas eso no ocurrió, así que el resultado es solo el texto de la skill.
Puntuaciones por dimensión
| Dimensión | Puntuación | Motivo |
|---|---|---|
| 1_output_quality | 4.91 | Puntuación media 4.91/5 con la skill (comprobaciones programáticas, véase la tabla por tarea). |
| 2_lift_vs_no_skill | 1.99 | -0.01 puntos frente a 4.91 sin la skill (n=2 por tarea; menos de ~1 punto es ruido). |
| 3_trigger | 5.0 | Archivo de la skill leído en 6/6 ejecuciones de tratamiento. |
| 4_instructions_portability | 4 | Skill enrutadora con muchos archivos de subskills; la regla «abre Studio primero» necesita un navegador y un servidor de desarrollo en marcha, que muchos sandboxes de agentes no tienen. |
| 5_efficiency | 3 | 1.36x tokens (217k vs 159k por ejecución) y 1.10x tiempo (177s vs 161s). |
| 6_safety_hygiene | 4 | Markdown y dos scripts locales .mjs (sin red, sin ejecución); los hallazgos del escáner corresponden a .env/process.env en ejemplos de documentación (claves de Mapbox, ElevenLabs). La Licencia de Remotion exige una licencia de pago para empresas de más de tres personas. |
Límites de esta prueba
- Sin vista previa de Studio, sin renderizado y sin CLI de Remotion en el sandbox, así que el flujo de la skill solo se ejercitó en parte.
- Tres tareas dibujadas por código (teaser, gráfico de barras, short vertical con subtítulos); no se probaron metraje de vídeo, audio, subtítulos desde voz, mapas, Lottie, 3D ni las funciones de renderizado SaaS.
- Los renderizados son en Linux con GL por software y la comprobación de movimiento es un umbral burdo de diferencia entre fotogramas; la tarea del gráfico pierde puntos en todos los grupos.
- Los recuentos de
useVideoConfigprovienen de leer el código y no forman parte de la puntuación de 0-30. - Licencia de Remotion: gratis para individuos y empresas de hasta tres personas, de pago por encima; nosotros solo evaluamos y no redistribuimos.
- n = 2 por grupo y tarea: las diferencias de menos de ~1 punto son ruido.
- La puntuación basada en reglas mide lo que las comprobaciones pueden ver; no puede juzgar el gusto ni si el resultado es el mejor posible.
Seguridad
Consulta security.md. Escaneo: 13 CRITICAL / 16 HIGH / 0 MEDIUM. Veredicto: segura de ejecutar (sandbox sin red). Un escaneo limpio no demuestra que una skill sea segura.
Conclusión
Para vídeos dibujados por código de un solo uso, la skill no marcó ninguna diferencia medible: el agente ya escribe código Remotion sólido, y una frase con la regla clave de la skill reprodujo su pequeño efecto estructural a unos 0.7x del coste. Es lo bastante barata para dejarla instalada si construyes proyectos Remotion a menudo (las subskills cubren mapas, subtítulos y renderizado que no probamos), pero aquí no hay pruebas de que mejore un vídeo sencillo.
Transcripción
Registro de ejecuciones: remotion-best-practices (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Columnas: tarea, grupo-ejecución, puntuación (0-5), tokens, segundos, comprobaciones superadas, archivos de la skill que abrió el agente. t1-teaser control-1: puntuación 5.0, tokens 258594, s 285.6, comprobaciones 5/5, no abrió nada t1-teaser control-2: puntuación 5.0, tokens 202623, s 189.4, comprobaciones 5/5, no abrió nada t1-teaser oneliner-1: puntuación 4.94, tokens 218510, s 266.6, comprobaciones 5/5, no abrió nada t1-teaser oneliner-2: puntuación 4.92, tokens 118109, s 174.8, comprobaciones 5/5, no abrió nada t1-teaser treatment-1: puntuación 5.0, tokens 217450, s 209.8, comprobaciones 5/5, abrió remotion-best-practices t1-teaser treatment-2: puntuación 5.0, tokens 291582, s 227.3, comprobaciones 5/5, abrió remotion-best-practices t2-chart control-1: puntuación 4.73, tokens 130647, s 112.9, comprobaciones 4/5, no abrió nada t2-chart control-2: puntuación 4.74, tokens 112740, s 110.9, comprobaciones 4/5, no abrió nada t2-chart oneliner-1: puntuación 4.73, tokens 140990, s 152.9, comprobaciones 4/5, no abrió nada
18 ejecuciones, 21 artefactos
Resultado de ejemplo
SOTA · With the skill: src/Tidepool.tsx (t1-teaser, run 1, Codex)
import React from 'react'; import {AbsoluteFill, Sequence, interpolate, Easing, useCurrentFrame, useVideoConfig} from 'remotion'; const cream = '#F6F1DF', ink = '#123E36', lime = '#D9EF79', orange = '#FF8552'; const serif = 'Georgia, "Times New Roman", serif'; const easing = {extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const, easing: Easing.bezier(.16, 1, .3, 1)}; const Enter: React.FC<{children: React.ReactNode; delay?: number; style?: React.CSSProperties}> = ({children, delay = 0, style}) => { const f = useCurrentFrame(); return <div style={{...style, opacity: interpolate(f, [delay, delay + 18], [0, 1], easing), translate: `0 ${interpolate(f, [delay, delay + 23], [60, 0], easing)}px`}}>{children}</div>; }; const Wave = ({color = ink, bottom = -100}: {color?: string; bottom?: number}) => { const f = useCurrentFrame(); return <svg width="2200" height="300" viewBox="0 0 2200 300" style={{position: 'absolute', left: -100, bottom, translate: `${Math.sin(f / 65) * 65}px 0`}}><path d="M0 95 Q275 -15 550 95 T1100 95 T1650 95 T2200 95 V300 H0Z" fill={color}/><path d="M0 60 Q275 -50 550 60 T1100 60 T1650 60 T2200 60" fill="none" stroke={color} strokeWidth="2"/></svg>; }; const Pouch = () => { const f = useCurrentFrame(); return <div style={{width: 420, height: 610, position: 'relative', rotate: `${-7 + Math.sin(f / 40) * 1.5}deg`, translate: `0 ${Math.sin(f / 28) * 9}px`, filter: 'drop-shadow(18px 25px 0 rgba(18,62,54,.13))'}}> <svg width="420" height="610" viewBox="0 0 420 610" style={{position: 'absolute'}}> <path d="M26 5 H394 L382 55 L407 573 Q411 600 380 604 H40 Q9 600 13 573 L38 55Z" fill={lime} stroke={ink} strokeWidth="3"/> <path d="M29 18 H391 M32 29 H388 M35 43 H385 M22 577 H398 M22 587 H398" stroke={ink} strokeWidth="2" opacity=".35"/> <path d="M22 472 Q120 427 210 477 T399 477 L404 571 H16Z" fill={ink}/> <path d="M25 455 Q120 410 210 460 T397 460" fill="none" stroke={ink} strokeWidth="3"/> </svg> <div style={{position: 'absolute', top: 77, width: '100%', textAlign: 'center', color: ink}}> <div style={{fontSize: 65, fontFamily: serif, letterSpacing: -4}}>Tidepool</div> <div style={{fontSize: 15, letterSpacing: 4, marginTop: 15}}>SEAWEED SNACKS</div> <svg width="190" height="210" viewBox="0 0 190 210" fill="none" style={{marginTop: 18}}><path d="M96 203 C67 143 135 95 96 12 M96 164 C28 163 29 115 45 100 C48 138 85 116 96 164 M99 118 C157 119 163 70 143 59 C143 89 108 79 99 118 M100 71 C57 74 55 36 66 24 C72 49 94 37 100 71" stroke={ink} strokeWidth="9" strokeLinecap="round"/></svg> <div style={{fontSize: 18, letterSpacing: 3, marginTop: 9}}>A LITTLE OCEAN JOY</div> </div> <div style={{position: 'absolute', top: 513, width: '100%', textAlign: 'center', color: cream, fontSize: 20, letterSpacing: 3}}>CRISP • SAVORY • SEAWEED</div> </div>; }; const Chip = ({x, y, angle, index}: {x: number; y: number; angle: number; index: number}) => { const f = useCurrentFrame(); return <svg width="340" height="260" viewBox="0 0 260 200" style={{position: 'absolute', left: x, top: y, rotate: `${angle + Math.sin(f / 35 + index) * 6}deg`, translate: `0 [... excerpt: first 3200 of 8030 characters]