remotion-best-practices (remotion-dev/skills)

Name: remotion-best-practices (remotion-dev/skills) review
Item: remotion-best-practices (remotion-dev/skills)
Rating: 22.9
Author: Agent Skills

Oriente les tâches Remotion vers le bon guide : création vidéo, balisage, cartes, multimédia et interactivité.

Skill Remotion : même qualité vidéo que sans skill et qu'une phrase de ses règles, pour 1.4 fois les tokens

Selon les casSûr

Codex CLI · gpt-6-astra

22.9 / 30

Gain par rapport à sans skill : -0.01 · Selon les cas · 18 exécutions

Selon les cas : le gain -0.01 est inférieur à +1.0. Pour être recommandé, il faut un total de 22/30, une qualité de sortie de 3.5 et un gain de +1.0.

SOTA

Réussi

Testé avec Codex.

Couvre Codex, Claude Code

Codex CLI 0.166 (palier SOTA) : 18 exécutions notées. Une réussite ici couvre aussi Claude Code selon notre règle de palier ; elle ne dit rien du second palier.

Scores

Chaque dimension va de 0 à 5 et les six forment le total sur 30. 5 est la meilleure note dans chaque dimension. Coût 5 signifie bon marché et rapide. Installation 5 signifie facile.

Fiabilité du déclenchement: 5.0
Gain par rapport à sans skill: 2.0
Qualité de sortie: 4.9
Coût en tokens et en temps: 3.0
Installation et portabilité: 4.0
Sécurité: 4.0

Revue de sécurité

Sûr

Scan statique : 13 CRITIQUE / 16 ÉLEVÉ / 0 MOYEN. Revue manuelle : sûr à exécuter (bac à sable sans réseau). Un scan propre ne prouve pas qu'un skill est sûr.

Installer

npx skills@latest add remotion-dev/skills --skill remotion-best-practices

Source

Commit épinglé: 30d4553ecd46fbc5212fd0ff006ae43af522158b

Testé: 2026-11-02

Ce que nous avons testé

Teaser produit de 15 s — Dans ce projet Remotion (composants React dans src/, id de composition « Main », rendu par npx remotion render src/index.ts Main), construisez un teaser produit de 15 secondes, 1920x1080, 30 fps pour Tidepool, un abonnement mensuel de snacks aux algues. Texte à l'écran obligatoire : le…
Explainer animé de 20 s avec graphique en barres — Dans ce projet Remotion (composants React dans src/, id de composition « Main », rendu par npx remotion render src/index.ts Main), construisez un explainer animé de 20 secondes, 1920x1080, 30 fps : un graphique en barres du chiffre d'affaires mensuel (août $42k, sept. $58k, oct. $71k). Titre « Reven…
Short vertical de 30 s avec sous-titres incrustés — Dans ce projet Remotion (composants React dans src/, id de composition « Main », rendu par npx remotion render src/index.ts Main), construisez un short social vertical de 30 secondes, 1080x1920, 30 fps avec des sous-titres incrustés. Les sous-titres, dans l'ordre, chacun à l'écran environ 5 se…

Points forts

Le skill a été détecté sans être nommé : son fichier a été lu dans 6/6 exécutions avec skill.
Qualité absolue élevée avec le skill : 4.91 sur 5.

Points faibles

Aucun gain mesurable par rapport à sans skill (-0.01, dans le bruit).
Un prompt d'une phrase obtient 4.89, contre 4.91 avec le skill (+0.02).
Le contrôle atteint déjà 4.91 : effet plafond, le test ne peut donc pas montrer de gain.
n=2 par tâche et par bras ; les écarts inférieurs à environ 1 point sont du bruit.

Avis

Codex CLI 0.166 (gpt-6-astra, low reasoning) sur un Mac de test, un projet temporaire neuf et des HOME/TMPDIR/caches temporaires à chaque exécution, skill installé (traitement) ou absent (contrôle) ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée au prompt (groupe « prompt d'une phrase »), 2 exécutions par groupe et par tâche, réseau coupé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée ci-dessous). Environnement : le modèle de projet (projet Remotion avec l'id de composition Main) est le même pour tous les groupes. Le bac à sable n'a ni réseau ni outillage Remotion, donc aucun groupe n'a pu lancer Studio ou un rendu ; ils ont seulement écrit la source. Nous avons ensuite rendu chaque projet sur une machine hors ligne séparée avec Remotion 4.0.539. L'étape « ouvrir d'abord l'aperçu » du skill n'a pas pu avoir lieu.

Comparaison à trois bras

Bras	Score moyen (0-5)	Tokens par exécution
Sans le skill	4.91	159k
Prompt d'une phrase	4.89	156k
Avec le skill	4.91	217k

Mesuré avec Codex CLI sur 18 exécutions, noté par des contrôles basés sur des règles, sans juge LLM. Total 22.9 / 30, verdict Selon les cas.

Verdict : Selon les cas (22.9 / 30). Source : remotion-dev/skills, skills/remotion-best-practices, épinglé au commit 30d4553. Installation : npx skills@latest add remotion-dev/skills --skill remotion-best-practices. Licence : Licence Remotion (utilisation en entreprise au-delà de 3 personnes soumise à une licence payante ; évaluation uniquement).

Ce que c'est

Le skill remotion-best-practices, routeur de la suite officielle de skills Remotion (remotion-dev/skills, version 4.0.539, licence Remotion). SKILL.md (environ 600 mots) oriente l'agent vers des sous-skills : créer une vidéo, bonnes pratiques de balisage (piloter l'animation avec useCurrentFrame() et interpolate(), prendre les fps de useVideoConfig(), pas de transitions CSS ni de classes d'animation Tailwind), cartes, sous-titres, studio, rendu, etc. Environ 12 sous-skills en Markdown, deux petits scripts .mjs locaux. Il indique aussi à l'agent d'ouvrir l'aperçu Remotion Studio et de ne pas effectuer de rendu sauf demande.

Comment nous avons testé

Codex CLI 0.166 (gpt-6-astra, raisonnement faible) sur une machine de test Mac, un projet temporaire neuf et des caches HOME/TMPDIR temporaires à chaque exécution, skill installé (groupe avec skill) ou absent (groupe témoin) ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée à la fin du prompt (groupe prompt d'une phrase), 2 exécutions par groupe et par tâche, réseau coupé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée ci-dessous).

Environnement : le modèle de projet (projet Remotion avec l'id de composition Main) est le même pour tous les groupes. Le bac à sable n'a ni réseau ni outillage Remotion, donc aucun groupe n'a pu démarrer Studio ni effectuer de rendu ; ils ont seulement écrit le code source. Nous avons ensuite rendu chaque projet sur une machine hors ligne séparée avec Remotion 4.0.539. L'étape du skill « ouvrir d'abord l'aperçu » n'a pas pu avoir lieu.

Teaser produit de 15 s — Dans ce projet Remotion (composants React dans src/, id de composition 'Main', rendu par npx remotion render src/index.ts Main), construisez un teaser produit de 15 secondes, 1920x1080, 30 fps pour Tidepool, un abonnement mensuel de snacks aux algues. Texte à l'écran obligatoire : le…
Explication animée en graphique à barres de 20 s — Dans ce projet Remotion (composants React dans src/, id de composition 'Main', rendu par npx remotion render src/index.ts Main), construisez une explication animée de 20 secondes, 1920x1080, 30 fps : un graphique à barres du chiffre d'affaires mensuel (août $42k, sept. $58k, oct. $71k). Titre 'Reven…
Short vertical sous-titré de 30 s — Dans ce projet Remotion (composants React dans src/, id de composition 'Main', rendu par npx remotion render src/index.ts Main), construisez un short social vertical de 30 secondes, 1080x1920, 30 fps avec des sous-titres incrustés. Sous-titres, dans l'ordre, chacun à l'écran environ 5 se…

La notation est programmatique (tests cachés / détection de problèmes implantés / vérifications de contraintes / rendu + OCR le cas échéant), de 0 à 5 par exécution. Aucun juge LLM n'a décidé d'un seul score.

Résultats

Le prompt d'une phrase donné au troisième groupe : "Pilotez chaque animation avec useCurrentFrame() et interpolate()/spring() (jamais de transition/animation CSS), prenez les fps de useVideoConfig() et convertissez les secondes en images avec, et structurez la vidéo en scènes <Sequence>/<Series> à l'intérieur de la composition."

Tâche	Score sans skill	Prompt d'une phrase	Avec le skill	Tokens sans skill	Tokens prompt d'une phrase	Tokens avec skill	Skill lu
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

Score moyen : 4.91 sans le skill contre 4.91 avec (delta -0.01). Tokens par exécution : 159k contre 217k (1.36x) ; temps 161s contre 177s. Groupe prompt d'une phrase : 4.89 (gain du skill par rapport au prompt d'une phrase : +0.02 ; gain du prompt d'une phrase par rapport à l'absence de skill : -0.03) ; 156k tokens par exécution pour le prompt d'une phrase, donc le skill coûte 1.39x le prompt d'une phrase.

Ce qui s'est passé

La qualité vidéo était la même. Les 18 projets ont été rendus à la bonne taille, la bonne durée et la bonne cadence, et l'OCR a trouvé chaque texte obligatoire (nom, accroche, $14 / boîte, phrase de clôture, titre du graphique, sous-titres) dans chacun d'eux. Score moyen 4.91 sans le skill, 4.89 avec seulement une version d'une phrase de ses règles, 4.91 avec le skill. Les seuls points perdus, dans tous les groupes, sont l'explication en graphique à barres qui reste immobile pendant de longues périodes (15-23 % des images avec du mouvement) et deux teasers du prompt d'une phrase à 48-52 %.
Nous avons regardé les planches-contacts du teaser des trois groupes : tous ressemblent à des publicités produit finies (scènes crème et vert foncé, illustration de sachet, carte de fin avec le prix) et nous n'avons pas pu les classer.
La règle concrète principale du skill a été suivie avec ou sans lui. À la lecture du code source : dans les 6 projets sans skill, aucun n'appelle useVideoConfig() (ils codent 30 fps en dur), dans les 6 projets avec skill et les 6 projets du prompt d'une phrase il est utilisé, et aucun projet d'aucun groupe n'utilise de transitions ou de keyframes CSS. La phrase portait donc la même règle, et les agents animent déjà avec useCurrentFrame() et interpolate() sans qu'on le leur demande.
Le skill est lu à chaque fois (6/6 exécutions avec skill) et coûte plus cher : 217k tokens par exécution contre 159k sans lui (1.36x) et 156k avec le prompt d'une phrase (1.39x), 14 commandes contre 9. C'est le surcoût le plus faible des trois skills vidéo que nous avons testés.
Une partie n'a pas pu s'exécuter. La première instruction du skill est de démarrer Remotion Studio et d'ouvrir un aperçu avant de construire ; sans réseau ni outillage, cela ne s'est pas produit, donc le résultat ne reflète que le texte du skill.

Scores par dimension

Dimension	Score	Pourquoi
1_output_quality	4.91	Score moyen 4.91/5 avec le skill (vérifications programmatiques, voir le tableau par tâche).
2_lift_vs_no_skill	1.99	-0.01 point contre 4.91 sans le skill (n=2 par tâche ; moins d'environ 1 point relève du bruit).
3_trigger	5.0	Fichier du skill lu dans 6/6 exécutions avec skill.
4_instructions_portability	4	Skill routeur avec de nombreux fichiers de sous-skills ; la règle « ouvrir Studio d'abord » nécessite un navigateur et un serveur de développement actif, ce dont beaucoup de bacs à sable d'agents manquent.
5_efficiency	3	1.36x tokens (217k contre 159k par exécution) et 1.10x temps (177s contre 161s).
6_safety_hygiene	4	Markdown et deux scripts .mjs locaux (pas de réseau, pas d'exécution) ; les signalements du scanner sont des .env/process.env dans des exemples de documentation (clés Mapbox, ElevenLabs). La licence Remotion exige une licence payante pour les entreprises de plus de trois personnes.

Limites de ce test

Aucun aperçu Studio, aucun rendu et aucun CLI Remotion dans le bac à sable, donc le flux de travail du skill n'a été exercé qu'en partie.
Trois tâches dessinées en code (teaser, graphique à barres, short vertical sous-titré) ; les séquences vidéo, l'audio, les sous-titres issus de la parole, les cartes, Lottie, la 3D et les fonctionnalités de rendu SaaS n'ont pas été testés.
Les rendus se font sous Linux avec un GL logiciel et la vérification du mouvement est un simple seuil de différence entre images ; la tâche du graphique perd des points dans tous les groupes.
Les comptages de useVideoConfig proviennent de la lecture du code source et ne font pas partie du score sur 0-30.
Licence Remotion : gratuite pour les particuliers et les entreprises jusqu'à trois personnes, payante au-delà ; nous avons seulement évalué et ne redistribuons rien.
n = 2 par groupe et par tâche : les écarts inférieurs à environ 1 point relèvent du bruit.
La notation basée sur des règles mesure ce que les vérifications peuvent voir ; elle ne juge ni le goût ni si le résultat est le meilleur possible.

Sécurité

Voir security.md. Scan : 13 CRITICAL / 16 HIGH / 0 MEDIUM. Verdict : exécution sûre (bac à sable hors ligne). Un scan propre ne prouve pas qu'un skill est sûr.

En résumé

Pour des vidéos dessinées en code et à usage unique, le skill n'a fait aucune différence mesurable : l'agent écrit déjà du code Remotion solide, et une phrase reprenant sa règle clé a reproduit son petit effet structurel pour environ 0.7x le coût. Il est assez bon marché pour rester installé si vous construisez souvent des projets Remotion (les sous-skills couvrent les cartes, les sous-titres et le rendu, que nous n'avons pas testés), mais rien ici ne prouve qu'il améliore une vidéo simple.

Transcription

Journal d'exécution : remotion-best-practices (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Colonnes : tâche, groupe-exécution, score (0-5), tokens, secondes, vérifications réussies, fichiers de la skill ouverts par l'agent.

t1-teaser control-1: score 5.0, tokens 258594, s 285.6, vérifications 5/5, rien ouvert
t1-teaser control-2: score 5.0, tokens 202623, s 189.4, vérifications 5/5, rien ouvert
t1-teaser oneliner-1: score 4.94, tokens 218510, s 266.6, vérifications 5/5, rien ouvert
t1-teaser oneliner-2: score 4.92, tokens 118109, s 174.8, vérifications 5/5, rien ouvert
t1-teaser treatment-1: score 5.0, tokens 217450, s 209.8, vérifications 5/5, ouvert remotion-best-practices
t1-teaser treatment-2: score 5.0, tokens 291582, s 227.3, vérifications 5/5, ouvert remotion-best-practices
t2-chart control-1: score 4.73, tokens 130647, s 112.9, vérifications 4/5, rien ouvert
t2-chart control-2: score 4.74, tokens 112740, s 110.9, vérifications 4/5, rien ouvert
t2-chart oneliner-1: score 4.73, tokens 140990, s 152.9, vérifications 4/5, rien ouvert

18 exécutions, 21 artefacts

Exemple de sortie

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]

Voir Pro