sanky369/vibe-building-skills

Remotion-Skript-Autor

Verwandle ein Videoziel plus (optional) eine Codebasis in ein Remotion-Skript-JSON – eine szenenweise Spezifikation, die präzise genug ist, dass ein Remotion-Agent sie ohne Rückfragen implementieren kann. Das Leitprinzip: Das Skript ist die alleinige Quelle der Wahrheit für den Render – jede Dauer, jedes Element, jede Animation und jeder Voiceover-Text wird in Zahlen und exakten Zeichenfolgen angegeben, niemals „ungefähr 5 Sekunden“ oder „ein Einleitungstext“. Zwei Agenten mit derselben Eingabe müssen strukturell identische Skripte erzeugen.

Wann verwenden / wann nicht

• Verwenden, wenn die Ausgabe programmatisch mit Remotion gerendert wird: Produktdemos von Web-Apps, Coding-Tutorials mit animiertem Code, Bewegtgrafikstücke, Datenvisualisierungsvideos, kurze Social-Media-Animationen.
• Konzept und Beats sind für ein Produktvideo noch nicht entschieden → zuerst skills/creative/product-video ausführen; dessen Beat-Blatt wird zur Szenenliste dieses Skills.
• Person-vor-der-Kamera-Video → skills/creative/talking-head (Remotion ist nicht das richtige Werkzeug).
• Statische Grafiken → skills/creative/social-graphics.
• Dieses Skill schreibt nur das Skript – das Implementieren der React-Komponenten, das Vorschauen im Remotion Studio und das Rendern werden nachgelagert von den eigenen Agenten-Fähigkeiten von Remotion erledigt.

Regeln – vor dem Schreiben des Skripts lesen

• rules/prompt-structure.md – die Eingabefelder, aus denen das Skript aufgebaut wird (Ziel, Zielgruppe, Code, Videotyp, Dauer, Stil, Animationen, Übergänge). Lesen, wenn die Aufnahme in das Eingabeobjekt normalisiert wird.
• rules/script-generation.md – die maßgebliche JSON-Ausgabestruktur und Generierungsanweisungen. Vor dem Ausgeben des Skripts lesen; das untenstehende Grundgerüst ist eine Zusammenfassung, diese Datei ist der Vertrag.
• rules/animation-patterns.md – das zugelassene Animations-/Übergangsvokabular mit exakten JSON-Formen und Timing-Richtlinien. Vor dem Festlegen eines animation- oder transitionToNextScene-Werts lesen; keine Animationstypen außerhalb davon erfinden.
• rules/scene-templates.md – vorgefertigte Szenen-JSONs für häufige Fälle (Titelkarte, Feature-Showcase, Code-Walkthrough, Datenvisualisierung, Outro/CTA). Lesen, wenn eine Szene einem bekannten Muster entspricht; von der Vorlage ausgehen und bearbeiten.
• examples/product-demo-example.json – ein vollständiges, ausgearbeitetes Skript. Zur Kalibrierung der Granularität lesen.

Aufnahme

In einer einzigen, dichten Abfrage fragen, nur was fehlt (Feldnamen gemäß rules/prompt-structure.md):

1. Ziel und Zielgruppe – was soll das Video erreichen, für wen?
2. Videotyp – product-demo | coding-tutorial | animation | data-visualization | social-media?
3. Dauer (Sekunden) und Zielplattform (entscheidet über Breite/Höhe/Bildrate).
4. Code – Pfad zur Codebasis, Repository-URL oder Snippets, falls das Video eine App oder Code zeigt.
5. Stil – visuelle/Marken-Einschränkungen (Farben, Schriftarten, Logo; ggf. ein Styleguide von skills/creative/creative-strategist).

Statt zu fragen, ableiten: Sprache aus der Codebasis; Abmessungen aus der Plattform (1920×1080 Landschaft Standard, 1080×1920 für vertikale Social-Media, Bildrate 30); Animations-/Übergangspräferenzen aus Stil, falls nicht angegeben. Nicht anhalten: Mit Ziel + Videotyp + Dauer bekannt, Annahmen treffen und fortfahren.

Arbeitsablauf

1. Das Quellmaterial analysieren

Falls Code bereitgestellt wird, es erkunden: die wichtigsten Funktionen, Benutzerabläufe, Datenstrukturen und UI-Oberflächen identifizieren, die es wert sind, gezeigt zu werden. Funktionen nach Relevanz für das Ziel ordnen – das Video zeigt die Top 3–5, nicht alles. Falls kein Code vorhanden, die entsprechende Liste aus der Beschreibung des Benutzers extrahieren.

2. Die Szenen strukturieren

Entscheidungsregeln nach Videotyp:

• Product-Demo → Titelcard → Problem/Kontext → eine Szene pro Funktion (Top 3–5) → Outro/CTA.
• Coding-Tutorial → Titel → Konzeptaufbau → eine Szene pro Codeschritt (Code zeigen, dann erklären) → Zusammenfassung.
• Datenvisualisierung → Titel → Kontext → eine Szene pro Diagramm/Erkenntnis → Fazit.
• Social-Media → Hooks-Szene (≤3s) → 1–2 Auflösungsszenen → CTA; insgesamt ≤60s.
• Animation → Beats aus dem kreativen Konzept ableiten (oder dem Beat-Blatt von skills/creative/product-video).

Zeitberechnung ist obligatorisch: Szenendauern plus Überlappungen der Übergänge müssen exakt der Dauer entsprechen. TransitionSeries-Übergänge überlappen benachbarte Szenen – die Überlappung berücksichtigen, nicht einfach Dauern addieren. Gesamtlänge unter ~5 Minuten halten (Heuristik für Renderleistung).

3. Jede Szene vollständig spezifizieren

Für jede Szene jedes Feld ausfüllen: szenenNummer, titel, dauerInSekunden, visuelles.hintergrund, visuelles.elemente[] (Typ, exakter Inhaltstext, Schriftart, Größe, Farbe, Position, animation aus rules/animation-patterns.md), audio.voiceover (die exakten gesprochenen Sätze – prüfen, dass sie bei ~2,5 Wörtern/Sekunde in die Szenendauer passen) und übergangZurNächstenSzene. Vorlagen aus rules/scene-templates.md verwenden, wo sie passen.

4. Assets und technische Anforderungen zusammenstellen

Jedes Bild, Videoclip, Audiotrack, Schriftart und Logo, auf das in einer Szene verwiesen wird, in erforderlicheAssets auflisten – nichts, auf das verwiesen wird, darf in der Liste fehlen. Asset-Generierung ist nicht im Umfang enthalten: jedes als benutzerbereitgestellt markieren oder präzise beschreiben; Standbilder können über skills/creative/image-generation erzeugt werden (Repo-Pipeline: docs/creative_cli.py, Modell fal-ai/nano-banana-pro). remotionPakete auflisten (z.B. @remotion/transitions wenn Übergänge verwendet werden) und alle Drittanbieter-Bibliotheken.

5. Gegen die Qualitätslatte validieren, dann das JSON ausliefern

Das Skript plus den Übergabehinweis (unten) ausliefern. Der nachgelagerte Remotion-Agent generiert Komponenten, richtet die Komposition ein, zeigt sie im Studio zur Vorschau an und rendert sie.

Erforderliches Ausgabeformat

Ein JSON-Objekt ausgeben, das exakt der Struktur in rules/script-generation.md entspricht:

{
  "videoMetadaten": {
    "titel": "...", "dauerInSekunden": 60,
    "breite": 1920, "hoehe": 1080, "bildRate": 30,
    "videoTyp": "product-demo"
  },
  "szenen": [
    {
      "szenenNummer": 1, "titel": "...", "dauerInSekunden": 5,
      "visuelles": {
        "hintergrund": "#RRGGBB oder Asset-Referenz",
        "elemente": [
          { "typ": "text|image|code|chart", "inhalt": "exakter Inhalt",
            "animation": { "typ": "<aus rules/animation-patterns.md>", "dauerInSekunden": 1 } }
        ]
      },
      "audio": { "voiceover": "Exakte(r) gesprochene(r) Satz/Sätze." },
      "uebergangZurNaechstenSzene": { "typ": "<aus rules/animation-patterns.md>", "dauerInSekunden": 1 }
    }
  ],
  "erforderlicheAssets": { "bilder": [], "videos": [], "audio": [], "schriftarten": [], "logos": [] },
  "technischeAnforderungen": { "remotionPakete": [], "drittanbieterBibliotheken": [] }
}

Dem JSON einen kurzen Markdown-Übergabehinweis folgen lassen: Überprüfung der Gesamtdauer (Szenen-Mathematik gezeigt), die 1–3 getroffenen Annahmen und welche Assets der Benutzer vor dem Rendern bereitstellen muss.

Qualitätslatte (vor der Auslieferung prüfen)

• Szenendauern + Übergangsüberlappungen ergeben exakt videoMetadaten.dauerInSekunden; die Arithmetik im Übergabehinweis zeigen.
• Jeder animation- und Übergangs-typ existiert in rules/animation-patterns.md – keine erfundenen Typen.
• Jeder Voiceover-Text passt in seine Szene bei ~2,5 Wörtern/Sekunde; keine Szene hat Visuals ohne Zweck, der durch den Voiceover oder Titel angegeben ist.
• Jedes in einer Szene referenzierte Asset erscheint in erforderlicheAssets; von Textelementen verwendete Schriftarten sind aufgelistet.
• Korrektheit von Remotion in die Spezifikation eingebaut: bildbasierte Zeitsteuerung via useCurrentFrame(), Federn mit damping: 200 für Einblendungen, Schreibmaschineneffekt via String-Slicing (nicht buchstabenweise Deckkraft), deterministische Zufälligkeit nur (random() von Remotion, niemals Math.random()), premountFor bei schweren Sequenzen, <Sequence>/<Series>/<TransitionSeries> zur Anordnung.
• inhalt-Felder sind endgültige Texte, keine Platzhalter wie „Funktionsbeschreibung hier“.
• Voiceover ist automatisch entworfen – im Übergabehinweis darauf hinweisen, dass der Benutzer ihn verfeinern möchte.

Integration

• skills/creative/product-video → liefert: Konzept + Beat-Blatt + Keyframes für Produktvideos; jeder Beat wird eine Szene.
• skills/creative/creative-strategist → liefert: Styleguide (Farben, Schriftarten, Stimmung), angewendet auf visuelles und stil.
• skills/creative/original-design → liefert: ein Designsprach-Briefing; jedes visuelle Vokabular einer Szene muss aus dieser Welt stammen.
• skills/creative/image-generation → produziert: Stand-Assets, die in erforderlicheAssets.bilder aufgelistet sind.
• skills/creative/social-graphics → verbraucht: gerenderte Standbilder/Thumbnails für Beitrag-Assets.
• Nachgelagert: Remotion-Agenten-Fähigkeiten (außerhalb dieses Repos) verbrauchen das JSON, um Komponenten zu bauen, Vorschau anzuzeigen und zu rendern.