remotion-best-practices

Overview

What is the remotion-best-practices skill?

Das remotion-best-practices Skill ist eine kuratierte Sammlung von Guides und Regeln für den Aufbau von Videos mit Remotion, dem React-basierten Framework für Videoproduktion. Es bündelt domänenspezifische Patterns für Animationen, Audio, Captions, FFmpeg-Nutzung, Assets, 3D-Szenen und mehr in fokussierte Regeldateien im Ordner rules/.

Anstatt dir Beispiele mühsam selbst zusammenzusuchen, erhältst du mit diesem Skill eine meinungsstarke Anleitung, wie du Remotion-Code strukturierst, damit er zuverlässig rendert, mit komplexen Projekten skaliert und langfristig wartbar bleibt.

Who is this skill for?

Installiere dieses Skill, wenn du:

• Marketing-, Produkt- oder Social-Videos mit Remotion und React erstellst
• Videos programmatisch generieren musst (z. B. datengetriebene oder template-basierte Inhalte)
• Mit audio-lastigen Inhalten wie Podcasts, Audiogrammen oder Music Visualizern arbeitest
• Klare Patterns für Captions, Untertitel und SRT-Workflows suchst
• 3D- oder Three.js-Content in deine Remotion-Kompositionen einbaust

Es ist hilfreich für Frontend-Entwickler:innen, Coding-Motion-Designer und Teams, die ihre Remotion-Projekte standardisieren wollen.

What problems does it solve?

Das Remotion Best-Practices-Skill hilft dir bei ganz praktischen Herausforderungen, die in realen Remotion-Projekten auftreten, zum Beispiel:

• Alle Animationen frame-basiert treiben, damit Renderings stabil und deterministisch sind
• Bilder, Videos, Audio und Fonts korrekt über den public/-Ordner und staticFile() importieren und referenzieren
• Saubere Videokompositionen mit konsistentem Timing, Übergängen und Parametern erstellen
• Audio handhaben (Layering, Trimmen, Delays, Lautstärke, Geschwindigkeit, Loops, SFX)
• Audio-Visualisierungen generieren (Spektrumbalken, Waveforms, bass-reaktive Effekte)
• Mit Captions und Untertiteln arbeiten, inklusive SRT-Import und Transkription
• FFmpeg für Aufgaben wie Trimmen, Frame-Extraktion oder Silence Detection nutzen
• 3D mit Three.js und React Three Fiber über @remotion/three integrieren
• Kompositions-Metadaten (Dauer, Dimensionen, Props) vor dem Rendern dynamisch berechnen
• Medienkompatibilität mit Mediabunny vor dem Rendern validieren

Sobald du mehr als ein triviales Remotion-Demo baust, liefern dir diese Regeln erprobte Patterns für echte Produktionsszenarien.

When is this skill a good fit?

Nutze das remotion-best-practices Skill, wenn:

• Dein Projekt bereits Remotion einsetzt oder du Remotion für Video-Generation evaluierst
• Du konsistente Richtlinien für Animationen, Assets, Audio, Captions und 3D möchtest
• Du Code-Beispiele auf niedriger Ebene brauchst und nicht nur High-Level-Dokumentation

Es ist kein Ersatz für die offizielle Remotion-Dokumentation und auch kein vollständiges React-Tutorial. Es setzt voraus, dass du mit den React-Grundlagen vertraut bist und die Remotion-Dokumentation zumindest grob kennst.

How to Use

1. Installation and setup

Install the skill into your agent environment

Nutze den Skill-Manager, um das Remotion Best-Practices-Skill aus dem Upstream-Repository hinzuzufügen:

npx skills add https://github.com/remotion-dev/skills --skill remotion

Damit steht deinem Agent das remotion-best-practices Wissen zur Verfügung und er kann die Regeldateien heranziehen, wenn er dir bei deinem Remotion-Projekt hilft.

Review the core documentation files

Nach der Installation öffnest du zuerst diese Dateien:

• SKILL.md – Übersicht, Einsatzszenarien und Links zu wichtigen Regeldateien
• rules/animations.md – Wie man Animationen mit useCurrentFrame() und useVideoConfig() treibt
• rules/assets.md – Wie man Bilder, Videos, Audio und Fonts korrekt importiert
• rules/audio.md – Arbeiten mit Audio, Trimmen, Delays und Layering
• rules/audio-visualization.md – Audiodaten, Waveforms und Spektrum-Visualisierungen
• rules/3d.md – 3D-Szenen mit Three.js und React Three Fiber via @remotion/three

Diese Regeln bilden das Fundament für die meisten Remotion-Video-Workflows.

2. Core concepts and best practices

Drive all animations by frame

Sieh dir rules/animations.md für das zentrale Remotion-Animationsprinzip an:

• Nutze useCurrentFrame() für das aktuelle Frame
• Nutze useVideoConfig() um fps zu erhalten
• Berechne Animationstimings in Sekunden und konvertiere sie anschließend in Frames (seconds * fps)
• Verwende Helfer wie interpolate(), um Frames auf Positionen, Opacity oder andere Properties zu mappen
• Vermeide CSS-Transitions, CSS-Animationen und Tailwind-Animationsklassen; sie rendern in Remotion nicht zuverlässig

Dieser frame-basierte Ansatz stellt konsistente Ergebnisse unabhängig von Abspielgeschwindigkeit oder Umgebung sicher.

Manage assets via public/ and staticFile()

Die Datei rules/assets.md definiert den Umgang mit Medien:

• Lege alle statischen Medien (Bilder, Fonts, Audio, Video) im public/-Ordner ab
• Nutze staticFile("my-file.ext"), um Assets innerhalb von public/ zu referenzieren
• Kombiniere staticFile() mit Remotion-Komponenten wie <Img>, <Video>, <Audio>
• Nutze Remote-URLs direkt, wenn die Datei im Web gehostet wird

Dieses Pattern verhindert kaputte Pfade, kümmert sich um URL-Encoding und funktioniert über unterschiedliche Deployment-Setups hinweg.

Build robust audio and sound design

Die Datei rules/audio.md behandelt Audio-spezifische Workflows:

• Importiere Audio mit <Audio> aus @remotion/media
• Trimme Audiostrecken mit trimBefore und trimAfter (frame-basiert)
• Verzögere Audio oder synchronisiere es mit Visuals über <Sequence>-Wrapper
• Layer mehrere <Audio>-Komponenten für Musik, Voiceover und SFX

Für audio-getriebene Visuals kombinierst du das mit rules/audio-visualization.md:

• Installiere @remotion/media-utils
• Nutze useWindowedAudioData(), um Audiosamples für ein Zeitfenster auszulesen
• Nutze visualizeAudio(), um Frequenzdaten für Spektrumbalken zu generieren

So erstellst du unkompliziert Audiogramme, beat-reaktive Titel und Musikvisualisierungen.

Handle captions and subtitles

Die Top-Level-Datei SKILL.md verweist dich auf caption-bezogene Regeln:

• rules/subtitles.md – Patterns für Untertitel
• rules/display-captions.md – Captions im Bild rendern
• rules/import-srt-captions.md – SRT-Caption-Dateien importieren
• rules/transcribe-captions.md – Transkriptions-Workflows

Nutze diese, wenn du:

• Burned-in Untertitel für Social-Content brauchst
• Sprachspezifische Caption-Tracks verwaltest
• Automatisierte oder halbautomatisierte Caption-Workflows aufsetzen willst

Use FFmpeg for advanced video operations

Der Guide rules/ffmpeg.md zeigt, wann du FFmpeg neben Remotion einsetzen solltest, z. B. für:

• Trimmen oder Zusammenfügen von Quellvideos
• Silence Detection in Audiospuren
• Frame-Extraktion oder GIF-Erstellung

Remotion konzentriert sich auf das Rendern von Szenen; FFmpeg übernimmt das Heavy Lifting an den Rohmedien. Die Kombination ist oft der effizienteste Weg für produktionsreife Videopipelines.

Bring in 3D with Three.js and React Three Fiber

Wenn du 3D-Szenen in deinen Remotion-Videos einsetzen willst, lies rules/3d.md:

• Installiere das Paket @remotion/three mit dem empfohlenen Befehl npx remotion add @remotion/three (oder dem entsprechenden Befehl für deinen Paketmanager)
• Wickle 3D-Content in <ThreeCanvas> und übergib width und height aus useVideoConfig()
• Richte Grundbeleuchtung ein (z. B. ambientLight und directionalLight)
• Steuere alle 3D-Animationen mit useCurrentFrame() statt useFrame() aus @react-three/fiber

So stellst du sicher, dass dein 3D-Content framegenau ohne Flackern oder Desync rendert.

3. Dynamic compositions and metadata

Calculate duration and dimensions dynamically

Die Datei rules/calculate-metadata.md zeigt, wie du calculateMetadata auf einer <Composition> nutzt, um:

• durationInFrames anhand externer Daten anzupassen (z. B. anhand der Länge eines Input-Videos)
• Kompositionsabmessungen an ein Input-Video oder andere dynamische Werte anzupassen
• Props zu transformieren, bevor das Rendering startet

In Kombination mit Helfern wie rules/get-video-duration.md und rules/get-video-dimensions.md kannst du:

• Deine Komposition automatisch an hochgeladene Inhalte anpassen
• Intros/Outros exakt an die Medienlänge angleichen

Das ist besonders hilfreich für nutzergenerierte oder template-basierte Videosysteme.

4. Media validation and compatibility

Check if a video can be decoded

Der Guide rules/can-decode.md führt Mediabunny für Kompatibilitätschecks ein:

• Installiere Mediabunny mit npx remotion add mediabunny
• Nutze den bereitgestellten Helper canDecode(), um zu prüfen, ob ein Video von einer URL im Browser dekodiert werden kann
• Verwende die Variante canDecodeBlob() für hochgeladene Blob-Quellen

Das ist nützlich, wenn du Upload-Flows baust, in denen Medien verifiziert werden müssen, bevor ein teurer Renderprozess gestartet wird.

5. Additional focused rules

Über die Kernthemen hinaus enthält rules/ spezialisierte Guides, die du bei Bedarf hinzuziehen kannst:

• rules/compositions.md – Remotion-Kompositionen strukturieren und verwalten
• rules/timing.md, rules/sequencing.md, rules/transitions.md, rules/text-animations.md – Feinsteuerung von Motion und Timing
• rules/fonts.md, rules/measuring-text.md, rules/measuring-dom-nodes.md – Typografie und präzises Layout
• rules/gifs.md, rules/images.md, rules/videos.md, rules/transparent-videos.md, rules/trimming.md, rules/extract-frames.md – Arbeiten mit unterschiedlichen Medienformaten und -operationen
• rules/maps.md, rules/charts.md, rules/lottie.md, rules/light-leaks.md – Domänenspezifische visuelle Patterns
• rules/voiceover.md, rules/sfx.md – Workflows für Voiceover und Soundeffekte
• rules/tailwind.md – Tailwind so einsetzen, dass es mit Remotion kompatibel ist (ohne verbotene Animationsklassen)

Du kannst diese Guides selektiv nutzen – je nach Feature-Set deines Projekts.

6. Workflow tips for using this skill

With an AI agent

Wenn du einen AI-Assistenten nutzt, der dieses Skill installiert hat:

• Bitte ihn, eine bestimmte Regeldatei zu öffnen (z. B. rules/audio.md), wenn du detailliertere Beispiele brauchst
• Lass ihn Code-Snippets generieren, die die Regeln einhalten (keine CSS-Transitions, alle Animationen über useCurrentFrame(), korrektes staticFile()-Usage etc.)
• Nutze das Skill als Checkliste, wenn du deinen Remotion-Code reviewst oder refaktorierst

In a team setting

Für Teams kannst du dieses Skill wie folgt standardisieren:

• Verlinke relevante rules/*.md-Dateien in eurer internen Dokumentation
• Übernimm Patterns aus dem Skill in eure internen Coding-Guidelines
• Nutze es als Referenz beim Onboarding neuer Entwickler:innen in Remotion-Projekte

FAQ

Is this skill the same as the Remotion framework?

Nein. Remotion ist das zugrunde liegende Framework für die Erstellung von Videos mit React. Das remotion-best-practices Skill ist eine Sammlung von Best Practices und Regeldateien, die auf Remotion aufsetzen und dir helfen, Code zu strukturieren, Medien zu handhaben und typische Fallstricke zu vermeiden.

Do I need to know React to benefit from this skill?

Ja. Das Remotion-Ökosystem basiert auf React, und die Beispiele in den Regeldateien setzen voraus, dass du Komponenten, Props und Hooks verstehst. Das Skill konzentriert sich auf Remotion-spezifische Themen, nicht darauf, React von Grund auf zu erklären.

How do I install the Remotion best-practices skill?

Installiere es in deiner Agent- oder Skills-Umgebung mit:

npx skills add https://github.com/remotion-dev/skills --skill remotion

Öffne danach SKILL.md und den Ordner rules/, um die verfügbaren Themen zu erkunden.

Can I use this skill without a Remotion project yet?

Du kannst Inhalte und Beispiele auch ohne bestehendes Projekt lesen, aber am meisten Mehrwert hast du, sobald du ein Remotion-Workspace eingerichtet hast. Viele Regeln verweisen auf Pakete wie @remotion/media, @remotion/media-utils, @remotion/three oder Mediabunny, die du direkt in deinem Projekt installieren solltest.

Does this skill cover 3D content with Three.js?

Ja. Die Datei rules/3d.md ist speziell 3D in Remotion mit Three.js und React Three Fiber über @remotion/three gewidmet. Sie erklärt, wie du das Paket installierst, Content in <ThreeCanvas> kapselst und Animationen mit useCurrentFrame() steuerst.

Where do I find guidance on audio visualizations and audiograms?

Nutze rules/audio-visualization.md. Dort steht, wie du @remotion/media-utils installierst, Audiodaten mit useWindowedAudioData() ausliest und sie via visualizeAudio() transformierst, um Spektralbalken und Waveforms für Audiogramme aufzubauen.

What if I need to work with captions and subtitles?

Starte mit SKILL.md, das auf folgende Dateien verweist:

• rules/subtitles.md für generelle Subtitle-Patterns
• rules/display-captions.md für das Rendering im Bild
• rules/import-srt-captions.md für den Import von SRT-Dateien
• rules/transcribe-captions.md für Transkriptions-Workflows

Diese Guides decken die meisten Captioning-Anforderungen in Remotion-basierten Videos ab.

When should I use FFmpeg instead of pure Remotion code?

Nutze FFmpeg, wenn du Operationen auf Rohmedien brauchst, etwa präzises Trimmen, Concatenation, Silence Detection oder Frame-Extraktion. Remotion ist stark im Komponieren und Rendern von Szenen in React. rules/ffmpeg.md erklärt, wie und wann du FFmpeg sinnvoll in deine Remotion-Pipeline integrierst.

Can this skill help me avoid performance and rendering issues?

Ja. Viele Regeln existieren explizit, um typische Probleme zu vermeiden, zum Beispiel:

• Flackernde 3D-Szenen, wenn useFrame() statt useCurrentFrame() verwendet wird
• Animationen, die nicht rendern, weil sie auf CSS-Transitions basieren
• Kaputte Asset-Pfade und falsch encodete URLs
• Medien, die beim Rendern fehlschlagen, weil sie nicht dekodiert werden können

Wenn du die Patterns in rules/animations.md, rules/assets.md, rules/3d.md und rules/can-decode.md befolgst, baust du deutlich robustere Remotion-Projekte.

How do I explore all available rule files?

Nach der Installation öffnest du den Ordner rules/ in deiner Umgebung. Wichtige Dateien sind unter anderem:

• rules/3d.md
• rules/animations.md
• rules/assets.md
• rules/audio-visualization.md
• rules/audio.md
• rules/ffmpeg.md
• rules/compositions.md
• rules/timing.md
• rules/subtitles.md
• rules/voiceover.md

Nutze den Files-Tab oder deinen Editor, um den Rest zu durchsuchen – für weitere Spezialthemen wie Charts, Maps, GIFs und Tailwind.