Communitygithub.com

Guilhermeslvg/video-portfolio

Router für alle Remotion-Fähigkeiten

Was ist video-portfolio?

Diese Skill dient als zentraler Router für alle Remotion-bezogenen Fähigkeiten in einem KI-Agenten (z. B. Claude Code, Cursor, Codex). Sie erkennt, ob der Benutzer ein neues Video erstellen, ein bestehendes Projekt bearbeiten, Kartenanimationen, Multimedia-Aufgaben oder eine SaaS-Integration durchführen möchte, und lädt dann die entsprechende spezialisierte Referenzdatei. Die Skill stellt sicher, dass Benutzeränderungen im Code erhalten bleiben, und bietet klare Anweisungen zum Öffnen der Vorschau im Studio (mit oder ohne In-App-Browser) sowie zum Rendern von Videos. Sie deckt eine breite Palette von Remotion-Themen ab: von der Projekteinrichtung und React-Markup-Best-Practices über Karten (Mapbox, MapLibre, GeoJSON), Multimedia (Trimmen, Croppen), Captions und Interaktivität bis hin zu erweitertem Rendering, Upgrades und der Erstellung von SaaS-Anwendungen mit Player, Lambda und Vercel.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Guilhermeslvg/video-portfolio/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 des Gesprächs Codeänderungen vornehmen.

Wenn Sie eine überraschende Änderung bemerken, die in der Zwischenzeit vorgenommen wurde, überschreiben Sie sie nicht. Gehen Sie davon aus, dass sie beabsichtigt war, oder fragen Sie nach 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 Erstellen eines neuen Remotion-Videos, unabhängig davon, ob bereits ein Remotion-Projekt existiert.

Neues Projekt einrichten

Wenn derzeit kein Remotion-Projekt existiert, laden Sie Erstellen eines neuen Remotion-Projekts

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 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, der Benutzer ist sehr explizit. Der Benutzer möchte stattdessen 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 erstellen oder bearbeiten. Halten 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 Agent-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 exakt ausgegebene URL im In-App-Browser und überprüfen Sie, ob Studio geladen wird. Sobald eine Komposition existiert, überprüfen Sie, ob ihre Videovorschau geladen wird. 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, zum Beispiel http://localhost:3000/MapAnimation.

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

Wenn Sie keinen In-App-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, seine 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 darum bittet. Z. B. „Rendere das Video", „Exportiere", „Gib mir die MP4".

Die Vorschau bietet auch eine intuitivere Rendering-Oberfläche. Ziehen Sie diese anstelle der Befehlszeile in Betracht.

npx remotion render

Weitere Optionen finden Sie unter Rendering.

Für erweitertes Rendering über einfaches npx remotion render hinaus, siehe: Rendering Best Practices

Untertitel

Wenn Sie mit Untertiteln arbeiten, laden Sie Remotion Untertitel.

Erstellen einer SaaS, Automatisierung oder Anwendung

Verwenden Sie die Remotion SaaS-Skill 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-Skills zu aktualisieren, laden Sie Remotion Upgrade.

Individual skills in this repo

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

Verwandte Skills