realjaymes/marketingagentskills

Verwendungshinweise

Verwende diese Fähigkeit, wenn:

• Ein neues Remotion-Video von Grund auf erstellt werden soll
• Videobrief-Varianten für einen Inhalt generiert werden sollen
• Eine bestehende Remotion-Komposition geändert werden soll
• Remotion-Animationen oder Rendering-Probleme behoben werden sollen
• Mit Remotion-spezifischen APIs oder Komponenten gearbeitet wird

Videoprozess

Wenn du ein neues Remotion-Video erstellst, folge diesem 8-Schritte-Prozess. Schritt 2 wählt 3–5 Konzepte aus dem Katalog basierend auf dem Briefing und der Kaltakquise-Optimierung aus. Die Schritte 4 und 5 sind Freigabetore. Schreibe erst Code, wenn beide freigegeben wurden.

Das vollständige Prozessdokument mit Vorlagen und Entscheidungsmatrizen findest du in references/video-creation-process.md.

Schritt 0: Markenidentifikation

Bevor kreative Arbeit beginnt, identifiziere die Marke. Frage den Benutzer: "Für welche Marke ist dieses Video?"

Wenn die Marke unten eine Voreinstellung hat, verwende sie direkt. Keine weiteren Markenfragen nötig.

Wenn die Marke nicht aufgeführt ist, bitte den Benutzer um eine Marken-Website-URL oder Markenrichtlinien. Extrahiere: Hintergrundfarbe, primäre Akzentfarbe, sekundäre Akzentfarbe, Textfarben, Schriftfamilie und Thema (hell/dunkel). Falls keine Richtlinien existieren, frage mindestens nach: Primärfarbe, Hintergrundfarbe und Schriftpräferenz.

Schritt 1: Kreatives Briefing

Sammle und fixiere vor jeder kreativen Arbeit:

Zweck: [Warum dieses Video existiert]
Zielgruppe: [Wer zuschaut]
Kernbotschaft: [Ein Satz]
Inhaltstyp: [blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
Kanäle: [Wo es verbreitet wird]
CTA: [Was der Zuschauer als Nächstes tun soll]
Quellmaterial: [Dateien, Komponenten oder URLs als Referenz]
Ton: [Beschreibende Wörter für die Stimmung]
Marke: [Markenname aus Schritt 0]

Schritt 2: Konzeptauswahl (3–5 empfohlene Konzepte)

Analysiere nach dem Fixieren des kreativen Briefings dieses, um die besten Videokonzepte für diesen spezifischen Anwendungsfall auszuwählen. Präsentiere keinen festen Satz von Varianten. Greife auf den Konzeptkatalog in references/concept-catalog.md zurück.

Der Katalog enthält 18 primäre Konzepte, 8 visuelle Stilmodifikatoren und 5 Kaltakquise-Einstiegsmuster. Lese ihn, bevor du Empfehlungen erstellst.

Auswahlprozess

1. Bewerte Konzepte anhand des Briefings. Für jedes Konzept im Katalog bewerte:

   • Passt das „Am besten geeignet für“ des Konzepts zum Inhaltstyp?
   • Kann die Kernbotschaft in 15–30 Sekunden mit dieser Struktur vermittelt werden?
   • Funktioniert das Konzept mit der angestrebten Dauer und den Abmessungen?
   • Liefert das Briefing die Daten/Visualisierungen, die dieses Konzept benötigt?

2. Wende den Kaltakquise-Filter an. Für jedes bewertete Konzept bewerte:

   • Kann ein Zuschauer OHNE Vorkenntnisse den Wert in den ersten 3 Sekunden verstehen?
   • Erzeugt das Konzept in der Eröffnungsphase eine scroll-stoppende visuelle Bewegung?
   • Vermeidet das Konzept Vorkenntnisse über die Marke, das Produkt oder das Problemfeld?
   • Wenn das Konzept natürlich ein Ergebnis oder einen Datenpunkt voranstellt (metrik-counter, animated-infographic, before-after), ist es für Kaltakquise von Natur aus stärker als narrative Konzepte, die Aufbauzeit benötigen.

3. Wähle ein Einstiegsmuster. Für jedes empfohlene Konzept kombiniere es mit einem Einstiegsmuster aus dem Katalog:

   • Inhalt mit Daten → ergebnis-zuerst
   • Produkteinführungen und Tools → muster-unterbrechung
   • Thought Leadership und Bildung → neugier-lücke
   • Vertrauensbildende Inhalte → sozialer-beweis-haken
   • Wettbewerbs- und Preisinhalt → verlustaversion

4. Präsentiere 3–5 empfohlene Konzepte als einseitige Zusammenfassungen. Für jedes:

   • Konzeptname (aus dem Katalog) und ein Satz Beschreibung
   • Warum es zu diesem Briefing passt (1–2 Sätze, die auf den spezifischen Inhalt und die Zielgruppe verweisen)
   • Empfohlenes Einstiegsmuster und Beschreibung des Eröffnungsbeats
   • Szene-für-Szene-Tabelle (aus der Katalogvorlage, für diesen Inhalt angepasst)
   • Optionaler visueller Stilmodifikator, wenn er das Konzept verbessert

5. Bewerte die Empfehlungen. Markiere die beste Empfehlung und erkläre warum.

6. Benutzer wählt eines aus (oder eine Mischung aus zwei). Fixiere das ausgewählte Konzept, bevor du zu Schritt 3 übergehst.

Kaltakquise-Optimierungsregeln

Diese Regeln gelten für alle Konzeptempfehlungen und überschreiben Inhaltstyp-Standards, wenn sie in Konflikt geraten:

• Standardannahme: Kaltakquise. Sofern das Briefing nicht ausdrücklich angibt, dass die Zielgruppe warm ist (Retargeting, bestehende Nutzer, Newsletter-Abonnenten), gehe von null Markenbekanntheit aus.
• Erste Szene für Kaltakquise:
  1. Eine visuelle Musterunterbrechung (Bewegung, Farbkontrast oder Skalenänderung)
  2. Text, der ein Problem oder Ergebnis nennt, das der Zuschauer erkennt, OHNE die Marke zu kennen
  3. Keine Markenidentifikation in Szene 1 (Markenkarte für Szene 2 oder später aufheben)
• Einschränkungen der Einstiegsmuster für Kaltakquise: Verwende muster-unterbrechung, ergebnis-zuerst oder verlustaversion. Vermeide neugier-lücke, es sei denn, die Aussage/Zahl ist ohne Markenkontext universell nachvollziehbar.
• Konzeptflexibilität: Wenn kein Konzept im Katalog für eine Kaltakquise gut zum Briefing passt, erstelle eine Mischung oder passe ein bestehendes Konzept an. Der Katalog ist eine Ausgangsbibliothek, keine Einschränkung.

Schritt 3: Format und Spezifikationen

Ermittle aus dem Briefing und der ausgewählten Variante mithilfe der Format-Entscheidungsmatrix:

Kanal	Abmessungen	Dauer
LinkedIn/Instagram Feed	1080x1080	15–30s
Website/Präsentation	1920x1080	15–60s
Reels/TikTok/Stories	1080x1920	15–60s
E-Mail (GIF)	600x600 oder 800x450	5–10s

Standard-FPS: 30. Verwende 60 nur, wenn flüssige Bewegung entscheidend ist.

Abmessungen: [Breite]x[Höhe]
Dauer: [X] Sekunden ([X * fps] Frames)
FPS: 30
Kompositions-ID: [PascalCase]
Schleife: [ja/nein]
Ausgabeformate: [mp4, gif, webm]
Ausgewähltes Konzept: [Konzept-ID aus Katalog oder Hybrid]

Schritt 4: Szenenaufteilung (FREIGABETOR)

Definiere jede Szene, bevor Code geschrieben wird. Verwende die Szenenvorlage der ausgewählten Variante als Ausgangsstruktur und passe sie dann für den spezifischen Inhalt an.

Präsentiere die Szenentabelle zur Freigabe.

Szenentabellenformat:

#	Name	Zeit	Text	Animation	Zweck
1	Einstieg	0–3s	Genauer Text	Bewegungsbeschreibung	Warum es existiert

Timing-Richtlinien:

Dauer	Szenenanzahl	Durchschnitt pro Szene
10s	3–4	2,5–3,3s
15s	4–6	2,5–3,75s
30s	8–12	2,5–3,75s
60s	12–20	3–5s

Fixiere Text, Timing und Erzählstruktur, bevor du fortfährst.

Schritt 5: Visuelles Design (FREIGABETOR)

Fixiere vor der Implementierung:

Farbpalette (mindestens erforderliche Rollen):

• Hintergrund, primäre Akzentfarbe, sekundäre Akzentfarbe
• Text primär, Text sekundär, Text tertiär
• Rand/Trennlinie

Marken-Design-Voreinstellungen (für bekannte Marken verwenden, Farbfragen überspringen):

Marke	Hintergrund	Primäre Akzentfarbe	Sekundäre Akzentfarbe	Text primär	Text dezent	Schrift	Thema
FunnelEnvy	#FFFFFF / #1a1a2e (terminal)	#3B82F6 (Blau)	#8B5CF6 (Lila)	#000000	#6B7280	Inter, system	Hell
Reform	#FFFFFF / #1a1a2e (terminal)	#48EC80 (Grün)	#EDE630 (Gelb)	#000000	#6B7280	Inter, system	Hell
GrowthNode	#0f0a1a (alle Szenen)	#8B5CF6 (Lila)	#3B82F6 (Blau)	#FFFFFF	#a1a1aa	Inter, system	Dunkel
MIA	#F7F4FA / #1c1422 (dunkel)	#F1DE71 (Gelb)	#7184F1 (Lila)	#1c1422 / #f7f4fa (dunkel)	rgba(28,20,34,0.62)	system-ui, -apple-system, Segoe UI	Hell

MIA-Akzentpalette: Blau #71C4F1, Lila #7184F1, Pink #F171C4, Grün #71F19E

Eigene Marken: Wenn die Marke oben nicht aufgeführt ist, definiere Farben von der Marken-Website oder den Richtlinien aus Schritt 0. Fülle die gleichen Rollen: Hintergrund, primäre Akzentfarbe, sekundäre Akzentfarbe, Text primär, Text dezent, Schrift, Thema.

Typografie: Schriftfamilie, Gewichtungshierarchie, Größen bei Zielauflösung.

Animationsstil: Spring (federnd/glatt/schnell), linear oder ease-basiert. Wähle einen dominierenden Stil.

Wahrheitsquelle: Wenn ein vorhandenes Design getroffen werden soll, referenziere die Quelldatei.

Schritt 6: Architekturentscheidung

Der Agent entscheidet basierend auf der Szenenkomplexität:

Bedingung	Ansatz
Weniger als 15 Szenen	Einzeldatei
15+ Szenen oder wiederverwendbare Teile	Mehrere Dateien mit scenes/-Verzeichnis
Gemeinsame Elemente über Szenen hinweg	Persistente Ebene mit Deckkraft-Hüllkurve

Verwende immer einen zentralisierten Zeitkonstanten (const T = { ... }).

Schritt 7: Implementierung

Schreibe Code basierend auf den fixierten Entscheidungen. Alle Animationen müssen den Remotion-Regeln folgen (siehe Technische Referenz unten).

Schritt 8: Ausgabedokumentation

Erstelle ein Referenzdokument mit: Spezifikationen, ausgewählter Variante, Vorschau-/Renderbefehlen, Szenenaufteilung, Farbpalette, Timing-Konfiguration, Architekturnotizen, Iterationsanleitung.

---

Technische Referenz

Lies die einzelnen Regeldateien für API-Details und Codebeispiele.

Kernanimation und Timing

• rules/animations.md – Animationsgrundlagen. Alle Bewegungen über useCurrentFrame(). Keine CSS-Übergänge
• rules/timing.md – interpolate(), spring(), Easing-Funktionen, Spring-Konfigurationen
• rules/sequencing.md – <Sequence> und <Series> für Timing, Verzögerung und Dauersteuerung
• rules/trimming.md – Anfänge trimmen (negativ from) und Enden (durationInFrames)
• rules/transitions.md – <TransitionSeries> mit Einblenden, Schieben, Wischen, Drehen, Uhr-Wischen

Medien

• rules/assets.md – staticFile() für Assets im öffentlichen Ordner
• rules/videos.md – <Video> mit Trimmen, Lautstärke, Geschwindigkeit, Schleifen, Tonhöhe
• rules/audio.md – <Audio> mit Trimmen, Lautstärke, Geschwindigkeit, Tonhöhe
• rules/images.md – <Img>-Komponente (stellt Laden vor dem Rendern sicher)
• rules/gifs.md – <AnimatedImage> für GIF/APNG/AVIF/WebP
• rules/fonts.md – Google Fonts über @remotion/google-fonts, lokale Schriftarten über @remotion/fonts

Text und Untertitel

• rules/text-animations.md – Schreibmaschine, Wort-Hervorhebungsmuster
• rules/measuring-text.md – measureText(), fitText(), fillTextBox()
• rules/display-captions.md – TikTok-artige Untertitel, Wort-für-Wort-Hervorhebung
• rules/import-srt-captions.md – .srt-Dateien mit parseSrt() parsen
• rules/transcribe-captions.md – Whisper.cpp, Whisper Web, OpenAI-API

Komposition und Metadaten

• rules/compositions.md – <Composition>, <Still>, <Folder>, defaultProps
• rules/calculate-metadata.md – Dynamische Dauer, Abmessungen und Props

Erweitert

• rules/3d.md – <ThreeCanvas> mit React Three Fiber
• rules/charts.md – SVG/D3.js-Diagramme animiert über useCurrentFrame()
• rules/lottie.md – <Lottie>-Komponente mit @remotion/lottie
• rules/tailwind.md – TailwindCSS (keine transition-*- oder animate-*-Klassen)

Medien-Dienstprogramme (Mediabunny)

• rules/extract-frames.md – Video-Frames zu Zeitstempeln extrahieren
• rules/can-decode.md – Video/Audio-Decodierbarkeit prüfen
• rules/get-video-duration.md – Videodauer in Sekunden
• rules/get-video-dimensions.md – Videobreite und -höhe
• rules/get-audio-duration.md – Audiodauer in Sekunden

Layout

• rules/measuring-dom-nodes.md – useCurrentScale() für genaue Messungen

---

Referenzen

• references/concept-catalog.md – Konzeptkatalog mit 18 primären Konzepten, 8 visuellen Stilmodifikatoren, 5 Kaltakquise-Einstiegsmustern, Auswahlkriterien und Inhaltstyp-Affinitätsmatrix
• references/video-creation-process.md – Vollständiges Prozessdokument mit Vorlagen, Entscheidungsmatrizen und detaillierten Anleitungen

---

Harte Regeln

Diese gelten für allen Remotion-Code. Verstöße führen zu falscher Ausgabe.

1. Alle Animationen werden von useCurrentFrame() gesteuert. Keine CSS-Übergänge, keine Tailwind animate-*- oder transition-*-Klassen, kein React Three Fiber useFrame()
2. Verwende Remotion-Komponenten (<Img>, <Video>, <Audio>) und keine nativen HTML-Elemente
3. Verwende staticFile() für alle Assets im public/-Ordner
4. Zeit in Sekunden: multipliziere mit fps aus useVideoConfig(), um Frames zu erhalten
5. Keine Drittanbieter-Animationsbibliotheken, die Bewegung steuern (deaktiviere deren Animationen, verwende stattdessen useCurrentFrame())
6. Jedes Konzept muss selbsterklärend sein. Ein Zuschauer, der ohne Kontext scrollt, sollte den Wert allein aus dem Video verstehen. Keine Szene sollte auf externes Wissen angewiesen sein. Der Text muss die vollständige Botschaft unabhängig vermitteln. Nimm immer eine Kaltakquise an, sofern das Briefing nichts anderes sagt.