Communitygithub.com

valelhgulmetov/my-remotion-video

Router für alle Remotion-Fähigkeiten

Was ist my-remotion-video?

Diese Fähigkeit fungiert als intelligenter Router für verschiedene Remotion-bezogene Skills. Sie erkennt anhand der Benutzeranfrage, welche spezifische Remotion-Dokumentation oder -Referenz geladen werden soll – sei es für die Erstellung neuer Videos, die Einrichtung von Projekten, React-Markup-Best Practices, Karten, Multimedia, Interaktivität, Studio-Vorschau, Rendering, Untertitel, SaaS-Automation oder API-Dokumentation. Die Fähigkeit stellt sicher, dass der KI-Agent das korrekte Referenzdokument lädt, um präzise und aktuelle Anweisungen zu erhalten. Sie unterstützt mehrere Plattformen wie Claude Code, Cursor und andere Agenten-Clients und bietet spezifische Anleitungen zur Verwendung der Studio-Vorschau im Browser, um den Workflow zu optimieren. Zudem wird empfohlen, Änderungen des Benutzers im Code nicht zu überschreiben, sondern sie als intentional zu betrachten oder nach Bestätigung zu fragen.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/valehgulmetov/my-remotion-video/tree/HEAD/.agents/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 im Code vornehmen.

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

Ein Video erstellen

Wenn der Benutzer 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 ein Remotion-Projekt bereits existiert.

Neues Projekt einrichten

Falls aktuell 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 Best Practices für Remotion Markup

Karten

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

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 Benutzer im Studio interaktiv Dinge ändern und zurück in den Code schreiben. Falls relevant: Best Practices für Interaktivität

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 möchten sie eine interaktive Vorschau sehen. Sobald das Projekt ausgeführt werden 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 verfolgen 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, um Studio den Browser öffnen zu lassen, oder Sie führen aus:

npx remotion studio --no-open

Dadurch wird ein langlebiger Prozess gestartet und die Server-URL für die Vorschau ausgegeben. Falls 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 geladen wird. Sobald eine Komposition existiert, überprüfen Sie, ob deren Videovorschau geladen wird. Falls Sie sie 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 In-App-Browser haben

Dadurch wird das Studio im Browser geöffnet oder wieder fokussiert, 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 darum bittet. Z.B. "Video rendern", "Exportieren", "Gib mir das MP4".

Die Vorschau bietet ebenfalls eine intuitivere Rendering-Oberfläche. Ziehen Sie diese in Betracht, anstatt die Befehlszeile für das Rendern zu verwenden.

npx remotion render

Weitere Optionen finden Sie unter Rendering.

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

Untertitel

Wenn Sie mit Untertiteln arbeiten, laden Sie Remotion Untertitel.

Erstellen einer SaaS-, Automatisierungs- oder Anwendung

Verwenden Sie die Remotion-SaaS-Fähigkeit für Wissen über Remotion-basierte SaaS-Apps, wie <Player>, Rendering auf Lambda, Vercel, Cloudflare, über Express.js, clientseitiges Rendering oder um die richtige SaaS-Vorlage zu finden.

Remotion-APIs und Dokumentation nachschlagen

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

Aktualisieren

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

Verwandte Skills