Remotion Video Regisseur

Ein interaktiver Skill, der den Nutzer von „Ich brauche ein Video“ zu einem gerenderten MP4 mit Musik führt – durch Expertenberatung, Szenario-Design und kampferprobte Remotion-Muster.

Wann verwenden

Diesen Skill auslösen, wenn der Nutzer:

Mit Remotion ein Video erstellen möchte
Ein Produkt-Demo, Launch-Video, wiederkehrende Content-Vorlage, Marketing-Video oder narrative Einführung benötigt
Sagt: „Ich brauche ein Video“, „Mach ein Video für…“, „Erstelle ein Remotion-Video“, „Video als Code“
Hilfe beim Durchdenken benötigt, welches Video er machen oder wie er es strukturieren soll
Ein Remotion-Projekt hat und eine Experten-Review wünscht

Beziehung zum offiziellen Remotion-Skill

Das offizielle Paket remotion-dev/skills lehrt Claude die Remotion-API (37 Regeldateien, die Animationen, Audio, Untertitel, Übergänge usw. abdecken). Dieser Skill übernimmt die kreative und strategische Ebene darüber:

Offizieller Skill: „Wie verwende ich interpolate()?“ (technische Referenz)
Video Regisseur: „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. Wenn nicht, liefern die references/remotion-patterns.md und references/component-library.md in diesem Skill ausreichend Remotion-Kenntnisse, um Produktionsvideos zu erstellen.

Vier-Phasen-Workflow

Phase 1: Strategische Einordnung

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

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

Schritt 1 – Discovery (Gespräch)

Beginne mit einer einzelnen 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 die Zielgruppe 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? (Anmelden, etwas verstehen, teilen?)“
Wenn keine Einschränkungen genannt wurden: „Gibt es irgendwelche Einschränkungen? Dauer, Markenfarben, vorhandene Assets, Deadlines?“
Wenn ein Produkt erwähnt wird: „Kannst du Screenshots des Produkts/der Oberfläche teilen?“

Fahre NICHT fort, bis du Folgendes verstehst: 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 Bild, Impact-Schriftart	Produkteinführungen, große Ideen, Keynotes
Data-Rich/Bloomberg	Dunkelmarineblauer Hintergrund, animierte Diagramme, dicht aber organisiert	Meeting-Zusammenfassungen, Berichte, Dashboards
Warm/Narrativ	Warme Töne, persönliche Zitate, Serifen-Akzente	Kurs-Einführungen, Team-Geschichten, Community
Terminal/Hacker	Dunkles Code-Theme, Schreibmaschinen-Stil, Monospace überall	Technische Demos, Entwickler-Tools, Engineering
Benutzerdefiniert	Nutzer beschreibt oder teilt 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, Schriftarten, 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 sie in das kreative Briefing.

WARTE auf Antwort oder Bestätigung zum Überspringen.

Schritt 4 – Expertenteam zusammenstellen

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

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

Eine spezifische Empfehlung
Ein zu beachtendes Risiko

Halte es kurz. Präsentiere es als kurze Diskussionsrunde. Hebe nur hervor, wo Experten unterschiedlicher Meinung sind (das zeigt eine Entscheidung an, die der Nutzer treffen muss).

Schritt 5 – Kreatives Briefing

Fasse in einem strukturierten Brief zusammen:

## Kreatives Briefing

**Zweck**: [ein Satz]
**Zielgruppe**: [wer, was ihnen wichtig ist]
**Kernbotschaft**: [das EINE, an das sich die Zuschauer erinnern sollen]
**Gewünschte Aktion**: [was die Zuschauer als nächstes tun sollen]
**Dauer**: [Sekunden] ([Frames] Bilder bei 30fps)
**Kreative Richtung**: [ausgewählter Stil - Minimal/Jobs, Bloomberg, etc.]
**Emotionaler Bogen**: [z.B. Neugier -> Beweis -> Vertrauen -> Aktion]

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

## Szenen-Sequenz
| # | Szene | Dauer | Zweck |
|---|-------|----------|---------|
| 1 | …   | Xs       | …     |

## Datenmodell (falls zutreffend)
[Was ist parametrisiert vs. hartcodiert – die wiederverwendbare Vorlagenstruktur]

## Visueller Stil
- Theme: [Name der kreativen Richtung]
- Hintergrund: [Farbe]
- Farben: [Primär, Akzent, Sekundär]
- Typografie: [Überschriftenschriftart, Textkörperschriftart, Monospace-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, szenenbasiertes Szenario umwandeln.

Schritt 6 – Szenen-Design

Für jede Szene in der Sequenz spezifizieren:

Inhalt: Exakter Text, Daten, Visualisierungen
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-Muster.

Szenen-Fokus-Regel: Jede Szene muss EINE Idee bedienen, die mit der Kernbotschaft verbunden ist. Wenn eine Szene tangential zur Kernbotschaft ist, STREICHE SIE. Weniger fokussierte Szenen sind immer besser als viele verstreute.

Frame-Budget: Die gesamte Zeitleiste abbilden:

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

Schritt 7 – Datenarchitektur

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

Das Konfigurationsobjekt entwerfen, das sich zwischen den Render-Durchläufen ändert
Identifizieren, was konstant bleibt (visuelle Vorlage) vs. was variiert (Inhalt)
Dem Nutzer die Konfigurationsstruktur zeigen und bestätigen

Beispielmuster (aus WeeklyIntro):

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

Schritt 8 – Benutzerbestätigung

Das vollständige Szenario präsentieren.

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

WARTE auf Bestätigung.

Phase 3: Bau

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 npx remotion render ohne Argumente. Erstelle Dateien immer manuell und übergib alle Argumente explizit an CLI-Befehle.

Schritt 9 – Projektgerüst erstellen

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

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

Abhängigkeiten installieren: pnpm install

Schritt 10 – Szenen bauen

Jede Szenenkomponente gemäß dem Szenario aus Phase 2 bauen. Komponenten aus references/component-library.md verwenden.

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

Alle Animationen via useCurrentFrame() + interpolate()/spring() – NIEMALS CSS-Transitions
Interpolation immer clampen: { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
useCurrentFrame() ist relativ zum nächsten <Sequence>, nicht zur globalen Zeitleiste
Cross-Dissolve zwischen jeder Szene (8-12 Frame-Hüllkurve; Ausnahme: Terminal/Hacker-Stil, wo harte Schnitte passen)
Jedes Element muss animiert hereinkommen – niemals statisch bei einem Schnitt erscheinen

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

Schriftarten-Vielfalt: Mischung aus Überschriftenschrift, Textkörperschrift und Monospace-Schrift (nicht überall Inter)
Extreme Größenkontraste: Überschriften 72-96pt, Textkörper 20-24pt
Wichtige Fragen/Überschriften vertikal zentrieren
Maximal 15-20 Wörter pro Textfolie, 7 Wörter für Überschriftenfolien (Jobs-Stil)
Text in den oberen 85% des Bildes halten
Mindestens 24px Schriftgröße für Lesbarkeit
Padding 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/ nach einem lizenzfreien Track zu suchen, der zum Stil der [gewählten kreativen Richtung] passt. Teile den Download-Link oder die Datei, und ich integriere sie mit passenden Lautstärkekurven.“

WARTE auf die Antwort des Nutzers.

Wenn der Nutzer Musik bereitstellt:

Herunterladen/speichern unter public/music.mp3
<Audio>-Komponente mit Fade-In/Fade-Out-Lautstärkekurve hinzufügen
Musiklautstärke während datenintensiver Szenen senken (0,30 -> 0,15)
Wenn der Track länger als das Video ist, startFrom verwenden, um den Endabschnitt abzuspielen

Wenn der Nutzer Voice-Over wünscht:

Erzählskript aus Szeneninhalten generieren (~3 Wörter/Sekunde)
Nutzer nimmt auf oder verwendet ElevenLabs
Mit Music Ducking integrieren (Musik fällt während der Erzählung auf 0,10–0,12)

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

Schritt 12 – Rendern und Vorschau

KRITISCH: Immer die Einstiegsdatei übergeben, um interaktive Eingabeaufforderungen zu vermeiden. Führe niemals npx remotion render ohne Argumente aus – es könnte einen interaktiven Kompositionswä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

Das Video zur Überprüfung durch den Nutzer öffnen.

Phase 4: Review

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

Schritt 13 – Multi-Experten-Review

Nachdem der Nutzer das Video gesehen hat, das Review-Protokoll aus references/expert-definitions.md ausführen.

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

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

2-3 typspezifische Dimensionen hinzufügen (z.B. „Visuelles Premium-Gefühl“ für Minimal/Jobs, „Audio-visuelle Harmonie“ wenn Musik hinzugefügt wurde, „Konfigurations-Wiederverwendbarkeit“ für Datenberichte).

Jeder Experte bewertet aus seinem Blickwinkel, einschließlich des Kameramanns für die visuelle Komposition und des Musikdirektors für Audio (falls Musik hinzugefügt wurde). Zusammenfassen in:

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

Den Nutzer fragen, welche Verbesserungen angewendet werden sollen.

Schritt 14 – Nutzer-Review & Iteration

Das Experten-Review erfasst technische Probleme, aber nur der Nutzer weiß, ob sich das Video richtig anfühlt.

„Nachdem du das Video und das Experten-Review gesehen hast – was ist deine Meinung?

Welche Szenen funktionieren gut?

Welche Szenen benötigen Änderungen? (Screenshots von bestimmten Frames, wenn möglich)

Gibt es Probleme mit Text, Timing oder visuellen Elementen?

Fehlt etwas oder sollte etwas gestrichen werden?“

WARTE auf das Feedback des Nutzers.

Wenn der Nutzer Feedback gibt:

Bestätigen, was ihm gefallen hat (stärkt die Richtung)
Auflisten, welche spezifischen Änderungen basierend auf seinen Notizen vorgenommen werden
Änderungen vornehmen – Szenenkomponenten bearbeiten, Timing anpassen, Text korrigieren
Neu rendern und das aktualisierte Video präsentieren
Erneut fragen: „Besser? Noch etwas anzupassen?“

Diese Schleife wiederholen, bis der Nutzer zufrieden ist. Typische Videos benötigen 1-3 Verfeinerungsrunden.

Häufige Feedback-Muster und deren Handhabung:

„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 hochwertig an“ → Zur Minimal/Jobs-Richtung wechseln, negativen Raum hinzufügen
„Musik passt nicht“ → Einen anderen Pixabay-Track ausprobieren, Lautstärkekurve anpassen
„Falscher Ton“ → Kreative Richtung überarbeiten, 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

Phase 1-2 Gerüst überspringen. Fokus auf Review des vorhandenen Codes, Verbesserungsvorschläge oder Hinzufügen neuer Szenen/Kompositionen.

Wenn der Nutzer ein schnelles Video wünscht (keine Beratung)

Phase 1 komprimieren auf: nach Videotyp + kreativer Richtung in einer Frage fragen. Die Top 2 Experten auswählen, ein kurzes Szenario generieren. Schnell zum Bau übergehen. Trotzdem nach Musik fragen.

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

Phase 1-2 vollständig ausführen. Das kreative Briefing und Szenario als Dokument ausgeben. Phase 3 überspringen.

Wenn der Nutzer mehrere Varianten wünscht

Den Wachstumsmarketing-Archetyp verwenden. Die Variantenmatrix entwerfen (was ändert sich pro Variante?). Ein Basisvideo bauen, dann zeigen, wie parametrisiert wird.

Referenzen

Dieser Skill enthält die folgenden Referenzdateien:

references/video-archetypes.md – Vollständige Spezifikation der kreativen Richtungen
references/expert-definitions.md – Expertenteam-Rollen und Bewertungsvorlage
references/component-library.md – Wiederverwendbare Remotion-Komponenten
references/remotion-patterns.md – Kritische Remotion-Muster und Premium-Styling
references/music-and-audio.md – Anleitung zur Audio-Integration

Wichtig: Aktualisiere immer den quellengesteuerten Projektordner, wenn während der Sitzung Änderungen vorgenommen werden. Stelle beim Beenden der Sitzung sicher, dass der Code im Repository des Nutzers gespeichert ist, damit er später mit der Arbeit fortfahren kann.

In Ihrer bevorzugten KI fragen

Dokumentation