remotion-best-practices (remotion-dev/skills)
Leitet Remotion-Aufgaben an die passende Anleitung für Videos, Markup, Karten, Multimedia und Interaktivität weiter.
Remotion skill: Gleiche Videoqualität wie ohne Skill und wie ein Satz seiner Regeln, bei 1.4x den Tokens
Codex CLI · gpt-6-astra
22.9 / 30
Lift gegenüber ohne Skill: -0.01 · Situativ · 18 Läufe
Situativ: der Lift -0.01 liegt unter +1.0. Für „Empfohlen“ sind insgesamt 22/30, eine Ausgabequalität von 3.5 und ein Lift von +1.0 nötig.
SOTA
BestandenGetestet mit Codex.
Gilt für Codex, Claude Code
Codex CLI 0.166 (SOTA-Stufe): 18 bewertete Läufe. Ein Bestehen hier deckt gemäß unserer Stufenregel auch Claude Code ab; über die zweite Stufe sagt es nichts aus.
Punktzahlen
Jede Dimension reicht von 0 bis 5, und die sechs ergeben zusammen die Gesamtpunktzahl von 30. 5 ist in jeder Dimension besser. Kosten 5 bedeutet günstig und schnell. Installation 5 bedeutet einfach.
- Trigger-Zuverlässigkeit
- 5.0
- Lift gegenüber ohne Skill
- 2.0
- Ausgabequalität
- 4.9
- Token- und Zeitkosten
- 3.0
- Installation und Portabilität
- 4.0
- Sicherheit
- 4.0
Sicherheitsprüfung
SicherStatischer Scan: 13 CRITICAL / 16 HIGH / 0 MEDIUM. Manuelle Prüfung: sicher auszuführen (Sandbox ohne Netzwerk). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.
Installieren
npx skills@latest add remotion-dev/skills --skill remotion-best-practices
Fixierter Commit: 30d4553ecd46fbc5212fd0ff006ae43af522158b
Getestet: 2026-11-02
Was wir getestet haben
- 15-s-Produktteaser — In diesem Remotion-Projekt (React-Komponenten in src/, Kompositions-ID 'Main', gerendert mit npx remotion render src/index.ts Main) einen 15-sekündigen Produktteaser für Tidepool bauen, 1920x1080, 30 fps, für ein monatliches Algen-Snack-Abo. Erforderlicher Bildschirmtext: der…
- 20-s-Erklärer mit animiertem Balkendiagramm — In diesem Remotion-Projekt (React-Komponenten in src/, Kompositions-ID 'Main', gerendert mit npx remotion render src/index.ts Main) einen 20-sekündigen animierten Erklärer bauen, 1920x1080, 30 fps: ein Balkendiagramm des Monatsumsatzes (Aug 42k $, Sep 58k $, Okt 71k $). Titel 'Reven…
- 30-s-vertikaler Short mit Untertiteln — In diesem Remotion-Projekt (React-Komponenten in src/, Kompositions-ID 'Main', gerendert mit npx remotion render src/index.ts Main) einen 30-sekündigen vertikalen Social-Short mit eingebrannten Untertiteln bauen, 1080x1920, 30 fps. Untertitel in Reihenfolge, jeweils etwa 5 Sekunden lang au…
Vorteile
- Der Skill wurde erkannt, ohne genannt zu werden: Skill-Datei in 6/6 Treatment-Läufen gelesen.
- Hohe absolute Qualität mit dem Skill: 4.91 von 5.
Nachteile
- Kein messbarer Lift gegenüber ohne Skill (-0.01, im Rauschen).
- Ein Ein-Satz-Prompt erzielte 4.89 gegenüber 4.91 mit dem Skill (+0.02).
- Die Kontrolle erreicht bereits 4.91: ein Deckeneffekt, daher kann der Test keinen Lift zeigen.
- n=2 pro Aufgabe und Variante; Unterschiede unter etwa 1 Punkt sind Rauschen.
Bewertung
Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem Mac-Testrechner, einem frischen temporären Projekt und temporären HOME/TMPDIR/Caches pro Lauf; Skill installiert (Treatment) oder nicht vorhanden (Kontrolle) oder nicht vorhanden mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (One-Liner-Gruppe); 2 Läufe pro Gruppe und Aufgabe; Netzwerk aus; Schreiben nach /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten genannten Formulierung). Umgebung: Die Projektvorlage (Remotion-Projekt mit Kompositions-ID Main) ist für alle Gruppen gleich. Die Sandbox hat kein Netzwerk und keine Remotion-Tools, daher konnte keine Gruppe Studio starten oder rendern; sie schrieben nur Quellcode. Anschließend haben wir jedes Projekt auf einem separaten Offline-Rechner mit Remotion 4.0.539 gerendert. Der Schritt „zuerst die Vorschau öffnen“ des Skills konnte nicht stattfinden.
Drei-Arm-Vergleich
| Variante | Durchschnittsnote (0-5) | Tokens pro Lauf |
|---|---|---|
| Ohne Skill | 4.91 | 159k |
| Ein-Satz-Prompt | 4.89 | 156k |
| Mit Skill | 4.91 | 217k |
Gemessen mit Codex CLI über 18 Läufe, bewertet durch regelbasierte Prüfungen ohne LLM-Richter. Gesamt 22.9 / 30, Urteil Situativ.
Urteil: Situativ (22.9 / 30). Quelle: remotion-dev/skills, skills/remotion-best-practices, festgehalten auf Commit 30d4553. Installation: npx skills@latest add remotion-dev/skills --skill remotion-best-practices. Lizenz: Remotion License (Unternehmensnutzung mit mehr als 3 Personen benötigt eine kostenpflichtige Lizenz; nur zur Evaluierung).
Was es ist
Der Skill remotion-best-practices, der Router aus Remotions offiziellem Skill-Set (remotion-dev/skills, Version 4.0.539, Remotion License). SKILL.md (etwa 600 Wörter) schickt den Agenten zu Sub-Skills: Video erstellen, Best Practices für Markup (Animation über useCurrentFrame() und interpolate() treiben, fps aus useVideoConfig() nehmen, keine CSS-Transitions oder Tailwind-Animationsklassen), Karten, Untertitel, Studio, Rendern und mehr. Etwa 12 Sub-Skills als Markdown, zwei kleine lokale .mjs-Skripte. Er weist den Agenten außerdem an, die Remotion-Studio-Vorschau zu öffnen und nicht zu rendern, solange es nicht verlangt wird.
So haben wir getestet
Codex CLI 0.166 (gpt-6-astra, niedrige Denkstufe) auf einem Mac-Testgerät, pro Lauf ein frisches temporäres Projekt und temporäre HOME/TMPDIR/Caches, Skill installiert (Skill-Gruppe), nicht vorhanden (Kontrollgruppe) oder nicht vorhanden, aber mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (Ein-Satz-Gruppe), 2 Läufe pro Gruppe und Aufgabe, Netzwerk aus, Schreibzugriffe auf /tmp blockiert. Die Prompts erwähnen den Skill nie (außer der unten genannten Formulierung).
Umgebung: Die Projektvorlage (Remotion-Projekt mit Kompositions-ID Main) ist für alle Gruppen gleich. Die Sandbox hat weder Netzwerk noch Remotion-Tooling, daher konnte keine Gruppe Studio starten oder rendern; sie schrieben nur Quellcode. Danach haben wir jedes Projekt auf einer separaten Offline-Maschine mit Remotion 4.0.539 gerendert. Der Schritt „zuerst die Vorschau öffnen“ des Skills konnte nicht stattfinden.
- 15-Sekunden-Produktteaser — Baue in diesem Remotion-Projekt (React-Komponenten in src/, Kompositions-ID „Main“, gerendert mit
npx remotion render src/index.ts Main) einen 15-sekündigen Produktteaser in 1920x1080 und 30 fps für Tidepool, ein monatliches Algen-Snack-Abo. Pflichttext auf dem Bildschirm: die… - 20-Sekunden-Erklärer mit animiertem Balkendiagramm — Baue in diesem Remotion-Projekt (React-Komponenten in src/, Kompositions-ID „Main“, gerendert mit
npx remotion render src/index.ts Main) einen 20-sekündigen animierten Erklärer in 1920x1080 und 30 fps: ein Balkendiagramm des Monatsumsatzes (Aug. $42k, Sep. $58k, Okt. $71k). Titel „Reven… - 30-Sekunden-Vertical-Short mit Untertiteln — Baue in diesem Remotion-Projekt (React-Komponenten in src/, Kompositions-ID „Main“, gerendert mit
npx remotion render src/index.ts Main) einen 30-sekündigen vertikalen Social-Short in 1080x1920 und 30 fps mit eingebrannten Untertiteln. Die Untertitel in dieser Reihenfolge, jeder etwa 5 Se…
Die Bewertung erfolgt programmatisch (versteckte Tests / Recall eingeschleuster Probleme / Constraint-Prüfungen / Rendern+OCR, wo relevant), 0–5 pro Lauf. Kein LLM-Judge hat eine Punktzahl vergeben.
Ergebnisse
Der Ein-Satz-Prompt für die dritte Gruppe: „Treibe jede Animation mit useCurrentFrame() und interpolate()/spring() (nie CSS transition/animation), nimm fps aus useVideoConfig() und rechne Sekunden damit in Frames um, und strukturiere das Video als <Sequence>/<Series>-Szenen innerhalb der Komposition.“
| Aufgabe | Punktzahl Kontrolle | Ein-Satz | Mit Skill | Token Kontrolle | Token Ein-Satz | Token mit Skill | Skill gelesen |
|---|---|---|---|---|---|---|---|
| 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 |
Mittelwert: 4.91 ohne vs. 4.91 mit Skill (Delta -0.01). Token pro Lauf: 159k vs. 217k (1.36x); Zeit 161s vs. 177s. Ein-Satz-Gruppe: 4.89 (Gewinn des Skills gegenüber dem Ein-Satz-Prompt: +0.02; Gewinn des Ein-Satz-Prompts gegenüber dem Lauf ohne Skill: -0.03); Token des Ein-Satz-Prompts 156k pro Lauf, der Skill kostet also 1.39x des Ein-Satz-Prompts.
Was dabei herauskam
- Die Videoqualität war gleich. Alle 18 Projekte wurden in der richtigen Größe, Länge und Bildrate gerendert, und OCR fand in jedem davon jeden geforderten Text (Name, Tagline, $14 / Box, Schlusszeile, Diagrammtitel, Untertitel). Mittelwert 4.91 ohne den Skill, 4.89 mit nur einer Ein-Satz-Version seiner Regeln, 4.91 mit dem Skill. Die einzigen verlorenen Punkte entstehen in allen Gruppen durch den Balkendiagramm-Erklärer, der lange Strecken stillsteht (15-23 % der Frames mit Bewegung), und durch zwei Ein-Satz-Teaser mit 48-52 %.
- Wir haben Kontaktbögen der Teaser aus allen drei Gruppen angesehen: Alle wirken wie fertige Produktanzeigen (creme- und dunkelgrüne Szenen, eine Beutel-Illustration, eine Preiskarte am Ende), und wir konnten sie nicht einordnen.
- Die wichtigste konkrete Regel des Skills wurde mit und ohne ihn befolgt. Im Quellcode: In den 6 Projekten ohne Skill ruft keines
useVideoConfig()auf (sie codieren 30 fps fest), in allen 6 Skill-Projekten und allen 6 Ein-Satz-Projekten wird es verwendet, und kein Projekt in irgendeiner Gruppe nutzt CSS-Transitions oder Keyframes. Der eine Satz transportierte also dieselbe Regel, und die Agenten animieren ohnehin unaufgefordert mituseCurrentFrame()undinterpolate(). - Der Skill wird jedes Mal gelesen (6/6 Läufe der Skill-Gruppe) und kostet mehr: 217k Token pro Lauf gegenüber 159k ohne ihn (1.36x) und 156k mit dem Ein-Satz-Prompt (1.39x), 14 Befehle gegenüber 9. Das ist der kleinste Overhead der drei getesteten Video-Skills.
- Ein Teil konnte nicht laufen. Die erste Anweisung des Skills ist, Remotion Studio zu starten und eine Vorschau zu öffnen, bevor gebaut wird; ohne Netzwerk und Tooling geschah das nicht, das Ergebnis ist also nur der Text des Skills.
Bewertung nach Dimensionen
| Dimension | Punktzahl | Begründung |
|---|---|---|
| 1_output_quality | 4.91 | Mittlere Punktzahl 4.91/5 mit dem Skill (programmatische Prüfungen, siehe Tabelle pro Aufgabe). |
| 2_lift_vs_no_skill | 1.99 | -0.01 Punkte gegenüber 4.91 ohne den Skill (n=2 pro Aufgabe; unter etwa 1 Punkt ist Rauschen). |
| 3_trigger | 5.0 | Skill-Datei in 6/6 Läufen der Skill-Gruppe gelesen. |
| 4_instructions_portability | 4 | Router-Skill mit vielen Sub-Skill-Dateien; die Regel „zuerst Studio öffnen“ braucht einen Browser und einen laufenden Dev-Server, an denen es vielen Agenten-Sandboxes fehlt. |
| 5_efficiency | 3 | 1.36x Token (217k vs. 159k pro Lauf) und 1.10x Zeit (177s vs. 161s). |
| 6_safety_hygiene | 4 | Markdown plus zwei lokale .mjs-Skripte (kein Netzwerk, keine Ausführung); Scanner-Treffer sind .env/process.env in Dokumentationsbeispielen (Mapbox-, ElevenLabs-Schlüssel). Die Remotion License verlangt eine kostenpflichtige Lizenz für Unternehmen mit mehr als drei Personen. |
Grenzen dieses Tests
- Keine Studio-Vorschau, kein Render und keine Remotion CLI in der Sandbox, daher wurde der Workflow des Skills nur teilweise ausgeführt.
- Drei per Code gezeichnete Aufgaben (Teaser, Balkendiagramm, vertikaler Short mit Untertiteln); Videomaterial, Audio, Untertitel aus Sprache, Karten, Lottie, 3D und die SaaS-Rendering-Features wurden nicht getestet.
- Die Renders laufen auf Linux mit Software-GL, und die Bewegungsprüfung ist eine grobe Frame-Differenz-Schwelle; die Diagrammaufgabe verliert in jeder Gruppe Punkte.
- Die
useVideoConfig-Zahlen stammen aus dem Lesen des Quellcodes und sind nicht Teil der 0-30-Punktzahl. - Remotion License: kostenlos für Einzelpersonen und Unternehmen mit bis zu drei Personen, darüber kostenpflichtig; wir haben nur evaluiert und geben nichts weiter.
- n = 2 pro Gruppe und Aufgabe: Unterschiede unter etwa 1 Punkt sind Rauschen.
- Regelbasierte Bewertung misst nur, was die Prüfungen sehen können; sie kann weder Geschmack noch beurteilen, ob ein Ergebnis das bestmögliche ist.
Sicherheit
Siehe security.md. Scan: 13 CRITICAL / 16 HIGH / 0 MEDIUM. Urteil: sicher ausführbar (Offline-Sandbox). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.
Fazit
Bei einmaligen, per Code gezeichneten Videos machte der Skill keinen messbaren Unterschied: Der Agent schreibt bereits solides Remotion-Code, und ein Satz mit der Kernregel des Skills reproduzierte seinen kleinen strukturellen Effekt zu etwa 0.7x der Kosten. Er ist günstig genug, um installiert zu bleiben, wenn du oft Remotion-Projekte baust (die Sub-Skills decken Karten, Untertitel und Rendering ab, die wir nicht getestet haben), aber hier gibt es keinen Beleg, dass er ein einfaches Video verbessert.
Transkript
Laufprotokoll: remotion-best-practices (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Spalten: Aufgabe, Gruppe-Lauf, Punktzahl (0-5), Tokens, Sekunden, bestandene Prüfungen, vom Agenten geöffnete Skill-Dateien. t1-teaser control-1: Punkte 5.0, Tokens 258594, Sek. 285.6, Prüfungen 5/5, nichts geöffnet t1-teaser control-2: Punkte 5.0, Tokens 202623, Sek. 189.4, Prüfungen 5/5, nichts geöffnet t1-teaser oneliner-1: Punkte 4.94, Tokens 218510, Sek. 266.6, Prüfungen 5/5, nichts geöffnet t1-teaser oneliner-2: Punkte 4.92, Tokens 118109, Sek. 174.8, Prüfungen 5/5, nichts geöffnet t1-teaser treatment-1: Punkte 5.0, Tokens 217450, Sek. 209.8, Prüfungen 5/5, geöffnet remotion-best-practices t1-teaser treatment-2: Punkte 5.0, Tokens 291582, Sek. 227.3, Prüfungen 5/5, geöffnet remotion-best-practices t2-chart control-1: Punkte 4.73, Tokens 130647, Sek. 112.9, Prüfungen 4/5, nichts geöffnet t2-chart control-2: Punkte 4.74, Tokens 112740, Sek. 110.9, Prüfungen 4/5, nichts geöffnet t2-chart oneliner-1: Punkte 4.73, Tokens 140990, Sek. 152.9, Prüfungen 4/5, nichts geöffnet
18 Läufe, 21 Artefakte
Beispielausgabe
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]