Communitygithub.com

hiwurun/remotion-saas-boilerplate

Router für alle Remotion-Fähigkeiten

Was ist remotion-saas-boilerplate?

Diese Fähigkeit dient als intelligenter Router für eine Sammlung spezialisierter Remotion-Fähigkeiten. Sie erkennt automatisch, welche Teilfähigkeit je nach Benutzeranfrage geladen werden soll – etwa beim Erstellen eines Videos, Einrichten eines neuen Projekts, Arbeiten mit Karten, Multimedia, Untertiteln, Verbessern der Interaktivität, Rendern, Aktualisieren oder Entwickeln einer SaaS-Anwendung. Der Router stellt sicher, dass Änderungen, die der Benutzer außerhalb des Gesprächs vornimmt, nicht überschrieben werden. Er bevorzugt die interaktive Studio-Vorschau gegenüber dem direkten Rendern und bietet plattformspezifische Anweisungen für Cursor und andere Agenten-Clients. Mit diesem Router können Entwickler und KI-Agenten schnell auf relevante Referenzdokumente zugreifen, was den Arbeitsablauf bei der Erstellung und Bearbeitung von Remotion-Projekten erheblich vereinfacht.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hiwurun/remotion-saas-boilerplate/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 erhalten

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

Wenn Sie zwischenzeitlich eine überraschende Änderung feststellen, überschreiben Sie diese nicht. Gehen Sie davon aus, dass sie beabsichtigt ist, 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 Neue Remotion-Video erstellen, unabhängig davon, ob bereits ein Remotion-Projekt existiert.

Neues Projekt einrichten

Falls derzeit kein Remotion-Projekt existiert, laden Sie 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

Für Multimedia-Aufgaben im Browser, 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 Dinge ändern und zurück in den Code schreiben. Falls zutreffend: 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, der Benutzer ist sehr explizit. Stattdessen soll eine interaktive Vorschau angezeigt werden. 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 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 sich der 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 vom Browser öffnen zu lassen, oder Sie führen aus:

npx remotion studio --no-open

Dadurch wird ein langlebiger Prozess gestartet und die Server-URL für die Vorschau ausgegeben. Falls 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 aufrufen, indem Sie zu /[composition-id] navigieren, zum Beispiel http://localhost:3000/MapAnimation.

:::note Studio unterstützt WebMCP-Tools. :::

Wenn Sie keinen In-App-Browser haben

Dadurch wird Studio im Browser geöffnet oder fokussiert, falls es bereits geöffnet ist.

npx remotion studio

Weitere Optionen

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

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 ebenfalls eine intuitivere Rendering-Oberfläche – ziehen Sie diese gegenüber der Befehlszeile in Betracht.

npx remotion render

Weitere Optionen finden Sie unter Rendern.

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

Untertitel

Beim Arbeiten mit Untertiteln laden Sie Remotion-Untertitel.

Erstellen einer SaaS-, Automatisierungs- oder Anwendung

Verwenden Sie die Remotion-SaaS-Fähigkeit für Wissen über Remotion-basierte SaaS-Apps, wie <Player>, Rendern auf Lambda, Vercel, Cloudflare, über Express.js, clientseitiges Rendern oder zum Finden der richtigen SaaS-Vorlage.

Remotion-APIs und Dokumentation nachschlagen

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

Aktualisieren

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

Individual skills in this repo

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

Verwandte Skills