FireAmun/remotion-dev-video-kit

Tägliches Video: Idee → Recherche → Genehmigung → Bauen → Vorschau → Rendern → Buffer

Lies zuerst .claude/CLAUDE.md; es ist die Quelle der Wahrheit (Marke, Videoregeln, Stimme, sichere Bereiche). Dieser Skill ist der schrittweise Ablauf. Es gibt zwei harte Stopps für die Genehmigung des Erstellers: den Vorschlag (Schritt 2) und die Vorschau (Schritt 5). Überspringe sie nie.

Die Pfade unten verwenden <date> = heute, YYYY-MM-DD (Asia/Riyadh). Folgenordner: public/episodes/<date>/.

Aussehen und Stil: identisch in jeder Folge

Jede Folge muss wie deine erste Folge aussehen – die Serie wird an ihrem Aussehen erkannt. Daher:

• Nur dieselben Bausteine. Verwende die vorhandenen Sets, die rigged Figur, Posen, Bewegungen, Requisiten und Gegenstände. Ändere nicht src/theme.ts, Schriftarten, Farben, die Figurengrafik, die Kapitelleiste, den Untertitelstil oder die Soundeffekte in einem täglichen Durchlauf. Neue visuelle Elemente (ein neues Set, eine Pose, Requisite oder ein Gegenstand) sind eine separate Aufgabe, die der Ersteller anfordert; wenn er das tut, baue es im gleichen Schwarz-Gold-Stil und füge es zu den Listen dieses Skills hinzu.
• Gleiche Struktur. 1080×1920, 30 fps, ≤ 60 s. „EP NN“-Label + die 7-Kapitelleiste oben, Wort-für-Wort-Untertitel unten (hell gesprochenes Wort, gedimmt zukünftiges, ein goldenes Schlüsselwort pro Zeile). Ein Satz = eine Szene; die Figur spielt jeden Satz nach; Requisiten/Gegenstände landen auf dem gesprochenen Wort; ein visueller Wechsel alle 1,5-3 s; „Whoosh“ bei jedem Szenenwechsel.
• Gleiche Schläge. Hook in den ersten 2 s → früher „Folgen“-Aufruf (Folgen-Button-Szene) → Inhaltskapitel → die Endkarte mit deinwebsite.com und dem exakten Schlusssatz → „Morgen: <nächstes Thema>“-Teaser.
• Gleiche Stimme. Qwen3-TTS mit assets/voice/reference_energy.wav, gleichem Seed, energiereicher Zeichensetzung.
• Gleiche Veröffentlichung. 19:00 Uhr Riad, Instagram Reel (mit Feed teilen) + TikTok + LinkedIn, KI-generiert-Label AN für Instagram und TikTok (die Stimme ist ein KI-Klon; die Kennzeichnung ist ehrlich und schützt das Konto).
• Die Folgennummern zählen von topics-log.json hoch (nächste = letzte + 1).

1. Recherche

1. Lese topics-log.json: wiederhole kein Thema; wenn die letzte Folge ein „nächstes“ Thema versprochen hat, bevorzuge es.
2. Websuche: 2 bis 4 zuverlässige Quellen (offizielle Docs, GitHub-READMEs, Paper, die eigene Seite des Anbieters). Überprüfe jede Zahl, jeden Preis, jede Version oder Behauptung. Dinge, die sich schnell ändern, erhalten ein „Stand “. Erfinde niemals Fakten, Benchmarks oder Code.
3. Positionierung: ein echter Entwickler, der einen nützlichen Tipp gibt, kein Hype und kein „schau, was KI gemacht hat“. Rahmen Tooling-Themen als Entwicklertipp ein.

2. Vorschlag – STOP für Genehmigung

Zeige dem Ersteller im Chat kurz:

• Hook (erste 2 s): ein konkreter Einsatz, eine Zahl oder Behauptung. Keine Begrüßungen.
• Szenentabelle, eine Zeile pro Satz (5-8 Kapitel, ~12-16 Szenen, 30-60 s insgesamt, ~2,5-3,5 gesprochene Wörter/s): # | Kapitel | Satz | Set | was die Figur tut | Gegenstände, die auf welchem Wort landen Kapitel: HOOK, WAS, WARUM ES WICHTIG IST, WIE, HAKEN, AUSPROBIEREN, NÄCHSTES. Früher Folgen-Aufruf direkt nach dem Hook. Der letzte Satz ist immer genau: „Besuche meine Website deinwebsite.com und klicke auf den Folgen-Button für mehr.“
• Fakten + Quellen (URLs) und alles, was der Ersteller bestätigen muss (Meinungen, die in seiner Stimme geäußert werden, Namen von Tools).
• Captions für Instagram/TikTok (Hook-Zeile, Einsatz-Zeile, CTA, Hashtags) und eine separate, professionellere LinkedIn-Caption (3 Hashtags).

Warte auf „los“/Genehmigung oder Änderungen. Wende Änderungen an und zeige sie erneut, wenn sie wesentlich sind.

3. Stimme (GPU-Job; nichts anderes auf der GPU währenddessen)

Schreibe public/episodes/<date>/narration.txt: ein Absatz pro TTS-Segment (Leerzeile dazwischen), normalerweise 1-3 Sätze pro Absatz. Schreibe es so, wie es gesprochen wird: deine Seite buchstabiert wie gesprochen (z.B. „meine Seite punkt com“), N P X create video, Qwen drei T-T-S, pip install Qwen T-T-S, Zahlen als Wörter, wenn mehrdeutig. Verwende ! bei Hook-Zeilen (das Modell liest Zeichensetzung als Energie).

.venv-qwen\Scripts\python scripts\tts_qwen.py public\episodes\<date>\narration.txt
.venv-qwen\Scripts\python scripts\timestamps.py public\episodes\<date>\narration.wav --hint "<5-10 Tech-Begriffe>"

• Stimme = Qwen3-TTS 1.7B Zero-Shot, Referenz assets/voice/reference_energy.wav (+ .txt-Transkript). Verwende niemals einen kostenpflichtigen Sprachdienst.
• Übergib niemals das gesamte Skript als Prompt an Whisper (es loopt); --hint nur mit wenigen Begriffen.
• Überprüfe die Erzähllänge (muss ≤ 60 s mit dem 1,5 s Tail sein) und überfliege narration.json auf Fehlhörungen.
• tts_qwen.py pegelt die Stimme automatisch (scripts/audio_level.py: Kompressor → -16 LUFS → -1 dBFS Peak). Soundeffekte in src/components/Sfx.tsx sind auf diesen Pegel abgestimmt (~12 dB unter der Stimme); erhöhe sie nicht. Wenn eine Erzählung auf andere Weise erstellt wurde, führe zuerst scripts/audio_level.py darauf aus.

4. Baue die Episode (nur Daten – kein neuer Komponentencode in einem täglichen Durchlauf)

Schreibe public/episodes/<date>/plan.json, dann:

.venv-qwen\Scripts\python scripts\build_episode.py public\episodes\<date>
npm run lint

plan.json-Form (siehe public/episodes/example/plan.json für ein vollständiges Beispiel):

{
  "episode": 2, "date": "<date>", "title": "...", "keywords": ["Wort,", "..."], "tailMs": 1500,
  "sources": [{ "title": "...", "url": "https://..." }],
  "scenes": [{
    "chapter": "HOOK",
    "display": "Satz genau wie die Untertitel ihn zeigen sollen (geschriebene Formen: deinwebsite.com, npx create-video).",
    "set": "stage", "setVariant": "", "zoom": 1.05,
    "actor": { "x": 540, "scale": 0.9, "facing": "right", "enterFrom": "right",
               "beats": [{ "atMs": 0, "pose": "talk" }, { "atWord": "bauen", "pose": "pointUp", "motion": "talk" }] },
    "items": [{ "kind": "label", "text": "...", "atWord": "Kamera!", "untilWord": "...", "x": 540, "y": 420 }]
  }]
}

• display aller Szenen aneinandergereiht muss wörtlich der gesprochenen Erzählung entsprechen (geschriebene Formen können abweichen, z.B. „Qwen3-TTS“ für „Qwen drei T-T-S“). Eine Szene, die einen Erzählabsatz beginnt, wird exakt vom TTS getaktet; andere beginnen mit ihrem ersten gesprochenen Wort.
• Timing-Schlüssel: atWord / crossAtWord / untilWord (Abgleich ohne Berücksichtigung von Groß-/Kleinschreibung und Zeichensetzung), occurrence für wiederholte Wörter, offsetMs zum Justieren oder einfaches atMs.
• Posen (src/rig/poses.ts): idle, talk, explain, shrug, wave, point, pointUp, pointViewer, celebrate, think, search, laptop, holdUp, thumbsUp, headScratch. Bewegungen: talk (Gesten folgen der Stimme), wave, shake, celebrate, search, type, still. Handrequisiten: magnifier, phone, trophy; "laptop": true für den gehaltenen Laptop. facing: "left" spiegelt ihn (zeigt nach links auf Dinge).
• Sets (src/sets/Sets.tsx): stage, coderoom, desk (desk versteckt Beine; Monitor rechts), sky (setVariant „sunrise“ oder „timelapse“), chalkboard (Tafel links), library, blueprint (goldene technische Zeichnung auf marineblau – verwende es für WIE / „wie es funktioniert“-Szenen), plain. Jede Szene hat treibenden goldenen Staub ("particles": false schaltet ihn aus).
• Items (src/scene/Items.tsx): icon (Kamera/Zeitleiste, crossAtWord), label (gold/hell), code (fliegender Chip, fromX/fromY), window (Terminal oder "style": "chalk", Zeilen mit Art command/code/output), counter, stamp, steps, waveform, calendar (von→bis), banner, confetti, book, follow, end (URL + CTA, Art-déco-Rahmen), kinetic (große Wörter knallen einzeln rein; highlight-Wörter gold; size, stagger-Frames – am besten für die Hook-Zeile), splitflap (Flughafenanzeige-Statistik, max. 10 Zeichen, optionales label – am besten für Hook-Zahlen).
• Karten sind automatisch aus Milchglas (Glasmorphismus). Stilkit-Vorschau: die StyleTest-Komposition.
• Fülle Items mit echtem Inhalt (tatsächlicher Code, echte Terminalausgabe, echte Zahlen), niemals mit Füllmaterial.

Layout-Regeln, die auf die harte Tour gelernt wurden (1080×1920):

• Die obere Leiste (EP-Label + Kapitel) endet bei ~y 215: die Oberseiten von Items müssen unter ~230 bleiben (denke daran, der Szenen-Zoom drückt Items nach oben).
• Boden y 1440; Untertitel bei y 1490; halte 60 px Seitenabstand.
• Akteur-Skalierung 0,9 → Kopf oben ≈ y 570; 0,8 → ≈ 670; 0,7 → ≈ 760. Große Items (window, waveform, end card) benötigen Akteur 0,58-0,8 oder den Akteur an der Seite (x≈790, Blickrichtung links).
• Labels sind bei Standardgröße ~38 px pro Zeichen: halte sie kurz, sonst laufen sie aus dem Bild.
• Bedecke niemals sein Gesicht mit einem Item; platziere Labels neben oder unter Fenstern.

5. Vorschau – STOP für Genehmigung

1. Studio: npx remotion studio → http://localhost:3000/Episode (es läuft möglicherweise bereits).
2. Rendere ein Standbild pro Szene (Skalierung 0,4) und überprüfe sie zuerst selbst: Überlappungen, Text außerhalb des Bildschirms, bedecktes Gesicht, Item-Timing. Korrigiere, baue neu, überprüfe erneut.
3. Zeige dem Ersteller den Studio-Link (und erwähne alles, was du nicht überprüfen konntest, z.B. Aussprache). Warte auf Genehmigung oder Screenshot-Feedback – korrigiere genau das, was er anmerkt.

6. Rendern

npx remotion render Episode out/<date>/video.mp4 --codec=h264 --crf=18

(Setze die Standard-Eigenschaft episodeFile der Episode-Komposition in src/Root.tsx auf den neuen Ordner oder übergib --props='{"episodeFile":"episode/<date>/episode.json","episode":null}'.) Überprüfe: ≤ 60 s, 1080×1920, 30 fps, hat Audio, und die Stimme ist deutlich lauter als jeder Soundeffekt (Stimme ≈ -16 LUFS). Schreibe out/<date>/caption.txt (IG/TikTok) und out/<date>/caption-linkedin.txt.

7. Buffer-Entwürfe (der Ersteller hängt das Video an)

Die Buffer-API akzeptiert nur Videos von einer öffentlichen URL, also erstelle Entwürfe, die bereits auf 19:00 Asia/Riyadh getaktet sind; der Ersteller öffnet jeden Entwurf in Buffer, hängt out/<date>/video.mp4 an und drückt auf Planen.

• Organisation <deine Buffer-Organisations-ID> (hole sie mit dem Buffer MCP get_account; der kostenlose Plan erlaubt 10 geplante Beiträge).
• Kanäle: Instagram <id>, TikTok <id>, LinkedIn <id> (hole sie mit list_channels).
• create_post mit mode: "customScheduled", dueAt: "<date>T19:00:00+03:00", saveToDraft: true, schedulingType: "automatic".
  • Instagram: metadata.instagram = { type: "reel", shouldShareToFeed: true, isAiGenerated: true }.
  • TikTok: metadata.tiktok = { title: "<kurzer Hook>", isAiGenerated: true } (die Stimme ist ein KI-Klon – immer offenlegen).
  • LinkedIn: professionelle Caption, keine Metadaten erforderlich.
• Wenn 19:00 bereits vorbei ist, frage den Ersteller nach der Uhrzeit, anstatt zu raten. Poste oder plane niemals etwas ohne sein Go.

8. Abschluss

• Hänge die Episode an topics-log.json an (Datum, Episode, Titel, Themen, das „nächste“ Versprechen, Quellen).
• Sage dem Ersteller: Videopfad, die drei Buffer-Entwürfe und dass er das Video anhängen muss, und das versprochene Thema der nächsten Folge.