rendydev404/demotion

demotion – Automatische System-Demos aus dem echten App-Quellcode

Endergebnis: Eine .mp4 (1920×1080, 60 fps, 1–2 Minuten), die aussieht wie eine professionelle Bildschirmaufnahme der ECHTEN Anwendung, aber vollständig über Remotion-Code gesteuert wird – dadurch flüssig (ohne die Ruckler einer echten Aufnahme), wiederholbar und einfach zu aktualisieren, wenn sich Funktionen ändern.

Arbeitssprache: Deutsch (Antworten, Zusammenfassung, Videountertitel). Öffne keinen Chrome-Browser und logge dich nicht lokal in die Anwendung ein, um die UI zu „sehen“: Die visuelle Wahrheit liegt im CODE; das Ergebnis wird über Remotion-Stills/-Videos geprüft.

Unverletzliche Prinzipien

1. Echte UI, keine Nachbildung. Kopiere Markup + Tailwind-Klassen + Farb-Token + Schriftarten aus dem Anwendungscode. UI-Texte (Titel, Labels, Hinweise, Meldungen) werden exakt übernommen. Zeichne nichts „ähnlich“ nach.
2. Produktwahrheit aus dem CODE. Jede Behauptung im Untertitel (Preise, Kontingente, Standardwerte, Limits, wer was bezahlt) wird aus dem Code / der Konfiguration gelesen, nicht aus dem Gedächtnis oder geraten. Beispiel: „Nutzt der Bot das Kontingent?“ → Prüfe die API-Route und die Verbrauchsfunktion, bevor du den Untertitel schreibst. Was nicht im Code steht, wird nicht behauptet.
3. Alle Bewegungen werden aus der Videotime berechnet. Keine CSS-Animationen/Transitions, kein setTimeout, kein State/Cache framesübergreifend: Jeder Frame ist eine reine Funktion von t. (Paralleles Rendern verteilt Frames auf viele Tabs.)
4. Demo-Daten fiktiv, konsistent, sicher. Ein fiktives Unternehmen/eine fiktive Person, Platzhalternummern/-emails/-konten, dieselben Zahlen in allen Szenen. Keine echten Kundendaten verwenden. Statistiken „nach einigen Tagen“ erhalten den Hinweis „Beispieldaten“.
5. Dauer 1–2 Minuten, sofern nicht anders gewünscht: Wartezeiten herausschneiden und Tipp-/Ladevorgänge (3–8×) mit dem Badge „4ד beschleunigen; Stellen, die gelesen werden müssen, bleiben bei 1–2×. Untertitel müssen nach der Beschleunigung mindestens 1,2 Sekunden lesbar bleiben.
6. Überprüfung mit den Augen: Rendere Stills zu Schlüsselmomenten und SCHAU SIE DIR AN (lies das Bild), bevor du den finalen Render startest.

Arbeitsablauf

Phase 0 – Erkennung & Zielsetzung

• Suche nach einer vorhandenen Demo: **/src/demo/kit/stage.tsx. Vorhanden → nicht neu aufsetzen; gehe zu „Demo aktualisieren“.
• Nicht vorhanden → ein Videoprojekt wird benötigt. Standardort: <repo>/video/ (separater Ordner; zum exclude des root-tsconfig und den globalIgnores von ESLint hinzufügen, wenn das Repo Next/ESLint verwendet, damit build/CI der Anwendung es nicht prüft).
• Frage EINMAL nur das, was nicht erschließbar ist: Zieldauer, Ton/Sprache oder nicht, welche Teile unbedingt gezeigt werden müssen. Standard: deutsche Untertitel, kein Ton, ≤2 Minuten, Benutzerreise von Null bis zur Hauptfunktion.

Phase 1 – Produkt-Recherche (Code lesen, nicht raten)

Lies für jede Seite/Funktion, die gezeigt wird: Route (app/**/page.tsx), Komponenten, UI-Texte, Pakete/Preise/Kontingente, Standardregeln, Limits, Tour-/Onboarding-Texte (beste Quelle für Produktwissen), Zahlungsablauf, Rollen. Notiere alles in referenzen/storyboard.md im Format: Seite → Was gezeigt wird → Untertitel → verifizierte Behauptung (Datei:Zeile). Teile umfangreiche Codelese ggf. auf Subagent Explore auf; die endgültige Entscheidung liegt bei dir.

Phase 2 – Storyboard

Erstelle 8–14 Szenen entlang der Benutzerreise (Landing → Registrieren → Starten/Onboarding → Kernschnittstelle → „Wow“-Moment → Überwachen → Bezahlen/Abonnieren → Aufruf zum Handeln). Jede Szene: Ziel, Originaldauer, Cursorschritte, Untertitel. Siehe referenzen/storyboard.md (Untertitel-Muster, Tempo, Kapitel-Beschriftung „N · NAME“).

Phase 3 – Grundgerüst erstellen

node "$HOME/.claude/skills/demotion/skript/geruest.mjs" --dest <repo>/video --name "Produkt" --domain produkt.de --akzent "#3ddc97" --install

Kopiert Engine (src/demo/kit/*), Root-Rahmen, Beispiel-Szene, Tailwind-v4-Konfiguration. Dann:

• Kopiere Farb-Token + Komponenten-Klassen des CSS der Anwendung in src/demo/index.css (entferne Animationen/Transitions).
• Ersetze die Schriftart in src/demo/fonts.ts mit der der Anwendung (@fontsource/<name>); lade alle verwendeten Schriftgewichte.
• Fülle BRAND in config.ts (Name, Domain, Akzentfarbe auf dunklem Hintergrund).
• Test: REMOTION_FPS=30 npx remotion still src/demo/index.ts S-beispiel out/uuml.png --frame=270 --config=remotion.demo.config.ts. Lösche scenes/beispiel.tsx, sobald echte Szenen existieren.

Phase 4 – UI portieren & Szene schreiben

• Produktkomponenten → src/demo/pages/*.tsx (kopiere Markup/Klassen; ersetze Daten & Handler durch statische Props). Generische Atome gibt es in kit/atoms.tsx; WhatsApp-Telefon in kit/phone.tsx.
• Eine Szene = eine Datei scenes/<id>.tsx, die DUR (Originalsekunden) und die Komponente exportiert; registriere sie in scenes/index.ts mit erstelle("<id>", Komp, DUR_X). Vollständiges Muster: templat/src/scenes/beispiel.tsx und referenzen/architektur.md (Stage-API: cursor/scroll/camera/spot, data-cur, Zeitereignisse mit T).
• Sidebar/Modal/Tour = fixed-Layer (scrollt nicht mit), Seiteninhalt = children.
• Szene ≥6 und unabhängig → parallelisiere mit Fork (siehe referenzen/brief-fork.md); gemeinsames Gerüst (Daten, von vielen Szenen genutzte Seiten) wird zuerst von DIR geschrieben.

Phase 5 – Schneiden & Beschleunigen

Nachdem alle Szenen bei 1× korrekt sind, fülle scenes/schnitt.ts (Segmente S(a,b,v) pro Szene). Prüfe die Gesamtdauer mit npx remotion compositions src/demo/index.ts --config=remotion.demo.config.ts (Spalte Dauer der Komposition Demo).

Phase 6 – Verifizierung

1. npx tsc --noEmit -p tsconfig.json
2. Günstige Vorschau: REMOTION_FPS=30 npx remotion render src/demo/index.ts Demo out/vorschau.mp4 --config=remotion.demo.config.ts --crf=26 --scale=0.5 --concurrency=10 --gl=angle
3. Kontaktbogen: python "$HOME/.claude/skills/demotion/skript/kontaktbogen.py" out/vorschau.mp4 --alle 5 und dann das Bild lesen.
4. Prüfe: abgeschnittener Text, Untertitel überdecken angeklickte Buttons, Cursor daneben, inkonsistente Zahlen, falsche Behauptungen, Layout-Sprünge, leere / zu lange Momente.

Phase 7 – Finaler Render & Versand

powershell -File "$HOME/.claude/skills/demotion/skript/bereinige-prozesse.ps1"   # PFLICHT wenn alte Render-Prozesse existieren (füge -JanganStudio hinzu, wenn der Benutzer Studio verwendet)

cd <repo>/video && REMOTION_FPS=60 npx remotion render src/demo/index.ts Demo out/demo.mp4 --config=remotion.demo.config.ts --codec=h264 --crf=17 --concurrency=10 --gl=angle

Führe im Hintergrund aus (run_in_background), ohne kleine timeout. Schätzung: ±12–18 Frames/Sekunde (GPU), 2 Minuten 60 fps = 7.000 Frames ≈ 8 Minuten. Fertig → prüfe mit ffprobe (Dauer, 1920×1080, 60 fps) + ein Frame, dann node "…/skript/komprimiere.mjs" out/demo.mp4 out/demo-leicht.mp4 --crf 24 wenn >30 MB und versende mit SendUserFile (Limit 30 MB; volle Datei bleibt auf Disk, informiere den Benutzer).

Vorhandene Demo aktualisieren

git diff / git log, um geänderte Seiten/Texte zu finden → aktualisiere nur die betroffenen Szenen & pages/* (kopiere Markup erneut aus dem Code), prüfe die Behauptungen in den Untertiteln erneut, passe schnitt.ts an, verifiziere Stills dieser Szene, rendere vollständig neu.

Bisher aufgetretene Fallstricke (vor Beginn referenzen/fallstricke.md lesen)

React is not defined (JSX auf Modulebene) · Frame-übergreifender Cache lässt Cursor springen · verwahrloste Render-Prozesse fressen CPU · blur/backdrop-filter verlangsamen Rendering um das 3‑fache · Tailwind-Breakpoints verwenden die Breite des Headless-Fensters · sticky stirbt in verschobenem Inhalt · Paralleles Rendering + halbfertige Dateien zerstören das Bundle · Remotions ffmpeg hat keinen Filter fps/tile · falsche Feature-Behauptungen werden vom Benutzer bemerkt.

Referenzen in dieser Fähigkeit

• referenzen/architektur.md – Engine-API (Stage, Cursor-/Scroll-/Kamera-/Highlight-Schritte, Zeitplan, Kit)
• referenzen/fallstricke.md – Liste der Fallstricke + Lösungen
• referenzen/storyboard.md – Szenenaufbau, Untertitel, Tempo, Rechercheliste
• referenzen/brief-fork.md – Brief-Vorlage zum parallelen Schreiben von Szenen mit Fork-Subagent
• referenzen/render.md – Render-Befehle, Geschwindigkeit, GPU, Komprimierung, Versand
• templat/ – Vorlagencode für das Grundgerüst · skript/ – Gerüst, Prozesse bereinigen, Kontaktbogen, Komprimierung
• Ein reales Beispiel mit 13 Szenen (Landing + Scroll, Highlight-Tour + Dialog, Telefon scannt QR, geteilter Bildschirm Dashboard + Telefon, Seitenwechsel + Bezahlung) stammt aus dem Projekt ChatGerCep des Autors; das Muster findet sich in templat/src/scenes/beispiel.tsx und referenzen/architektur.md.