VirtualPirate/create-product-demo-video-skill

Erstellen Sie ein Demo-Video des vom Benutzer beschriebenen Flusses. Die Ausgabe landet in einem neuen demo/vN/-Ordner.

Die eine Regel, die zählt: Jeder Bildschirm ist eine Transkription der echten UI, nicht ein Eindruck davon. Ein Demo, das Layout, Texte oder Komponenten erfindet, ist schlimmer als kein Demo – es zeigt Zuschauern ein Produkt, das es nicht gibt. Lesen Sie den Quellcode für jeden Bildschirm, bevor Sie irgendein Markup dafür schreiben.

Eingaben

/create-product-demo-video <was passieren soll> – eine Flussbeschreibung. Wenn sie vage ist („zeigen Sie das Produkt“), wählen Sie den engsten vollständigen Fluss, der in einem sichtbaren Wert endet, sagen Sie in einer Zeile, welchen Sie ausgewählt haben, und bauen Sie ihn. Blockieren Sie nicht mit Rückfragen.

Schritte

1. Fluss auf Routen abbilden. Wandeln Sie die Eingabeaufforderung in eine geordnete Liste realer Routen um, die der Benutzer durchlaufen würde. Finden Sie zuerst den Router – ein routes/-Verzeichnis, einen app/-Baum, einen <Routes>-Block, ein Routen-Manifest – und listen Sie nur Pfade auf, die existieren. Wenn der Fluss eine Entität benötigt, die erstellt werden muss, bevor ein späterer Bildschirm existieren kann (ein Projekt vor einem projektspezifischen Bericht), fügen Sie entweder diesen Bildschirm ein oder wählen Sie einen Umfang, der ihn nicht benötigt – überspringen Sie keinen erforderlichen Schritt stillschweigend.

2. Quellcode für jeden Bildschirm lesen. Für jede Route: die Routendatei, die Komponenten, die sie rendert, die gemeinsamen Layout-Komponenten der App (Shell, Seitenkopf, leerer Zustand) und ihre Designsystem- Primitive (components/ui/ oder wo immer sie leben). Lesen Sie auch alles, was Zeichenketten generiert, die das Demo zeigt – Vorschau-Helfer, abgeleitete Namen, Backend-Render-/Template-Dienste. Kopieren Sie Zeichenketten wörtlich; paraphrasieren Sie keine Produktkopie.

3. Gerüst erstellen. mkdir -p demo/vN (nächstes unbenutztes N – niemals ein vorhandenes vN überschreiben), dann kopieren Sie assets/skeleton.html → demo/vN/index.html und assets/record.mjs → demo/vN/record.mjs. assets/ befindet sich neben dieser SKILL.md, wo immer das Skill installiert ist – ein Plugin-Cache-Verzeichnis, ~/.claude/skills/ oder das .claude/skills/ eines Projekts. Lösen Sie es aus dem eigenen Verzeichnis des Skills auf, niemals aus dem Repository, das demonstriert wird. Das Gerüst enthält einen Platzhalter-Shell, eine Token-Skala und die Wiedergabe-Engine. Kopieren Sie für ein bewertetes Demo auch den gewählten Track aus assets/music/ → demo/vN/music.mp3 – siehe Musik. Das Kopieren (anstatt auf den Skill-Ordner zu verweisen) hält vN/ später neu aufzeichnbar, derselbe Grund, warum record.mjs pro Version kopiert wird.

4. Gerüst an dieses Produkt anpassen. Alles, was mit REPLACE: markiert ist, ist ein Platzhalter, der ausgetauscht werden muss, bevor eine Szene geschrieben wird, da jeder Bildschirm ihn erbt:

   In index.html	Ersetzen mit
   PRODUCT	Der Name der App, der Host, den ihre Adressleiste anzeigt, und ihr echtes Logo-SVG
   NAV	Die Seitenleiste, transkribiert von der echten Navigation – gleiche Abschnitte, gleiche Reihenfolge, gleiche Bezeichnungen
   TOPBAR	Die echte obere Leiste; löschen Sie Steuerelemente, die die App nicht hat
   :root-Tokens	Den :root-Block aus dem Stylesheet der App, sodass Farbe/Radius/Schriftart übereinstimmen
   ICONS	Pfaddaten aus dem Icon-Set, das die App tatsächlich verwendet
   Löschen Sie die optionalen CSS-Blöcke (Drittanbieter-Bildschirm, Lieferpanels), die der Fluss nicht verwendet.

5. Szenen schreiben. Ein <section class="scene" data-scene="N"> pro Bildschirm, in Reihenfolge. Verwenden Sie die CSS-Klassen des Gerüsts wieder (.pagehead, .card, .btn, .seg, .opt, .chip, .scopeid, .statusbadge, .empty, .input, .pillbar, .toast) – sie sind geformt wie die Ausgabe eines Tailwind/shadcn-artigen Systems, überprüfen Sie also jede anhand der tatsächlichen Klassen der echten Komponente und passen Sie sie an, anstatt anzunehmen. Fügen Sie neues CSS nur für eine Komponente hinzu, die dem Gerüst fehlt, und leiten Sie es von den tatsächlichen Klassen dieser Komponente ab.

6. play() schreiben. Titelbild → Bildschirme → Abspann. Verwenden Sie Untertitel, um jeden Schritt zu benennen, und setzen Sie CAPTIONS am Anfang des Skripts – den Stil und steps = wie viele say()-Aufrufe der Durchlauf macht. Interaktionen erfolgen über die Zeiger-Helfer, damit der Betrachter folgen kann, worauf geklickt wird.

7. Aufzeichnen. node demo/vN/record.mjs → demo/vN/out/product-demo.mp4. Fügen Sie --gif für ein 900px-GIF hinzu. Eine demo/vN/music.*-Datei wird automatisch erkannt; --music <pfad> zeigt auf eine andere, --music-db <n> verschiebt die Lautstärke, --no-music erzwingt Stille.

8. Durch Ansehen überprüfen. Extrahieren Sie Frames und lesen Sie die Bilder – dies ist nicht optional, so werden Layout-Fehler erkannt:

   for t in 5 12 20 28 36 44; do ffmpeg -y -loglevel error -ss $t \
     -i demo/vN/out/product-demo.mp4 -frames:v 1 /tmp/f$t.png; done
   

   Überprüfen: keine übergroßen Icons, nichts am Rand abgeschnitten, der Zeiger landet auf dem Element, das er zu klicken vorgibt, Text ist nicht auf eine Zeile zusammengebrochen. Korrigieren Sie und zeichnen Sie neu auf, bis es sauber ist.

   Frames zeigen Ihnen nicht das Audio. Überprüfen Sie bei einem bewerteten Demo auch den Stream und die Ein-/Ausblendungen – volumedetect protokolliert auf Info-Ebene, daher würde -v error seine Ausgabe verschlucken:

   ffprobe -v error -select_streams a:0 -show_entries stream=codec_name,duration \
     -of default=nw=1 demo/vN/out/product-demo.mp4
   for w in "-ss 0 -t 0.25" "-ss 12 -t 0.5" "-sseof -0.25"; do \
     ffmpeg -hide_banner -nostats $w -i demo/vN/out/product-demo.mp4 \
       -af volumedetect -f null - 2>&1 | grep mean_volume; done
   

   Erwarten Sie einen aac-Stream innerhalb von ~0,05 s der Videodauer, max_volume unter 0 dB und die Kopf- und Schwanzmittelwerte deutlich unter dem Mittelwert – das ist die Einblendung, die beweist, dass es gelaufen ist.

9. demo/vN/README.md schreiben – Szenentabelle mit Routen, die Quellcode-Zuordnung, Dauer, der CAPTIONS-Stil und der Musik-Track, mit dem die Version aufgezeichnet wurde, und was der Fluss bewusst auslässt. Aktualisieren Sie demo/README.md, um die neue Version aufzulisten.

Melden Sie den Pfad, die Dauer und die Größe, öffnen Sie dann die MP4-Datei, damit der Benutzer sie ansehen kann – open auf macOS, xdg-open auf Linux, start auf Windows.

Engine-API

Verfügbar innerhalb von play():

Aufruf	Wirkung
scene(n)	Überblendung zu Szene n, aktualisiert die Adressleiste von URLS
tap(sel, ms)	Zeiger auf Element bewegen und klicken (Welle + Drücken)
moveTo(sel, ms) / click(sel)	Die beiden Hälften, wenn Sie Zustandsänderungen dazwischen benötigen
hideCursor() / place(x, y, 0)	Zeiger zurücksetzen beim Betreten einer Szene
say(text, opts?) / hush()	Untertitel ein/aus. { at: sel } verankert einen coach-Untertitel; { step: n } erzwingt den Index
type(el, text, ms)	Zeichenweises Tippen in ein <span>
wait(ms)	Warten
reveal(el)	Wird automatisch von moveTo aufgerufen – scrollt .main glatt, sodass Ziele unterhalb der Falte sichtbar sind

Setzen Sie am Ende window.__demoDone = true (das Gerüst tut dies bereits) – der Rekorder wartet darauf.

Untertitel-Design

const CAPTIONS = { style: 'pill', steps: 6 } steht mit URLS oben in der Engine. Alle vier Stile sind im Gerüst enthalten; say() ist derselbe Aufruf, unabhängig davon, welcher eingestellt ist. Wählen Sie pro Video:

style	Was es ist	Wählen Sie es, wenn
pill (Standard)	Tintenkapsel, unten zentriert	Alles Kurze und Marketingorientierte. Geringste Überdeckung, ~10 Wörter pro Untertitel
lower-third	Linksbündiger Block mit Schrittzahl + Fortschrittsanzeige	Längere Flows, bei denen der Betrachter die Sequenz spüren soll; am lesbarsten in einem GIF
rail	68px breites Band unter dem Fenster, Kapitelpunkte	Dokumentationen und Support-Clips, bei denen nichts verdeckt werden darf. Kostet App-Höhe – siehe unten
coach	Callout, das am Element im Spiel verankert ist, Rest abgedunkelt	Schritt-für-Schritt-Durchgänge. Jeder Untertitel benötigt { at: sel }; solche ohne fallen auf pill zurück

steps treibt den Index, die Fortschrittsanzeige und die Punkte der Schiene – zählen Sie die say()-Aufrufe und setzen Sie es, oder der Durchlauf endet mit „05 / 06“. Unsicher, welcher Stil? Öffnen Sie index.html in einem Browser und wechseln Sie CAPTIONS.style – die Seite wiederholt auf R, sodass alle vier ohne Aufzeichnung verglichen werden können.

Musik

Optional und ausgeschaltet, es sei denn, ein Titel ist vorhanden. Der Hintergrund wird zur Codierungszeit gemischt – Playwright zeichnet überhaupt kein Audio auf, daher berührt nichts davon die Demoseite oder die Engine.

node demo/vN/record.mjs                      # verwendet demo/vN/music.* falls vorhanden, Stille falls nicht
node demo/vN/record.mjs --music ~/beds/x.mp3  # expliziter Pfad gewinnt gegen den Geschwister
node demo/vN/record.mjs --music-db -4        # leiserer Hintergrund
node demo/vN/record.mjs --no-music           # Stille auch mit einem Geschwister-Track

• Gebündelte Tracks leben in assets/music/, eine Zeile pro Datei in ihrer LICENSES.md. Kein Track wird ohne eine verifizierbare CC0/CC-BY-Zeile ausgeliefert – eine unlizenzierte MP3 ist ein Problem für alle, die dies installieren, nicht nur Ihres. Unsicher? Lassen Sie es außerhalb des Repos und übergeben Sie --music <pfad>.
• Pegel wird normalisiert, nicht eingestellt. Jeder Track wird auf −18 LUFS mit einer −1,5 dB True-Peak- Obergrenze gebracht, sodass ausgetauschte Hintergrundtitel zwischen den Versionen ohne manuelle Anpassung übereinstimmen. --music-db verschiebt dieses Ziel; es fügt keine Verstärkung hinzu.
• Ein- und Ausblendungen sind automatisch – 1,5 s ein, 2,5 s aus, das Ausblenden erfolgt basierend auf der tatsächlichen Videodauer.
• Wählen Sie einen Titel länger als das Video. Alles Kürzere wird geloopt und die Naht ist hörbar; der Rekorder warnt, wenn er muss. 60s+ deckt ein normales 40–60s Demo ab.
• Kein Gesang, keine harten Drop. Der Betrachter liest gleichzeitig Untertitel und UI-Text.
• Audio landet nur in der MP4. Das WebM ist die rohe stille Aufnahme, und ein GIF hat überhaupt keine Tonspur – eine reine Musikänderung ist in der --gif-Ausgabe unsichtbar.

Konventionen

• Die Bühne ist ein fester 1280×800 Mock-Browser; 44px davon sind Browser-Chrome, bleiben 1280×756 für die App. Das Gerüst liefert einen 48