Communitygithub.com

GuilhermeGongora/VideoEditor

Router für alle Remotion-Fähigkeiten – ein Skill, der die richtigen Referenzen für die Erstellung, Bearbeitung und Vorschau von Remotion-Videos auswählt.

Was ist VideoEditor?

Dieser Skill fungiert als zentrale Routinglogik für alle Remotion-bezogenen Aufgaben innerhalb eines KI-Agenten wie Claude Code, Cursor oder Codex. Er erkennt anhand der Benutzeranfrage, ob ein neues Video erstellt, ein vorhandenes Projekt bearbeitet, eine interaktive Vorschau (Remotion Studio) geöffnet oder ein Video gerendert werden soll. Dazu lädt er dynamisch die passende Referenz (z. B. für die Projekterstellung, React-Markup-Regeln, Karten, Multimedia-Verarbeitung, Interaktivität oder Beschriftungen). Der Skill stellt sicher, dass Benutzeränderungen im Code erhalten bleiben, und vermeidet das Überschreiben von überraschenden Änderungen ohne Rückfrage. Er unterstützt sowohl CLI-basierte als auch in-App-Browser-Workflows und bietet klare Anweisungen für die Studio-Eröffnung – je nach Agenten-Client mit oder ohne `--no-open`-Flag. Für erweiterte Funktionen wie SaaS-Apps, Rendering auf Lambda, Captions oder API-Dokumentation lädt er die entsprechenden Referenzen nach.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/GuilhermeGongora/VideoEditor/tree/HEAD/.claude/skills/remotion-best-practices

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 eine überraschende Änderung feststellen, die in der Zwischenzeit vorgenommen wurde, überschreiben Sie diese nicht; gehen Sie davon aus, dass sie beabsichtigt ist, oder fragen Sie nach einer Bestätigung.

Ein Video erstellen

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

Neues Projekt einrichten

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

Best Practices für React-Markup

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 Flyover-Animationen laden Sie Remotion Maps.

Multimedia

Für Multimedia-Aufgaben im Browser, wie das Trimmen, Zuschneiden von Videos oder das Abrufen von Metadaten, laden Sie Remotion Multimedia

Interaktivität verbessern

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

Vorschau öffnen

Wenn der Benutzer darum bittet, ein Video zu „machen“, zu „erstellen“ usw. Rendern Sie das Video standardmäßig nicht, es sei denn, der Benutzer ist sehr explizit. Er möchte stattdessen eine interaktive Vorschau sehen. Sobald das Projekt laufen kann, starten Sie 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 der Browser automatisch geöffnet wird:

npx remotion studio

Wenn Sie einen anderen Agenten-Client mit einem In-App-Browser verwenden

Sie können den obigen Befehl verwenden, damit Studio den Browser öffnet, oder führen Sie aus:

npx remotion studio --no-open

Dies startet einen langlebigen Prozess und gibt die Server-URL für die Vorschau aus. Wenn der Server bereits gestartet ist, wird die URL ausgegeben. Wenn Sie --no-open verwenden, öffnen Sie die exakt ausgegebene URL im In-App-Browser und überprüfen Sie, ob Studio lädt. Sobald eine Komposition existiert, überprüfen Sie, ob deren Videovorschau lädt. Wenn Sie sie dort nicht öffnen können, führen Sie Studio ohne --no-open aus. Sie können eine bestimmte Komposition aufrufen, indem Sie zu /[composition-id] navigieren, z. B. http://localhost:3000/MapAnimation.

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

Wenn Sie keinen In-App-Browser haben

Dies öffnet Studio im Browser oder fokussiert es erneut, falls es bereits geöffnet ist.

npx remotion studio

Weitere Optionen

Um ein Projekt in Remotion Studio zu starten, seine genaue 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. „Video rendern“, „Exportieren“, „Gib mir die MP4“.

Die Vorschau hat ebenfalls eine intuitivere Rendering-Oberfläche. Ziehen Sie diese daher anstelle der Befehlszeile zum Rendern in Betracht.

npx remotion render

Weitere Optionen finden Sie unter Rendering.

Für erweitertes Rendering über einfaches npx remotion render hinaus siehe: Rendering Best Practices

Untertitel

Beim Arbeiten mit Untertiteln laden Sie Remotion Captions.

Erstellen einer SaaS-, Automatisierungs- oder Anwendung

Verwenden Sie den Remotion SaaS Skill für Wissen über Remotion-betriebene SaaS-Apps, wie <Player>, Rendering auf Lambda, Vercel, Cloudflare, über Express.js, clientseitiges Rendering oder zum Finden der richtigen SaaS-Vorlage.

Remotion-APIs und Dokumentation nachschlagen

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

Upgraden

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

Individual skills in this repo

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

Verwandte Skills