Communitygithub.com

Remotion Video Production

Erstelle bildgenaue, wiederholbare Videos mit React und Remotion, inklusive Kompositionen, Übergängen, animiertem Text, Medien, Audio, Untertiteln und Render-Validierung.

Was ist Remotion Video Production?

Dieser Skill ermöglicht die Erstellung von frame-genauen, wiederholbaren Videos unter Verwendung von React und Remotion. Er ist ideal für Entwickler, die programmatisch Videos generieren möchten, wobei Kompositionen, Übergänge, animierte Texte, Medien, Audio, Untertitel und die Validierung von Renderergebnissen unterstützt werden. Der Skill unterstützt die Plattformen Claude Code, Cursor und Codex und basiert auf der offiziellen Remotion-Agenten-Skill-Sammlung. Der Workflow umfasst die Überprüfung bestehender Projekte, die Verwendung von frame-basierten APIs wie `useCurrentFrame()` und `useVideoConfig()` sowie die sequenzielle Anordnung von Szenen und Übergängen. Qualitätsregeln stellen sicher, dass unnötige Render-Arbeiten, nicht reproduzierbare Assets und ungültige Frame-Berechnungen vermieden werden. Vor der Bereitstellung werden Lizenz- und Nutzungsbedingungen von Remotion überprüft.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/studio1111/AI-Motion-Graphics-Studio/tree/main/.agents/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 Video Production?

Upstream

Offizielle Remotion Agent Skills: https://github.com/remotion-dev/skills Offizielle Dokumentation: https://www.remotion.dev/docs/ai/skills

Für den vollständigen offiziellen Skillsatz und seine referenzierten Regeldateien installieren Sie ihn im verarbeitenden Workspace mit npx skills add remotion-dev/skills. Dieser lokale Skill ist ein Arbeitsablauf-Leitfaden und keine bytegenaue Kopie der Upstream-Distribution.

Workflow

  1. Untersuchen Sie das bestehende Projekt und bewahren Sie Benutzeränderungen.
  2. Wenn kein Projekt existiert, verwenden Sie den offiziellen Erstellungs-Workflow und überprüfen Sie die Paketkompatibilität.
  3. Definieren Sie die Kompositions-ID, Abmessungen, FPS, Dauer, Props und Asset-Pfade explizit.
  4. Verwenden Sie frame-/zeitbasierte APIs wie useCurrentFrame() und useVideoConfig(); verlassen Sie sich nicht auf CSS-Animationen mit Echtzeituhr für das Render-Timing.
  5. Verwenden Sie Interpolations-/Spring-Helfer mit absichtlichem Easing und Clamp-Bereichen, wo angemessen.
  6. Ordnen Sie Szenen und Übergänge so an, dass ihre Frame-Zahlen und Überlappungen die beabsichtigte Gesamtdauer erzeugen.
  7. Verwenden Sie unterstützte Medienkomponenten und statische Asset-Helfer; warten Sie auf asynchrone Assets, bevor Sie rendern.
  8. Starten Sie die Studio-Vorschau und prüfen Sie sie, bevor Sie bearbeiten oder rendern, wo die Umgebung dies erlaubt.
  9. Rendern Sie nur auf Anfrage, prüfen Sie dann die exportierte Datei und überprüfen Sie Dauer, Abmessungen, FPS, Audio und repräsentative Frames.

Qualitätsregeln

  • Vermeiden Sie unnötige pro-Frame-React-Arbeit und teure Effekte.
  • Halten Sie Schriftarten, Bilder, Audio- und Videopfade reproduzierbar.
  • Vermeiden Sie ungültige Frame-Berechnungen, negative Dauern, fehlende Assets und unbegrenzte Interpolation.
  • Überprüfen Sie Textpassung, RTL-Formgebung, Untertitel-Timing und visuelle Kontinuität.
  • Überprüfen Sie die aktuellen Remotion-Lizenz- und kommerziellen Nutzungsbedingungen vor der Bereitstellung.

Verwandte Skills