Communitygithub.com

iamhuynq/video-remotion

Router für alle Remotion-Fähigkeiten

Was ist video-remotion?

Diese Skill fungiert als zentraler Router für verschiedene Remotion-bezogene Fähigkeiten. Sie leitet Anweisungen des Benutzers an die richtigen Unterskills weiter, z.B. zum Erstellen neuer Videos oder Projekte, zum Arbeiten mit Karten, Multimedia oder Untertiteln, sowie zum Rendern und zur Interaktivität. Die Skill stellt sicher, dass bei neuen Projekten zunächst die Studio-Vorschau geöffnet wird und nur auf expliziten Wunsch hin gerendert wird. Sie unterstützt verschiedene Plattformen wie Cursor und andere Agenten-Clients und enthält Best Practices für React-Markup, Karten, Multimedia und SaaS-Anwendungen. Die Skill wird über Referenzdateien wie `remotion-create/REFERENCE.md` oder `remotion-maps/REFERENCE.md` gesteuert.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/iamhuynq/video-remotion/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 Code-Änderungen vornehmen.

Wenn Sie währenddessen eine überraschende Änderung feststellen, ü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

Falls kein Remotion-Projekt vorhanden ist, 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 Ü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 im Studio interaktiv Änderungen vornehmen und diese zurück in den Code schreiben. Falls relevant: Interaktivitäts-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, sie sind sehr explizit. Stattdessen möchten sie eine interaktive Vorschau sehen. Sobald das Projekt ausgeführt werden kann, starten Sie das Studio und öffnen Sie die Vorschau im Browser, bevor Sie die Komposition bauen 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 In-App-Browser verwenden

Sie können den obigen Befehl verwenden, um das Studio den Browser öffnen zu lassen, oder Sie führen 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 das Studio lädt. Sobald eine Komposition existiert, verifizieren Sie, dass ihre 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 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.

Das Video rendern

Rendern Sie nur, wenn der Benutzer sehr explizit darum bittet.
Z.B. "Render das Video", "Exportieren", "Gib mir die MP4".

Die Vorschau bietet auch eine intuitivere Rendering-Oberfläche; ziehen Sie diese daher der Kommandozeile vor.

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.

SaaS, Automatisierung oder Anwendung erstellen

Nutzen Sie den Remotion-SaaS-Skill für Wissen über Remotion-basierte SaaS-Apps wie <Player>, Rendering auf Lambda, Vercel, Cloudflare, über Express.js, clientseitiges Rendering oder zur Auswahl der richtigen SaaS-Vorlage.

Remotion-APIs und Dokumentation nachschlagen

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

Aktualisieren

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

Individual skills in this repo

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

Verwandte Skills