OfficialVideo & Animationgithub.com

remotion-best-practices

Router für alle Remotion-Fähigkeiten

Was ist remotion-best-practices?

Diese Fähigkeit dient als zentraler Router für alle Remotion-spezifischen Fähigkeiten in KI-Agenten-Umgebungen wie Claude Code, Cursor oder Codex. Sie analysiert Benutzeranfragen und leitet sie an die passenden Referenzdateien weiter, z. B. für die Erstellung neuer Videos, React-Markup-Best Practices, Multimedia-Bearbeitung, Kartenintegration oder Interaktivität. Die Fähigkeit legt großen Wert darauf, Nutzeränderungen im Code zu respektieren und nicht unbeabsichtigt zu überschreiben. Sie enthält detaillierte Anleitungen zum Starten der Remotion Studio-Vorschau, zur Videoproduktion (nur auf expliziten Wunsch rendern) und zu fortgeschrittenen Themen wie Untertiteln, SaaS-Apps und Upgrades. Je nach Agent-Client (Cursor, Browser im App, kein Browser) werden unterschiedliche Befehle empfohlen, um die Studio-Vorschau zu öffnen und den Workflow zu optimieren.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-best-practices

Installed? Explore more Video & Animation skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Benutzeränderungen bewahren

Benutzer können außerhalb des Gesprächs Änderungen am Code vornehmen.

Wenn Sie zwischenzeitlich eine überraschende Änderung feststellen, überschreiben Sie diese nicht, gehen Sie davon aus, dass sie beabsichtigt ist, oder fragen Sie nach Bestätigung.

Erstellen eines Videos

Wenn der Benutzer darum bittet, ein neues Video oder eine neue Komposition zu machen, erstellen oder bauen Sie Ein neues Remotion-Video erstellen – unabhängig davon, ob bereits ein Remotion-Projekt existiert.

Neues Projekt-Setup

Wenn derzeit kein Remotion-Projekt existiert, laden Sie Ein neues Remotion-Projekt erstellen

React-Markup-Best Practices

Wenn Sie Remotion-React-Markup schreiben, laden Sie Remotion-Markup-Best Practices

Karten

Für statische Karten, animierte Routen und Marker, geografische Erklärungen, Mapbox, MapLibre, MapTiler, GeoJSON oder 3D-geografische Überflüge laden Sie Remotion-Maps.

Multimedia

Um Multimedia-Aufgaben im Browser zu erledigen, wie z. B. Videos zuschneiden, trimmen oder Metadaten daraus abrufen, laden Sie Remotion-Multimedia

Interaktivität verbessern

Durch gute Strukturierung des Remotion-Markups können wir es Benutzern ermöglichen, Dinge interaktiv im Studio zu ändern und zurück in den Code zu schreiben. Falls relevant: Interaktivität-Best Practices

Vorschau öffnen

Wenn der Benutzer darum bittet, ein Video zu „machen“, „erstellen“ usw. Rendern Sie das Video standardmäßig nicht, es sei denn, der Benutzer ist sehr explizit. Stattdessen soll eine interaktive Vorschau angezeigt werden. Sobald das Projekt ausgeführt werden kann, starten Sie das Studio und öffnen Sie die Vorschau im Browser, bevor Sie die Komposition erstellen oder bearbeiten. Lassen Sie es geöffnet, während Sie arbeiten, damit der Benutzer den Fortschritt sehen und steuern kann.

Wenn Sie Cursor verwenden

Führen Sie Studio ohne --no-open aus, damit es den Browser automatisch öffnet:

npx remotion studio

Wenn Sie einen anderen Agenten-Client mit einem integrierten Browser verwenden

Sie können den obigen Befehl verwenden, um Studio den Browser öffnen zu lassen, oder Sie führen Folgendes aus:

npx remotion studio --no-open

Dadurch wird ein langlebiger Prozess gestartet, der die Server-URL für die Vorschau ausgibt. Wenn der Server bereits gestartet ist, wird die URL ausgegeben. Wenn Sie --no-open verwenden, öffnen Sie die exakte ausgegebene URL im integrierten Browser und überprüfen Sie, ob Studio geladen wird. Sobald eine Komposition existiert, überprüfen Sie, ob ihre Videovorschau geladen wird. Wenn Sie es dort nicht öffnen können, führen Sie Studio ohne --no-open aus. Sie können eine bestimmte Komposition besuchen, indem Sie zu /[composition-id] navigieren, z. B. http://localhost:3000/MapAnimation.

:::note Das Studio unterstützt WebMCP-Tools. :::

Wenn Sie keinen integrierten Browser haben

Dadurch wird das Studio im Browser geöffnet oder erneut fokussiert, falls es bereits geöffnet ist.

npx remotion studio

Weitere Optionen

Um ein Projekt in Remotion Studio zu starten, seine exakte lokale URL zu öffnen oder Studio-CLI-Flags zu konfigurieren, laden Sie Remotion Studio.

Video rendern

Rendern Sie nur, wenn der Benutzer sehr explizit danach fragt. Z. B. „Rendere das Video“, „Exportieren“, „Gib mir die MP4“.

Die Vorschau bietet auch eine intuitivere Rendering-Oberfläche. Ziehen Sie diese gegebenenfalls der Kommandozeile vor.

npx remotion render

Weitere Optionen finden Sie unter Rendering.

Für fortgeschrittenes Rendering über einfaches npx remotion render hinaus, siehe: Rendering-Best Practices

Untertitel

Wenn Sie mit Untertiteln arbeiten, laden Sie Remotion-Untertitel.

Erstellen einer SaaS, Automatisierung oder Anwendung

Verwenden Sie die Remotion-SaaS-Fähigkeit für Wissen über Remotion-betriebene SaaS-Apps, wie z. B. <Player>, Rendern auf Lambda, Vercel, Cloudflare, über Express.js, clientseitiges Rendern oder zum Finden der richtigen SaaS-Vorlage.

Remotion-APIs und Dokumentation nachschlagen

Um die aktuelle Remotion-Dokumentation zu finden und zu lesen, laden Sie Remotion-Docs.

Upgrade

Um Remotion, verwandte Pakete, kompatible Mediabunny-Pakete und installierte Remotion-Agent-Fähigkeiten zu aktualisieren, laden Sie Remotion-Upgrade.

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

Verwandte Skills