repo-cinema

repo-cinema Director Skill

Erstelle 60fps-Produktdemo-Videos in Screen-Studio-Qualität direkt aus einem Codebestand. Statt Ad-hoc-Bildschirmaufnahmen oder ziellosem Cursor-Gehen führt repo-cinema eine deterministische 5-Stufen-Pipeline aus: analyze -> plan -> stage -> render -> verify.

Grundlegende Architekturprinzipien

1. Persona-zentrierte Anwendungsfälle (analyze): Zeige niemals interne Debug-Statistiken oder rohe Konfigurationsbildschirme. Lies Einstiegspunkte, CLI-Befehle, Routen, Komponenten und Tests, um konkrete Persona -> Pain Point -> User Action -> Dauerhaftes Ergebnis-Szenen zu synthetisieren.
2. Kausale Co-Framing (plan): Rahmen die Vereinigungs-Boundingbox bbox(trigger ∪ outcome) anstatt dem Mauszeiger zu folgen. Fixiere den horizontalen Fokus fx = viewport.width / 2, sobald die Inhaltsbreite >= 70% der Bühne beträgt, damit Achsen, Kopfzeilen und rechte Spalten nie abgeschnitten werden.
3. Stationäre Lesehalten: Zoom vor einer Aktion langsam ein, dann halte (zoom, fx, fy) 100% eingefroren während Interaktion + Verständnis, damit Zuschauer Diagramme und Toast-Updates tatsächlich lesen können.
4. Deterministische virtuelle Uhr 60fps (render): Injiziere den Virtual Clock Shim (Date, performance.now, requestAnimationFrame) vor dem Laden der Seite, damit CSS-Übergänge, ECharts-Animationen, C2 Minimum-Jerk-Cursor-Bahnen (sin^3(pi * u)-Bögen, <=12% Geschwindigkeitsschwellung, +/-6 Grad Neigung, Pfeil <-> Zeigefinger-Morph) und duale Klickripple deterministisch Einzelbild-für-Einzelbild in FFmpeg übergehen.
5. Kontaktabzug-Selbstprüfung (verify): Erstelle ein 3x3 contact-sheet.png + verify-report.json (ffprobe-Streamvalidierung + null Offscreen-Klicks) und visuell jedes Panel prüfen, bevor es ausgeliefert wird.

Utility-CLI-Befehle (repo-cinema)

Wenn global installiert oder aus dem Repository ausgeführt (npx repo-cinema ... oder node dist/cli.js ...), gibt jede Stufe strukturierte Dateien aus:

# 1. Lies ein beliebiges Repository und extrahiere Use-Case-Szenarien (optional zuerst repomix ausführen)
repo-cinema analyze --repo ./my-project --output ./out/dossier.json [--repomix]

# 2. Erstelle kausales Kamera-/Cursor-Storyboard-JSON + visuelle HTML-Vorschau
repo-cinema plan --dossier ./out/dossier.json --output ./out/storyboard.json --html ./out/storyboard.html --theme aurora-indigo

# 3. Erstelle 4-in-1-Bühne (web-url | plugin-or-component | cli-terminal | hybrid)
repo-cinema stage --dossier ./out/dossier.json --plan ./out/storyboard.json --output ./out/stage.html [--url http://localhost:3000]

# 4. Deterministische 60fps-CDP-Aufnahme + 48kHz-Stereo-SFX (oder optionales TTS)
repo-cinema render --plan ./out/storyboard.json --stage ./out/stage.html --output ./out/demo.mp4 --gif ./out/demo.gif --audio sfx

# 5. Validiere Streams, Telemetriegrenzen & erstelle 3x3-visuellen Kontaktabzug
repo-cinema verify --video ./out/demo.mp4 --telemetry ./out/demo.telemetry.json --contact-sheet ./out/contact-sheet.png --output ./out/verify.json

# Oder führe die gesamte 5-Stufen-Pipeline in einem Befehl aus:
repo-cinema run --repo ./my-project --out-dir ./out --theme aurora-indigo

Director-Workflow

Schritt 1: Repository und Zielgruppe analysieren

Führe repo-cinema analyze --repo <pfad> --output <dossier.json> aus. Lies die generierten useCases:

• Überprüfe den erkannten archetype (web-app, desktop-or-ide-plugin, cli-tool, ui-library, hybrid).
• Verfeinere Beschriftungen oder füge domain-authentische Beispiel-Fixtures hinzu, wenn das Repository spezialisierte Workflows hat (Achtung: null persönliche Daten, null entwicklerspezifische Zähler).

Schritt 2: Storyboard planen und Bildausschnitt genehmigen

Führe repo-cinema plan mit --html aus und inspiziere storyboard.html (oder überprüfe beats, captionWarnings und cameraKeyframes):

• Behebe alle Warnungen vom Anti-Slop-Beschriftungs-Linter (kein "beispiellos", "nächste Generation", "nahtlos" oder >96 Zeichen lange Beschriftungen).
• Stelle sicher, dass das Startbild (t=0) und das Endbild (t=durationMs) sauber bei zoom: 1.0 liegen für nahtlose README-GIF-Schleifen.

Schritt 3: Bühnenadapter auswählen

• web-url: Die App läuft bereits lokal (http://localhost:PORT). Der Recorder injiziert Virtual Clock Shim + nicht aufdringliche Cursor-/Kamera-/Beschriftungsüberlagerung direkt auf die Live-Seite.
• plugin-or-component: Desktop-Plugins (Obsidian, VS Code, Raycast) oder UI-Komponentenpakete, gerendert in einem dunklen macOS-Studio-Chrom mit echten Kernmodulen, die über esbuild gebündelt sind.
• cli-terminal: Terminal-Tools präsentiert in einem gläsernen macOS-Terminal mit synchronisierter Befehlsausgabe, KPI-Kacheln und Ergebnis-Impact-Karten.
• hybrid: Multi-Tab-macOS-Studio mit CLI-Ausführung neben visueller Live-Ausgabe und Architekturdiagrammen.

Schritt 4: 60fps-Master + GIF + Audio rendern

Führe repo-cinema render aus:

• Standard --audio sfx synthetisiert null-Abhängigkeits-48kHz-Stereo-Mikro-SFX (stereo-panoramierte Klicks ausgerichtet auf Cursor-x, sanfter Zoom-Luftschwall, Bestätigungs-Toast-Chime) — keine externen API-Schlüssel nötig.
• Optional --audio tts --tts-provider <macos-say|edge-tts|openai|elevenlabs> mischt Sprachausgabe sauber mit Mikro-SFX.

Schritt 5: Verifizieren und visuell prüfen

Führe repo-cinema verify aus und inspiziere contact-sheet.png direkt mit deinem Datei-/Bildbetrachter:

• Bestätige passed: true, offscreenClicks: 0 und lesbaren Text in allen 9 Keyframe-Miniaturansichten.
• Wenn ein Element in der Nähe der Darstellungsbereichskanten abgeschnitten wird, erhöhe marginPx in computeCausalFraming oder reduziere zoom um 0.06 und rendere erneut.

Referenzanleitungen

• Kamera- und Cursor-Physik
• 4-in-1-Bühnenadapter
• Storyboard-Schema
• Open-Source-Architektur und Zuschreibungen

Häufige Fehler vermeiden

• Dem Zeiger Einzelbild-für-Einzelbild während Tippen/Ziehen folgen: Verursacht Reisekrankheit. Sperre die Kameraführung immer pro Beat während Haltephasen.
• Wanduhr-setTimeout / Echtzeit-Bildschirmaufnahme verwenden: Lässt Einzelbilder fallen, sobald die CPU ausgelastet ist, und erzeugt ruckelige 24–40fps-Aufnahmen. Treibe Animationen immer über __rcStep(dtMs) an.
• Zu stark zoomen (> 1.35x) bei breiten Diagrammen oder Tabellen: Schneidet Y-Achsenbeschriftungen oder die rechte Zusammenfassungsspalte ab. Halte wideLockRatio bei 0.70, sodass fx = width / 2.
• Große rohe .mp4-Binärdateien in das GitHub-Repository übertragen: Verfolge leichte, palette-optimierte .gif + contact-sheet.png in docs/assets/ und hänge .mp4 an GitHub-Releases an oder ignoriere *.mp4 lokal.