Was macht Remotion Video Director?

Ein interaktiver Skill, der Nutzer von der Idee "Ich brauche ein Video" bis zu einem fertigen MP4 mit Musik führt – mit Expertenberatung, Szenario-Design und erprobten Remotion-Patterns.

Wann verwenden

Aktiviere diesen Skill, wenn der Nutzer:

Ein Video mit Remotion erstellen möchte
Ein Produkt-Demo, Launch-Video, wiederkehrendes Content-Template, Marketing-Video oder narrative Einleitung benötigt
Sagt: "Ich brauche ein Video", "Mach ein Video für...", "Erstelle ein Remotion-Video", "Video als Code"
Hilfe benötigt, um zu überlegen, welches Video er machen soll oder wie er es strukturieren kann
Ein Remotion-Projekt hat und eine Expertenbewertung wünscht

Beziehung zum offiziellen Remotion-Skill

Das offizielle remotion-dev/skills-Paket lehrt Claude die Remotion-API (37 Regeldateien mit Animationen, Audio, Untertiteln, Übergängen usw.). Dieser Skill kümmert sich um die kreative und strategische Ebene darüber:

Offizieller Skill: "Wie verwende ich interpolate()?" (technische Referenz)
Video Director: "Welches Video soll ich machen und wie soll es ablaufen?" (kreativer Prozess)

Wenn der offizielle Remotion-Skill installiert ist, nutze ihn für API-spezifische Details. Falls nicht, bieten die references/remotion-patterns.md und references/component-library.md in diesem Skill ausreichend Remotion-Wissen, um produktionsreife Videos zu erstellen.

Vier-Phasen-Workflow

Phase 1: Strategische Einordnung

Ziel: Durch Gespräch verstehen, was der Nutzer braucht, und dann Expertenperspektiven zusammenstellen.

KRITISCH: Diese Phase ist INTERAKTIV. Stelle Fragen eine nach der anderen und WARTE auf Antworten. Gib NICHT alle Fragen auf einmal aus oder fahre ohne Nutzereingabe automatisch fort.

Schritt 1 – Discovery (Gespräch)

Beginne mit einer einzigen offenen Frage:

"Wofür ist dieses Video? Erzähl mir von der Idee, wer es sehen wird und was sie danach tun sollen."

WARTE auf die Antwort des Nutzers. Stelle dann gezielte Folgefragen basierend auf dem, was fehlt:

Wenn das Publikum unklar ist: "Wer genau wird es sehen? (Kunden, Team, Investoren, Social Media?)"
Wenn die gewünschte Aktion unklar ist: "Was sollen die Zuschauer nach dem Anschauen TUN? (Registrieren, etwas verstehen, teilen?)"
Wenn keine Einschränkungen genannt wurden: "Gibt es Einschränkungen, die ich kennen sollte? Dauer, Markenfarben, vorhandene Assets, Abgabetermin?"
Wenn sie ein Produkt erwähnen: "Kannst du Screenshots des Produkts/der Oberfläche teilen?"

Fahre NICHT fort, bis du verstanden hast: Zweck, Zielgruppe, gewünschte Aktion und Einschränkungen.

Schritt 2 – Kreative Richtung

Präsentiere die Optionen für die kreative Richtung und bitte den Nutzer, eine auszuwählen:

Stil	Gefühl	Am besten geeignet für
Minimal/Jobs	Schwarzer Hintergrund, dramatische Pausen, eine Idee pro Frame, Impact-Schriftart	Produkt-Launches, große Ideen, Keynotes
Datenreich/Bloomberg	Dunkelblauer Hintergrund, animierte Charts, dicht aber organisiert	Meeting-Zusammenfassungen, Berichte, Dashboards
Warm/Erzählend	Warme Töne, persönliche Zitate, Serifen-Akzente	Kurs-Einführungen, Team-Geschichten, Community
Terminal/Hacker	Dunkles Code-Theme, Schreibmaschine, Monospace überall	Technische Demos, Entwickler-Tools, Ingenieurwesen
Benutzerdefiniert	Nutzer beschreibt oder liefert Referenz-Screenshots/-Videos	Alles Spezifische

"Welche Stilrichtung passt zu deinem Video? Oder teile Screenshots von Videos, die dir gefallen haben."

WARTE auf Antwort.

Lies references/video-archetypes.md für die vollständige Spezifikation der gewählten Richtung (Farben, Schriften, Animationsstil, Timing-Regeln).

Schritt 3 – Referenzeingabe (Optional)

"Hast du Referenzvideos, Screenshots oder visuelle Stile, die ich nachahmen soll? (Überspringen, wenn keine)"

Wenn der Nutzer Referenzen bereitstellt, analysiere sie auf: Farbpalette, Typografie, Animationsgeschwindigkeit, Layout-Dichte, Gesamtstimmung. Integriere diese in das kreative Briefing.

WARTE auf Antwort oder Bestätigung zum Überspringen.

Schritt 4 – Experten-Panel-Zusammenstellung

Basierend auf dem ausgewählten Archetyp (aus references/video-archetypes.md) und der kreativen Richtung stelle ein Panel von 3-4 Experten aus references/expert-definitions.md zusammen.

Generiere Expertenperspektiven – für jeden Experten 2-3 Sätze:

Eine spezifische Empfehlung
Ein Risiko, auf das zu achten ist

Halte es prägnant. Präsentiere es als kurze Diskussionsrunde. Hebe nur hervor, wo sich Experten widersprechen (das zeigt eine Entscheidung, die der Nutzer treffen muss).

Schritt 5 – Kreatives Briefing

Fasse es in einem strukturierten Briefing zusammen:

## Kreatives Briefing

**Zweck**: [ein Satz]
**Zielgruppe**: [wer, worauf sie achten]
**Kernbotschaft**: [das EINE, woran sich Zuschauer erinnern sollen]
**Gewünschte Aktion**: [was Zuschauer als Nächstes tun sollen]
**Dauer**: [Sekunden] ([Frames] Frames bei 30fps)
**Kreative Richtung**: [ausgewählter Stil – Minimal/Jobs, Bloomberg, etc.]
**Emotionale Kurve**: [z.B. Neugier -> Beweis -> Vertrauen -> Aktion]

## Audio-Strategie
- Musik: [ambient/energetisch/dramatisch/spärlich] von Pixabay
- Voice-Over: [ja/nein]
- Musik-Stimmung: [Beschreibung passend zur kreativen Richtung]

## Szenen-Ablauf
| # | Szene | Dauer | Zweck |
|---|-------|-------|-------|
| 1 | ... | Xs | ... |

## Datenmodell (falls zutreffend)
[Was parametrisiert vs. fest codiert ist – die wiederverwendbare Template-Struktur]

## Visueller Stil
- Thema: [Name der kreativen Richtung]
- Hintergrund: [Farbe]
- Farben: [Primär, Akzent, Sekundär]
- Typografie: [Überschriftenschriftart, Fließtext-Schriftart, Mono-Schriftart]
- Animationsgefühl: [schnell/sanft/dramatisch/Schreibmaschine]

"Hier ist das kreative Briefing. Möchtest du etwas anpassen, bevor wir die Szenen entwerfen?"

WARTE auf Bestätigung oder Anpassungen.

Phase 2: Szenario-Design

Ziel: Das Briefing in ein detailliertes Szenario Szene für Szene umwandeln.

Schritt 6 – Szenen-Design

Für jede Szene im Ablauf spezifizieren:

Inhalt: Exakter Text, Daten, visuelle Elemente
Komponenten: Welche wiederverwendbaren Komponenten zu verwenden sind (aus references/component-library.md)
Animation: Ein-/Ausgangsanimationen, Timing in Frames
Übergänge: Cross-Dissolve zwischen allen Szenen (8-12 Frames)

Lies references/remotion-patterns.md für kritische Remotion-Einschränkungen und Premium-Styling-Patterns.

Szenenfokus-Regel: Jede Szene muss EINE Idee bedienen, die mit der Kernbotschaft verbunden ist. Wenn eine Szene nebensächlich zur Kernbotschaft ist, SCHNEIDE SIE. Weniger fokussierte Szenen sind immer besser als viele verstreute.

Frame-Budget: Zeichne die gesamte Timeline auf:

const TIMING = {
  scene1: { start: 0, dur: 6 },   // Aufhänger
  scene2: { start: 6, dur: 10 },  // ...
  // Gesamt muss composition durationInFrames / fps entsprechen
};

Schritt 7 – Datenarchitektur

Wenn das Video datengetrieben ist (wiederkehrender Bericht, multi-variantes Marketing):

Entwerfe das Konfigurationsobjekt, das sich zwischen den Renderings ändert
Identifiziere, was konstant bleibt (visuelle Vorlage) vs. was variiert (Inhalt)
Zeige dem Nutzer die Konfigurationsstruktur und bestätige sie

Beispiel-Pattern (aus WeeklyIntro):

const weekData = {
  weekLabel: "Mar 3 - Mar 9",
  heroNumber: 312,
  heroLabel: "new signups",
  // ... Felder, die sich wöchentlich ändern
};

Schritt 8 – Nutzerbestätigung

Präsentiere das vollständige Szenario.

"Bereit zum Bauen, oder möchtest du etwas anpassen?"

WARTE auf Bestätigung.

Phase 3: Bauen

Ziel: Das Remotion-Projekt erstellen und die erste Version rendern.

KRITISCH: Führe niemals einen Befehl aus, der einen interaktiven CLI-Assistenten startet oder nach Eingabe fragt. Dazu gehören npx create-video, npx remotion init, npm init oder bloßes npx remotion render ohne Argumente. Erstelle Dateien immer manuell und übergib alle Argumente explizit an CLI-Befehle.

Schritt 9 – Projekt-Gerüst bauen

Erstelle die Remotion-Projektstruktur manuell (verwende KEINE Scaffolding-Assistenten – siehe Phase 3-Header):

<project>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # oder <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # wenn datengetrieben
├── public/
│   ├── music.mp3           # Hintergrundmusik
│   └── illustrations/      # wenn Hintergrundbilder verwendet werden
├── package.json
├── tsconfig.json
└── remotion.config.ts

Installiere Abhängigkeiten: pnpm install

Schritt 10 – Szenen bauen

Baue jede Szenen-Komponente gemäß dem Szenario aus Phase 2. Verwende Komponenten aus references/component-library.md.

Kritische Bauregeln (aus references/remotion-patterns.md):

Alle Animationen via useCurrentFrame() + interpolate()/spring() – NIEMALS CSS-Übergänge
Immer Interpolation klemmen: { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
useCurrentFrame() ist relativ zur nächsten <Sequence>, nicht zur globalen Timeline
Cross-Dissolve zwischen jeder Szene (8-12 Frame-Hülle; Ausnahme: Terminal/Hacker-Stil, wo harte Schnitte passen)
Jedes Element muss sich einblenden – niemals statisch bei einem Schnitt erscheinen

Premium-Styling-Regeln (aus references/remotion-patterns.md):

Schriftarten-Vielfalt: Mische Überschriften-Schriftart + Fließtext-Schriftart + Mono-Schriftart (nicht Inter überall)
Extreme Größenkontraste: Überschriften 72-96pt, Fließtext 20-24pt
Wichtige Fragen/Überschriften vertikal zentrieren
Maximal 15-20 Wörter pro textlastiger Folie, 7 Wörter für Überschriften-Folien (Jobs-Stil)
Text in den oberen 85% des Frames halten
Mindestens 24px Schriftgröße für Lesbarkeit
Abstand 80-120px von den Rändern

Schritt 11 – Audio-Integration

Lies references/music-and-audio.md für die vollständige Audio-Anleitung.

"Möchtest du Hintergrundmusik hinzufügen? Ich empfehle, auf pixabay.com/music/ einen lizenzfreien Track zu suchen, der zum [ausgewählten kreativen Stil] passt. Teile den Download-Link oder die Datei, und ich integriere sie mit passenden Lautstärkekurven."

WARTE auf Nutzerantwort.

Wenn der Nutzer Musik bereitstellt:

Herunterladen/als public/music.mp3 speichern
<Audio>-Komponente mit Fade-In/Fade-Out-Lautstärkekurve hinzufügen
Musiklautstärke bei datenreichen Szenen reduzieren (0.30 -> 0.15)
Wenn der Track länger als das Video ist, startFrom verwenden, um den Endteil abzuspielen

Wenn der Nutzer Voice-Over möchte:

Erzählskript aus Szenen-Inhalt generieren (~3 Wörter/Sekunde)
Nutzer nimmt auf oder verwendet ElevenLabs
Mit Musik-Ducking integrieren (Musik fällt auf 0.10-0.12 während des Voice-Overs)

Wenn der Nutzer Audio überspringt: Mit --muted-Flag rendern.

Schritt 12 – Rendern und Vorschau

KRITISCH: Übergib immer die Einstiegsdatei, um interaktive Eingabeaufforderungen zu vermeiden. Führe niemals bloßes npx remotion render aus – das könnte einen interaktiven Kompositions-Wähler starten. Gib immer die Einstiegsdatei und die Kompositions-ID explizit an:

# Finales MP4 rendern – immer Einstiegspunkt + Kompositions-ID angeben
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18

# Ohne Audio:
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18 --muted

Öffne das Video zur Überprüfung für den Nutzer.

Phase 4: Überprüfung

Ziel: Das Video durch Experten- und Nutzerfeedback verfeinern, bis es versandfertig ist.

Schritt 13 – Multi-Experten-Überprüfung

Nachdem der Nutzer das Video gesehen hat, führe das Überprüfungsprotokoll aus references/expert-definitions.md aus.

Generiere eine Bewertungstabelle (siehe references/expert-definitions.md für die vollständige Vorlage):

| Dimension              | Priorität  | Punktzahl |
|------------------------|------------|-----------|
| Aufhänger-Klarheit (erste 3-5s) | Kritisch | ?/5 |
| Kernbotschaft angekommen | Kritisch | ?/5 |
| Tempo / Dynamik        | Hoch       | ?/5 |
| Visuelle Lesbarkeit    | Hoch       | ?/5 |
| Zielaktion klar        | Hoch       | ?/5 |
| Zielgruppen-Passung    | Mittel     | ?/5 |

Füge 2-3 typ-spezifische Dimensionen hinzu (z.B. "Visuelles Premium-Gefühl" für Minimal/Jobs, "Audio-visuelle Harmonie" wenn Musik hinzugefügt wurde, "Konfig-Wiederverwendbarkeit" für Datenberichte).

Jeder Experte bewertet aus seiner Perspektive, einschließlich des Kameramanns zur visuellen Komposition und des Musikdirektors für Audio (wenn Musik hinzugefügt wurde). Fasse zusammen in:

Stärken – was gut funktioniert
Verbesserungen – spezifische, umsetzbare Änderungen
Urteil – so versenden, benötigt einen weiteren Durchlauf, oder benötigt erhebliche Überarbeitung

Frage den Nutzer, welche Verbesserungen angewendet werden sollen.

Schritt 14 – Nutzerüberprüfung und Iteration

Die Expertenüberprüfung fängt technische Probleme auf, aber nur der Nutzer weiß, ob sich das Video richtig anfühlt.

"Jetzt, wo du das Video und die Expertenbewertung gesehen hast – was ist dein Eindruck?

Welche Szenen funktionieren gut?

Welche Szenen benötigen Änderungen? (Screenshot bestimmter Frames, wenn möglich)

Gibt es Text-, Timing- oder visuelle Probleme?

Fehlt etwas oder sollte etwas entfernt werden?"

WARTE auf das Feedback des Nutzers.

Wenn der Nutzer Feedback gibt:

Bestätige was ihm gefallen hat (verstärkt die Richtung)
Liste die spezifischen Änderungen auf, die du basierend auf seinen Notizen vornimmst
Setze die Änderungen um – bearbeite Szenen-Komponenten, passe Timing an, korrigiere Text
Rendere erneut und präsentiere das aktualisierte Video
Frage erneut: "Besser? Noch etwas anzupassen?"

Wiederhole diesen Kreislauf, bis der Nutzer zufrieden ist. Typische Videos benötigen 1-3 Verfeinerungsrunden.

Häufige Feedback-Muster und wie man sie behandelt:

"Zu schnell" → Szenendauern um 30-50% erhöhen, mehr dramatische Pausen einfügen
"Zu viel Text" → Szenen aufteilen, auf 7 Wörter pro Frame reduzieren (Jobs-Stil)
"Fühlt sich nicht premium an" → Auf Minimal/Jobs-Richtung wechseln, negativen Raum hinzufügen
"Musik passt nicht" → Einen anderen Pixabay-Track versuchen, Lautstärkekurve anpassen
"Falscher Ton" → Kreative Richtung überdenken, Farbpalette und Animationsgeschwindigkeit anpassen
"Szene X ist verwirrend" → Auf EINE Idee vereinfachen, visuelle Hierarchie hinzufügen

Anpassungsrichtlinien

Wenn der Nutzer bereits ein Remotion-Projekt hat

Überspringe Phase 1-2 Scaffolding. Konzentriere dich auf die Überprüfung des vorhandenen Codes, das Vorschlagen von Verbesserungen oder das Hinzufügen neuer Szenen/Kompositionen.

Wenn der Nutzer ein schnelles Video möchte (ohne Diskussion)

Verkürze Phase 1: Frage in einer Frage nach Videotyp + kreativer Richtung. Wähle die Top-2-Experten aus, generiere ein kurzes Szenario. Schnell zum Bauen übergehen. Frage trotzdem nach Musik.

Wenn der Nutzer nur das Konzept möchte (kein Code)

Führe Phase 1-2 vollständig aus. Gib das kreative Briefing und Szenario als Dokument aus. Überspringe Phase 3.

Wenn der Nutzer Multi-Varianten-Videos möchte

Verwende den Growth-Marketing-Archetyp. Entwerfe die Varianten-Matrix (was sich pro Variante ändert). Baue ein Basisvideo und zeige dann, wie man parametrisiert. Erstelle ein wiederverwendbares Datenkonfigurationsmuster.

Inhaltsverzeichnis der Referenzen

Dieser Skill enthält die folgenden Referenzdateien, die während der Arbeitsabläufe konsultiert werden:

references/video-archetypes.md – Vollständige Spezifikation jedes kreativen Stils: Farbpaletten, Schriftpaare, Timing-Regeln, Stimmungen
references/component-library.md – Bereit zum Kopieren von React-Komponenten für FadeIn, SplitText, Typewriter, Charts, Layout-Hilfsmittel usw.
references/expert-definitions.md – Expertenrollen, Bewertungsvorlage und Überprüfungsprotokoll
references/remotion-patterns.md – Kritische Remotion-Einschränkungen und Premium-Styling-Patterns
references/music-and-audio.md – Anleitung zur Audiogestaltung: wann verwendet man Musik, Voice-Over, Stille; Fade-Kurven und Ducking

CRITICAL IMPLEMENTATION NOTES:

Jede Animation MUSS useCurrentFrame() verwenden, NIEMALS CSS-Übergänge oder -Animationen
Jede Szene MUSS sich mit interpolate()-Einblendungen von Nr. 0 beginnen (keine Standbilder beim Schnitt).
Verwende immer Sequence-Wrapper, um die Timelines der Szenen zu isolieren; useCurrentFrame() ist relativ zur nächsten Sequence.
extrapolate...: "clamp" VERPFLICHTEND bei allen interpolate()-Aufrufen.
Cross-Dissolve zwischen allen Szenen: 8-12 Frame Überlappung mit Opazität von 0-1. Ausnahme: Hacker/Terminal-Stil, wo harte Schnitte passen.
Gib immer explizit den Einstiegspunkt und die Kompositions-ID im Render-Befehl an.

Remotion Video Director

Was ist Remotion Video Director?

In Ihrer bevorzugten KI fragen

Dokumentation