Communitygithub.com

serdarky-lab/Videos

Router für alle Remotion-Fähigkeiten

Was ist Videos?

Diese Fähigkeit fungiert als zentraler Router für alle Remotion-bezogenen Fähigkeiten. Sie leitet Nutzeranfragen an die entsprechenden spezialisierten Module weiter, wie z.B. die Erstellung neuer Videos, Projekt-Setup, React-Markup-Best Practices, Karten, Multimedia, Interaktivität und mehr. Die Fähigkeit enthält wichtige Richtlinien, z.B. dass Änderungen des Benutzers außerhalb der Konversation nicht überschrieben werden sollen und dass bei der Erstellung eines Videos standardmäßig die interaktive Vorschau (Remotion Studio) geöffnet werden soll, anstatt sofort zu rendern. Zudem werden je nach verwendetem Agenten-Client (Cursor, In-App-Browser, ohne Browser) unterschiedliche Anweisungen zum Starten des Studios gegeben. Die Fähigkeit definiert klare Auslöser für das Laden von Referenzdokumentationen, z.B. für Untertitel, SaaS-Anwendungen, API-Dokumentation und Upgrades.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/serdarky-lab/Videos/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 beibehalten

Benutzer können außerhalb der Konversation Änderungen am Code vornehmen.

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

Erstellen eines Videos

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-Setup

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 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 daraus, laden Sie Remotion-Multimedia

Verbesserung der Interaktivität

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

Öffnen der Vorschau

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 Studio und öffnen Sie die Vorschau im Browser, bevor Sie die Komposition erstellen oder bearbeiten. Lassen Sie sie 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 führen Sie Folgendes 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 verifizieren Sie, dass Studio geladen wird. Sobald eine Komposition existiert, verifizieren Sie, dass ihre Videovorschau geladen wird. Wenn 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

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

npx remotion studio

Weitere Optionen

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

Rendern des Videos

Rendern Sie nur, wenn der Benutzer dies sehr explizit verlangt. Z. B. "Rendere das Video", "Exportieren", "Gib mir die MP4".

Die Vorschau bietet auch eine intuitivere Rendering-Oberfläche, ziehen Sie daher diese der Befehlszeile zum Rendern vor.

npx remotion render

Weitere Optionen finden Sie unter Rendering.

Für erweitertes 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-betriebene SaaS-Apps, wie z. B. <Player>, Rendern auf Lambda, Vercel, Cloudflare, über Express.js, clientseitiges Rendern oder zur Suche nach der richtigen SaaS-Vorlage.

Nachschlagen von Remotion-APIs und -Dokumentation

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

Upgraden

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

Verwandte Skills