Communitygithub.com

mattpbakerdev-oss/ugc-shorts-pipeline

Router/Weichensteller für alle Remotion-Fähigkeiten

Was ist ugc-shorts-pipeline?

Diese Fähigkeit fungiert als zentraler Router und Dispatcher für eine Suite spezialisierter Skills, die mit dem Remotion-Framework zur programmatischen Videoproduktion arbeiten. Ihre Hauptaufgabe besteht darin, Nutzeranfragen – etwa zur Erstellung eines neuen Videos, zur Verwendung von Karten, Untertiteln oder Multimedia – automatisch an die passende Referenzdokumentation (REFERENCE.md) weiterzuleiten. Dadurch wird sichergestellt, dass der KI-Assistent stets die korrekten Best Practices und aktuellen Anleitungen verwendet, ohne das falsche Skill-Modul zu laden. Die Fähigkeit enthält außerdem Richtlinien zur Verwaltung von Benutzeränderungen, Reaktionsmarkup, Interaktivität und zur Steuerung von Remotion Studio. Sie unterstützt verschiedene Agentenclients (Cursor, andere mit und ohne In-App-Browser) und deckt den gesamten Workflow von der Einrichtung eines Projekts über die Vorschau (Studio) bis hin zum finalen Rendering ab. Zusätzlich bietet sie spezialisierte Einstiegspunkte für SaaS-Anwendungen, Lambda-Dienste, Upgrades und allgemeine Remotion-API-Dokumentation. Sie ist damit das zentrale Gateway, das jede Interaktion mit Remotion – egal ob für Kurzvideo-Pipelines oder komplexe Composings – zielgerichtet und konservativ steuert.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/mattpbakerdev-oss/ugc-shorts-pipeline/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 zwischenzeitlich Änderungen am Code vornehmen.

Wenn Sie eine überraschende Änderung während der Arbeit entdecken, überschreiben Sie sie nicht. Gehen Sie davon aus, dass sie beabsichtigt ist, oder fragen Sie zur Bestätigung nach.

Ein Video erstellen

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

Neues Projekt einrichten

Falls noch kein Remotion-Projekt existiert, laden Sie Ein neues Remotion-Projekt erstellen

React-Markup-Best-Practices

Wenn Sie Remotion-React-Markup schreiben, laden Sie Remotion-Markup-Best-Practices

Karten

Für statische Karten, animierte Routen und Marker, geografische Erklärvideos, Mapbox, MapLibre, MapTiler, GeoJSON oder 3D-Geografie-Flyover-Animationen laden Sie Remotion Maps.

Multimedia

Zur Ausführung von Multimedia-Aufgaben im Browser – wie das Trimmen, Zuschneiden von Videos oder das Extrahieren von Metadaten – laden Sie Remotion Multimedia

Interaktivität verbessern

Durch eine saubere Struktur 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“, zu „erstellen“ o. Ä., rendern Sie das Video standardmäßig nicht – es sei denn, der Wunsch ist sehr explizit. Der Benutzer möchte stattdessen eine interaktive Vorschau sehen. Sobald das Projekt lauffähig ist, starten Sie Studio und öffnen Sie die Vorschau im Browser, bevor Sie die Komposition bauen oder bearbeiten. Lassen Sie Studio 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 es den Browser automatisch öffnet:

npx remotion studio

Wenn Sie einen anderen Agent-Client mit integriertem Browser verwenden

Sie können den obigen Befehl verwenden, um Studio den Browser öffnen zu lassen, oder diesen ausführen:

npx remotion studio --no-open

Dies startet einen langlaufenden Prozess und gibt die Server-URL für die Vorschau aus. Falls der Server bereits gestartet ist, wird die URL ausgegeben. Wenn Sie --no-open verwenden, öffnen Sie die exakte ausgegebene URL im integrierten Browser und prüfen Sie, ob Studio lädt. Sobald eine Komposition existiert, prüfen Sie, ob deren Videovorschau lädt. Falls 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 Studio unterstützt WebMCP-Tools. :::

Wenn Sie keinen integrierten 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, dessen exakte lokale URL zu öffnen oder Studio-CLI-Flags zu konfigurieren, laden Sie Remotion Studio.

Das Video rendern

Rendern Sie nur, wenn der Benutzer es sehr explizit fordert. Z. B. „Rendere das Video“, „Exportiere es“, „Gib mir die MP4“.

Die Vorschau bietet außerdem eine intuitivere Rendering-Oberfläche. Ziehen Sie diese der Kommandozeile vor.

npx remotion render

Weitere Optionen finden Sie unter Rendering.

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

Untertitel

Wenn Sie mit Untertiteln arbeiten, laden Sie Remotion Captions.

SaaS, Automatisierung oder Anwendung erstellen

Nutzen Sie den Remotion SaaS Skill für Kenntnisse über Remotion-basierte SaaS-Apps – wie <Player>, Rendering auf Lambda, Vercel, Cloudflare, per Express.js, Client-seitiges Rendering oder zur Auswahl der passenden SaaS-Vorlage.

Remotion-APIs und -Dokumentation nachschlagen

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

Update durchführen

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

Verwandte Skills