Communitygithub.com

3bkader-gpt/remotion-tiktok-gym-editor

Router für alle Remotion-Fähigkeiten

Was ist remotion-tiktok-gym-editor?

Diese Fähigkeit dient als intelligenter Router für alle anderen Remotion-Fähigkeiten. Sie analysiert die Benutzeranfrage und leitet sie an die entsprechende spezialisierte Referenzmarkierung weiter – sei es für die Erstellung eines neuen Videos, die Einrichtung eines Projekts, die Arbeit mit Karten, Multimedia, Untertiteln oder die Konfiguration der Remotion Studio-Umgebung. Sie stellt sicher, dass die Benutzeränderungen im Code nicht überschrieben werden, und gibt klare Anweisungen, wann eine Vorschau gestartet oder ein Video gerendert werden soll. Die Fähigkeit ist mit verschiedenen Agenten-Clients kompatibel (Cursor, in-App-Browser, kein Browser) und beschreibt die genauen CLI-Befehle für jede Plattform. Sie enthält außerdem Best Practices für React-Markup, Interaktivität und SaaS-Workflows und ist somit eine zentrale Anlaufstelle für jede Remotion-bezogene Entwicklung.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/3bkader-gpt/remotion-tiktok-gym-editor/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 der Konversation Ä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 bauen oder zu konstruieren, laden Sie Ein neues Remotion-Video erstellen, unabhängig davon, ob bereits ein Remotion-Projekt existiert.

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-Geografie-Überflüge laden Sie Remotion-Karten.

Multimedia

Für Multimedia-Aufgaben im Browser (wie Trimmen, Zuschneiden von Videos oder 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 relevant: Best Practices für Interaktivität

Vorschau öffnen

Wenn der Benutzer darum bittet, ein Video zu „erstellen“, „bauen“ usw. Rendern Sie das Video standardmäßig nicht, es sei denn, der Benutzer ist sehr explizit. Er 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 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 integrierten Browser verwenden

Sie können den obigen Befehl verwenden, um Studio den Browser öffnen zu lassen, oder Sie führen Folgendes aus:

npx remotion studio --no-open

Dies startet einen langlebigen 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 überprüfen Sie, ob Studio lädt. Sobald eine Komposition existiert, überprüfen Sie, ob die 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 Studio unterstützt WebMCP-Tools. :::

Wenn Sie keinen integrierten Browser haben

Dadurch wird Studio im Browser geöffnet oder wieder in den Fokus gerückt, falls 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 CLI-Flags für Studio zu konfigurieren, laden Sie Remotion Studio.

Video rendern

Rendern Sie nur, wenn der Benutzer sehr explizit danach fragt. Z. B. „Video rendern“, „Exportieren“, „Gib mir die 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 Rendern.

Erweiterte Optionen jenseits des einfachen npx remotion render finden Sie unter: Best Practices für Rendering

Untertitel

Wenn Sie mit Untertiteln arbeiten, laden Sie Remotion-Untertitel.

SaaS, Automatisierung oder Anwendung erstellen

Nutzen Sie die Remotion-SaaS-Fähigkeit für Wissen über Remotion-basierte SaaS-Apps wie <Player>, Rendering auf Lambda, Vercel, Cloudflare, über Express.js, Client-seitiges 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.

Upgrade

Für ein Upgrade von Remotion, zugehörigen Paketen, kompatiblen Mediabunny-Paketen und installierten Remotion-Agent-Fähigkeiten laden Sie Remotion-Upgrade.

Individual skills in this repo

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

Verwandte Skills