hashgraph-online/awesome-codex-plugins

Verwenden Sie diese Fähigkeit beim Erstellen, Überprüfen oder Refaktorieren eines Remotion-Projekts, insbesondere bei parametrisierten Launch- oder Demovideos mit freigegebenen Props-Schemas, calculateMetadata, Sequence- und Series-Timing, mehreren Seitenverhältnissen, Terminal- oder Footage-Ebenen und Render-Skripten. Bevorzugen Sie offizielle Remotion-Dokumentation oder MCP für API-Details, da sich das Paketverhalten ändern kann.

Was ist awesome-codex-plugins?

Diese Fähigkeit bietet umfassende Unterstützung für die Arbeit mit dem Remotion-Framework zur programmatischen Videogenerierung, insbesondere für parametrisierte Präsentations- und Demovideos. Sie richtet sich an Entwickler, die in Projekten wie Claude Code, Cursor oder Codex mit Remotion arbeiten, und stellt sicher, dass Best Practices eingehalten und veraltete Kenntnisse vermieden werden. Die Fähigkeit führt durch den gesamten Erstellungsprozess, vom Modellieren des Eingabevertrags mit Zod-Schemas über die Berechnung dynamischer Metriken mit calculateMetadata bis hin zum Aufbau von Szenenstrukturen mit Series und Sequence. Sie enthält spezifische Regeln für Standardeinstellungen (z. B. FPS, Auflösung), subtile Animationen und die Behandlung von optionalem Filmmaterial. Darüber hinaus bietet sie eine Checkliste für parametrisierte Videos und verweist bei spezifischen Anforderungen wie der Millrace-Launch-Videopipeline auf Referenzdokumente. Ziel ist es, die Remotion-Agentenentwicklung zu beschleunigen und die Qualität durch strukturierte Anleitungen zu verbessern.

Funktioniert mit~Claude Code✓Codex CLI~Cursor

npx skills add https://github.com/hashgraph-online/awesome-codex-plugins/tree/HEAD/plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder

Dokumentation

Remotion Video Builder

Ihr Remotion-Wissen könnte veraltet sein. Wenn genaues API-Verhalten wichtig ist, bevorzugen Sie den offiziellen MCP-Server remotion-documentation oder die Dokumentation unter remotion.dev.

Hier starten

Wenn das Projekt noch nicht existiert, richten Sie es mit npx create-video@latest ein und bevorzugen Sie die leere Vorlage.
Halten Sie alle Pakete remotion und @remotion/* auf exakt derselben Version und vermeiden Sie Caret-Bereiche.
Standardeintragsform:
- src/index.ts ruft registerRoot() auf
- src/Root.tsx registriert alle Videos mit <Composition> oder <Still>

Baurichtung

Modellieren Sie zuerst den Eingabevertrag:
- Props-Schema der obersten Ebene
- Zeitlinien- oder Ereignisdaten
- Renderprofil
Definieren Sie freigegebene Props mit zod und übergeben Sie das Schema an jedes <Composition>.
Verwenden Sie calculateMetadata, um durationInFrames, width, height, transformierte Props und defaultOutName abzuleiten.
Bauen Sie die Szenenstruktur mit <Series> für narrative Reihenfolge und <Sequence> für Overlays, Einblendungen, Footage-Fenster und Hinweise auf.
Setzen Sie in Remotion v4.x-Projekten explizit premountFor auf <Sequence>-Elemente, die geladene Assets benötigen, bevor sie erscheinen.
Fügen Sie Beispieldaten und Render-Skripte hinzu, bevor Sie die Animation verfeinern.

Standards und Regeln

Standardmäßig fps={30} und 1920x1080 im Querformat, sofern die Vorgabe nichts anderes besagt.
Verwenden Sie AbsoluteFill für das Schichten von Elementen.
Verwenden Sie staticFile() für alles aus public/.
Verwenden Sie useCurrentFrame() und useVideoConfig() für frame-basierte Logik.
Bevorzugen Sie subtile Bewegungen:
- spring() mit hoher Dämpfung
- interpolate() mit Begrenzung
Verwenden Sie kein Math.random(). Verwenden Sie random(seed) aus remotion.
Halten Sie Textanimationen einfach und lesbar.
Halten Sie Querformat- und Hochformat-Ausgaben auf derselben Geschäftslogik, es sei denn, die Vorgabe erfordert tatsächlich eine Abweichung.

Checkliste für parametrisierte Videos

Ein freigegebenes z.object()-Schema der obersten Ebene
defaultProps passend zur Props-Form der Komponente
calculateMetadata gibt dynamische Dauer oder Abmessungen zurück, wenn die Eingaben dies erfordern
Beispiel-JSON- oder TypeScript-Daten für die lokale Vorschau
Render-Skripte für jede Zielausgabe

Footage-Strategie

Unterstützen Sie mindestens diese Modi, wenn Footage optional ist:

none
placeholder
real

Die Zeitlinie und Overlays sollten auch dann rendern, wenn kein echtes Footage vorhanden ist.

Millrace-Launch-Video

Wenn es um Millrace oder die Launch-Video-Pipeline geht, lesen Sie references/millrace-launch-video.md vor der Implementierung.