Communitygithub.com

Remotion-Videoproduktion

Remotion-Videos aus Quellmaterialien, Skripten, Bildern, Aufnahmen oder groben Briefings erstellen oder überarbeiten. Verwendbar für narrative und stilistische Vorschläge, gezielte Klärungen, React-Implementierung, Medienvorbereitung, Studio-Review und finalen Export, einschließlich Fallbacks für menschliche Überprüfungen.

Was ist Remotion-Videoproduktion?

Diese Fähigkeit führt einen Entwickler oder KI-Agenten durch den gesamten Workflow zur Erstellung eines Remotion-Videos aus beliebigen Quellen – von Texten und Bildern bis zu Audioaufnahmen. Sie ist für Claude Code, Cursor und ähnliche programmierorientierte KI-Assistenten konzipiert und folgt einem strengen, aber flexiblen Sieben-Stufen-Prozess: Inspizieren der Vorgaben und Assets, Vorschlagen einer kreativen Richtung, Erstellen eines kompakten Storyboards, Vorbereiten von Medien mit präzisem Timing, Implementieren der Szene in React/TypeScript, Vorschau im Remotion Studio (oder über alternative Methoden) und finaler Export mit Qualitätssicherung. Die Fähigkeit legt großen Wert darauf, keine Fakten zu erfinden, menschliche Überprüfungen an kritischen Punkten einzuplanen und ein detailliertes Produktionsprotokoll zu führen, damit ein anderer Agent nahtlos fortfahren kann. Sie vermeidet zudem die Abstraktion in ein generisches Timeline- oder Plugin-System und hält wiederverwendbare Anleitungen themenneutral.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Nu424/remotion-video-production-skill/tree/main/skills/remotion-video-production

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht Remotion-Videoproduktion?

Quellmaterial in ein kohärentes, bearbeitbares Video verwandeln. Das Video in React erstellen; aus gespeicherten Medien rendern. Die folgenden Phasen durchlaufen und dabei an die Anweisungen des Benutzers und das bestehende Projekt anpassen. Ein kurzes Produktionsprotokoll führen, damit ein anderer Agent nahtlos fortfahren kann, ohne Entscheidungen rekonstruieren zu müssen.

1. Briefing, Assets und Fähigkeiten prüfen

Zielgruppe, gewünschte Kernaussage, Lieferformat, Ton und verfügbare Assets identifizieren. Fakten aus der Quelle, redaktionelle Interpretation und ungeklärte Informationen unterscheiden; keine fehlenden faktischen Schritte, Fähigkeiten oder Ergebnisse erfinden. Große eingebettete Assets extrahieren, bevor das Dokument in den Kontext eingelesen wird. Eine Quell-zu-Szene-Zuordnung im Produktionsprojekt beibehalten.

Relevante Bilder und Aufnahmen inspizieren, nicht nur Dateinamen. Bildausschnitt, eingebettete Beschriftungen, Ton und tatsächlich sichtbare Aktionen notieren. Prüfen, ob dieser Agent Bilder inspizieren, Audio hören, Code ausführen und eine für den Benutzer zugängliche Vorschau bereitstellen kann. Fehlende Wahrnehmungsfähigkeit erfordert den Fallback in references/runtime.md; ein Skript kann diese Modellfähigkeiten nicht bestimmen oder menschliches Urteilsvermögen ersetzen.

Bei einem bestehenden Node-Projekt optional node <skill-dir>/scripts/doctor.mjs <project-dir> ausführen. Es inventarisiert Abhängigkeiten; es beweist nicht die Render-Bereitschaft. Den Paketmanager und die Lock-Datei des Projekts verwenden. Der aktuellen Best-Practice-Fähigkeit von Remotion folgen, sofern verfügbar, ansonsten der offiziellen Dokumentation folgen.

2. Eine Richtung vorschlagen und nur sinnvolle Unklarheiten klären

Eine empfohlene Richtung angeben: Zielgruppe/Kernaussage, grobe Dauer und Seitenverhältnis, Szenenablauf, visueller Ton und Erzählansatz. Erklären, wie die Quelle und der Betrachtungszweck diese Entscheidung beeinflusst haben. Bei Struktur- und Stilentscheidungen references/editorial.md verwenden.

Eine kleine Anzahl fokussierter Fragen stellen, wenn Antworten den faktischen Inhalt, die Zielgruppe, die Richtung oder die Verwendung nicht verfügbarer Assets ändern würden. Bereits beantwortete Fragen nicht wiederholen oder für jeden Auftrag einen Fragebogen verlangen. Während des Wartens unabhängig weiterarbeiten; ungeklärte wesentliche Fakten dürfen nicht erfunden werden. Falls optionale Präferenzen nicht angegeben sind, vernünftige Annahmen treffen und im Rahmen der Autorisierung des Benutzers fortfahren.

3. Ein kompaktes Storyboard schreiben

Für jede Szene deren Zweck, Quellennachweis, gesprochene Worte, visuelle Hervorhebung, beabsichtigte visuelle/Bewegungsgestaltung und ungefähre Dauer festhalten. Erzählung klar von Überschriften und Bildunterschriften trennen. Ungelöste Fakten separat auflisten. Das Storyboard als redaktionelles Dokument behandeln, nicht als neue Programmiersprache. Eine repräsentative Sequenz frühzeitig testen, wenn die visuelle oder Audio-Richtung unsicher ist.

4. Medien und gemessenes Timing vorbereiten

Jedem Medientyp einen geeigneten Adapter zuweisen. Eine Sprach- und eine Videogenerierungsanfrage müssen nicht dieselbe Eingabeform haben. Ihre Ergebnisse auf gespeicherte Dateien und nützliche Metadaten normalisieren, einschließlich Dauer, Abmessungen, Generierungseinstellungen, Herkunft und ggf. erforderlicher Quellenangabe.

Mediengenerierung auflösen, bevor eine Vorschau angezeigt oder gerendert wird. Ausgaben nach Eingabeinhalt und effektiven Anbietereinstellungen zwischenspeichern und die zwischengespeicherten Dateien überprüfen. Keine kostenpflichtige oder nicht deterministische Generierung aus React-Render-Funktionen oder Metadatenauswertung auslösen.

Bei Erzählung bei Bedarf Anzeigetext von Aussprachetext trennen. Tatsächliche Audiodauer messen, dann genügend Zeit für das Verständnis des zugehörigen Bildes und Textes einplanen. Phrasen- oder Satz-Timing verwenden, wenn dies ausreicht. Wort-Hervorhebung erfordert zuverlässige Zeitstempel oder Alignment; gleichmäßiges Verteilen von Zeichen ist kein genaues Alignment.

Bei vorhandenen Aufnahmen den Originalton erhalten oder gezielt kürzen und Untertitel aus einem Transkript oder einer Transkription ableiten. Szenenversätze, Audio-Intro, Pausen und Überblendungen berücksichtigen. references/pipeline.md für Adapter-, Timing-, Cache- und Überarbeitungsverträge verwenden. Mitgelieferte optionale Helfer extrahieren Inline-Bilder und validieren Untertitelbereiche; Nutzung und Einschränkungen sind in references/runtime.md festgelegt.

5. In gewöhnlichem React/TypeScript implementieren

Kleine Komponenten für wiederkehrende Behandlungen wiederverwenden und beliebiges React für themenspezifische Szenen zulassen. Daten können Text, Medienpfade, Timing, Quellenverweise und Design-Tokens enthalten. Ein Vorlagenschema nur einführen, wenn die wiederholte Ausgabe eines bekannten Formats dies rechtfertigt. Keinen allgemeinen Timeline-Interpreter, Plugin-Registrierung oder Orchestrierungsdienst für ein lokales Video erstellen.

Bewegung aus Bildnummern ableiten; Wanduhren-Timer und unkontrollierte Zufälligkeit vermeiden. Erforderliche Schriftarten und Assets lokal laden. Stil kann Typografie, Komposition, Bewegung, Hervorhebungstexte, Rhythmus und Audio ändern; nur die Palette zu ändern ist kein vollständiger Stilwechsel. Bei reinen Präsentationsänderungen bereits genehmigte Medien und Timing wiederverwenden.

Fokussierte Typ-, Asset-, Dauer- und Untertitelprüfungen durchführen. check-captions.mjs nur für seinen dokumentierten Timing-Vertrag verwenden. Tests gehören um wiederverwendbare Timing-/Import-/Cache-Logik, nicht um jede kosmetische Entscheidung. Vorhandene Komponenten und kleine, verifizierte Änderungen bevorzugen, wenn der Agent nur begrenzte Programmierfähigkeiten hat.

6. Vorschau vor dem endgültigen Export anzeigen

Remotion Studio bevorzugen, wenn der Benutzer darauf zugreifen kann. Die Komposition anzeigen und erklären, was überprüft werden muss: Quellentreue, Stil, Text-/Subjektbeschneidung, Untertitellesbarkeit, Bewegung und Ton. Repräsentative Szenen, Grenzen und das Ende selbst inspizieren, wo unterstützt. Wenn der Benutzer vor dem Export eine Überprüfung angefordert hat, die Vorschau bereitstellen und auf diese Überprüfung warten, bevor der endgültige Export erfolgt. Vorhandene Genehmigung oder eine explizite Render-Anfrage kann das Fortfahren autorisieren; kein bedingungsloses Bestätigungstor hinzufügen.

Wenn interaktives Studio nicht verfügbar ist, repräsentative Standbilder und, wenn Bewegung/Audio überprüft werden müssen, einen kurzen niedrig aufgelösten Entwurf erstellen. Eine lokale Host-URL einer entfernten Umgebung ist möglicherweise für den Benutzer nicht zugänglich; eine erreichbare Vorschau oder ein lokales Artefakt liefern. Standbilder belegen keine Bewegungs- oder Audioqualität. Die Fallbacks für menschliche Überprüfung in references/runtime.md anwenden und genau berichten, was überprüft wurde und was nicht.

7. Exportieren, verifizieren und ausliefern

Nach Abschluss einer angeforderten Überprüfung die installierte Remotion-CLI des Projekts für den Routineexport verwenden. Siehe references/runtime.md für npx-Befehle. Die Renderer-API nur verwenden, wenn programmatische Integration oder Stapelverarbeitung dies rechtfertigt. Benutzerbearbeitungen erhalten und bei Überarbeitungen nur die betroffenen Medien neu generieren.

Abmessungen, Bildrate, Dauer, Audio-Präsenz, erste/letzte Bilder, Untertiteländerungen und Szenengrenzen der exportierten Datei prüfen. Das vollständige Ergebnis abspielen, wenn eine wahrnehmungsbezogene Überprüfung verfügbar ist; andernfalls die verbleibende menschliche Überprüfung identifizieren. Ein erfolgreicher Render oder Audio-Dekodierung belegt keine redaktionelle Qualität, korrekte Aussprache oder eine angenehme Mischung. Vorschau-Überprüfung und Enddatei-Verifikation sind separate Nachweise.

Das bearbeitbare Projekt, den Vorschau-/Exportort, Reproduktionsbefehle und einen prägnanten Status liefern: implementiert, Vorschau geprüft, vom Benutzer überprüft, exportiert, Enddatei geprüft. Nur abgeschlossene Phasen angeben. Das Produktionsprotokoll beim Produkt führen.

Wiederverwendbare Anleitungen getrennt von Produktionen halten

Fähigkeiten und verteilbare Beispiele müssen in sich geschlossen und themenneutral sein. Private Quelltexte, Bilder, Audio, Namen, Links, Kennungen, Dateipfade und produktspezifische Anweisungen im Produktionsprojekt belassen. Nicht in eine wiederverwendbare Fähigkeit, deren Metadaten, Referenzen, Fixtures oder Assets aufnehmen. Neu erfundene Beispiele verwenden, wenn ein Beispiel erforderlich ist.

Methoden und Entscheidungskriterien, die aus einer Produktion gelernt wurden, dokumentieren, ohne deren Gegenstand als universelle Anforderung zu kodieren. Den tatsächlichen Inhalt des Fähigkeitspakets überprüfen, bevor es geteilt oder installiert wird.

Verwandte Skills