Communitygithub.com

zoih6/masafat-watan-video

Router für alle Remotion-Fähigkeiten

Was ist masafat-watan-video?

Diese Fähigkeit fungiert als zentraler Router für alle Remotion-bezogenen Fähigkeiten und leitet den KI-Agenten je nach Benutzeranfrage an die richtige Unterreferenz weiter. Sie deckt ein breites Spektrum an Aufgaben ab, von der Erstellung neuer Remotion-Videos und Projekteinrichtung über React-Markup-Best Practices, Karten (statisch, animierte Routen, geografische Erklärfilme mit Mapbox/MapLibre), Multimedia-Verarbeitung (Trimmen, Zuschneiden von Videos), Interaktivitätsverbesserungen, Untertitelung, Rendering und SaaS-Integrationen bis hin zur Dokumentensuche, Aufrüstung sowie fortgeschrittenen Studio-Konfigurationen. Die Fähigkeit betont die Bedeutung der Zusammenarbeit mit Benutzern: Sie sollen Änderungen am Code respektieren, eine interaktive Vorschau im Remotion Studio starten, bevor gerendert wird, und je nach Agenten-Client entsprechende Startbefehle (`npx remotion studio`) ausführen. Sie gibt klare Anweisungen zu Umgebungen mit und ohne In-App-Browser und unterstützt sowohl einfaches Rendering als auch fortgeschrittene Optionen über Lambda, Vercel, Cloudflare oder Express.js. Die Fähigkeit deckt sowohl Remotion als auch verwandte Pakete ab und macht sie zu einem unverzichtbaren Einstiegspunkt für jede Remotion-gestützte Videoerstellungs- oder Automatisierungsaufgabe.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/zoih6/masafat-watan-video/tree/HEAD/skills-docs/remotion-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 Änderungen am Code vornehmen.

Wenn Sie eine überraschende Änderung feststellen, die in der Zwischenzeit vorgenommen wurde, überschreiben Sie sie nicht. Gehen Sie davon aus, dass sie beabsichtigt war, oder fragen Sie nach.

Ein Video erstellen

Wenn der Benutzer darum bittet, ein neues Video oder eine neue Komposition zu erstellen, zu bauen oder zu konstruieren, laden Sie Create a new Remotion video, unabhängig davon, ob bereits ein Remotion-Projekt existiert.

Neues Projekt einrichten

Wenn derzeit kein Remotion-Projekt existiert, laden Sie Create a new Remotion project

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 Maps.

Multimedia

Für Multimedia-Aufgaben im Browser, wie das Trimmen, Zuschneiden von Videos oder das Abrufen von Metadaten, laden Sie Remotion Multimedia

Verbesserung der Interaktivität

Durch eine gute Strukturierung des Remotion-Markups können Benutzer Dinge im Studio interaktiv ändern und zurück in den Code schreiben. Falls relevant: Interactivity Best Practices

Vorschau öffnen

Wenn der Benutzer darum bittet, ein Video zu "erstellen" oder zu "bauen", etc. Rendern Sie das Video standardmäßig nicht, es sei denn, er ist sehr explizit. Stattdessen möchte er eine interaktive Vorschau sehen. Sobald das Projekt ausführbar 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 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 Sie führen Folgendes aus:

npx remotion studio --no-open

Dadurch wird ein langlebiger Prozess gestartet und die Server-URL für die Vorschau ausgegeben. 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 lädt. Sobald eine Komposition existiert, überprüfen Sie, ob ihre Videovorschau lädt. 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, z. B. http://localhost:3000/MapAnimation.

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

Wenn Sie keinen In-App-Browser haben

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

npx remotion studio

Weitere Optionen

Um ein Projekt in Remotion Studio zu starten, die exakte 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", "Exportiere", "Gib mir die MP4".

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

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.

Erstellen einer SaaS, Automatisierung oder Anwendung

Verwenden Sie den Remotion SaaS skill 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 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.

Individual skills in this repo

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

Verwandte Skills