Communitygithub.com

thanhmati/in-shorts

Router für alle Remotion-Fähigkeiten.

Was ist in-shorts?

Diese Skill dient als zentraler Router für alle Remotion-bezogenen Skills. Sie leitet den Entwickler basierend auf der gestellten Aufgabe an die spezifische Referenz weiter – sei es das Erstellen einer neuen Komposition, das Bearbeiten von React-Markup, das Arbeiten mit Karten, Multimedia, Interaktivität, das Rendern eines Videos oder das Einrichten eines SaaS. Die Skill enthält detaillierte Workflow-Anleitungen für verschiedene Client-Umgebungen (Cursor, in-App-Browser, ohne Browser) und betont die Interaktivität: Im Standardfall wird das Remotion Studio geöffnet, sodass der Benutzer das Video im Browser live verfolgen kann, anstatt es sofort zu rendern. Sie ist für die Nutzung mit Claude Code, Cursor, Codex und anderen KI-Agenten konzipiert, die auf die enthaltenen Referenzdateien zugreifen können, und stellt sicher, dass der Agent die richtige Vorgehensweise für jede Aufgabe findet.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/thanhmati/in-shorts/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 zur Bestätigung nach.

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

Neues Projekt einrichten

Falls 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 Extrahieren von Metadaten daraus, laden Sie Remotion Multimedia

Interaktivität verbessern

Durch 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

Die Vorschau öffnen

Wenn der Benutzer bittet, ein Video zu "machen", "erstellen" usw. Rendern Sie das Video standardmäßig nicht, es sei denn, der Benutzer ist sehr explizit. Stattdessen soll der Benutzer 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 bauen 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 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 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 exakte ausgegebene URL im In-App-Browser und überprüfen Sie, ob Studio lädt. Sobald eine Komposition existiert, überprü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 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 neu, falls es bereits geöffnet ist.

npx remotion studio

Weitere Optionen

Um ein Projekt im Remotion Studio zu starten, seine exakte 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 danach fragt. Z.B. "Rendere das Video", "Exportieren", "Gib mir das MP4".

Die Vorschau bietet auch eine intuitivere Rendering-Oberfläche, ziehen Sie diese daher gegenüber der Kommandozeile in Betracht.

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.

Ein SaaS, eine Automatisierung oder Anwendung erstellen

Verwenden Sie den Remotion SaaS Skill für Wissen über Remotion-basierte SaaS-Apps, wie z.B. <Player>, Rendering auf Lambda, Vercel, Cloudflare, via Express.js, Client-seitiges Rendering oder um die richtige SaaS-Vorlage zu finden.

Remotion-APIs und Dokumentation nachschlagen

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

Upgrade

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

Verwandte Skills