Communitygithub.com

ahmadzulfi/video

Router für alle Remotion-Fähigkeiten

Was ist video?

Dieser Skill fungiert als zentraler Router für verschiedene Remotion-spezifische Unterfertigkeiten. Er analysiert die Absicht des Benutzers und lädt die relevantesten Referenzdokumente, um Aufgaben wie die Erstellung von Videos, die Verwaltung von Multimedia, die Arbeit mit Karten (einschließlich Mapbox/MapLibre), die Integration von Untertiteln, die Verbesserung der Interaktivität über das Studio und die Bereitstellung von SaaS-Anwendungen zu bewältigen. Der Skill priorisiert die interaktive Vorschau in Remotion Studio gegenüber der direkten Wiedergabe und bietet plattformspezifische Anleitungen für Cursor oder andere Agenten-Clients. Er stellt die Benutzerabsicht in den Vordergrund, bewahrt manuelle Code-Änderungen und vermeidet das Überschreiben unerwarteter Änderungen ohne Bestätigung. Er enthält außerdem Richtlinien zum Öffnen der Vorschau, zum Rendern von Videos, zum Upgrade von Remotion und zum Zugriff auf die offizielle Remotion-Dokumentation über einen strukturierten Router-Mechanismus, der eine effiziente und kontextbewusste Unterstützung für Entwickler gewährleistet.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/ahmadzulfi/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 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 oder nicht.

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

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

Die 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. Sie möchten stattdessen 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 sie 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, um Studio den Browser öffnen zu lassen, oder ausführen:

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 geladen wird. Sobald eine Komposition existiert, überprüfen Sie, ob 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, wenn 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.

Das Video rendern

Nur rendern, 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, erwägen Sie daher, diese anstelle der Befehlszeile zum 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 den Remotion SaaS Skill für Wissen über Remotion-betriebene SaaS-Apps, wie <Player>, Rendering auf Lambda, Vercel, Cloudflare, via Express.js, clientseitiges Rendering 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-Dokumentation.

Aktualisierung

Um Remotion, zugehörige Pakete, kompatible Mediabunny-Pakete und installierte Remotion Agent Skills zu aktualisieren, laden Sie Remotion-Aktualisierung.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills