vishalvana-belwo/belwo-claude-skills

Erstellen Sie ein kommentiertes Demo-Video

Sie schreiben eine Szenen-Datei: jede Szene besteht aus einem Erzähltext und den Klicks, die während des Abspielens ausgeführt werden. Die Skripte wandeln den Text in Sprache um, steuern die App in einem headless Chromium bei einer festen Auflösung von 1600×900, zeichnen den Bildschirm auf und erstellen eine MP4-Datei mit Sprachausgabe und eingebrannten Untertiteln. Ein sichtbarer Cursor, Klickwellen, Highlight-Ringe und Titelkarten werden über der Seite eingeblendet.

Alle folgenden Befehle verwenden PY, was unter Windows python und unter macOS python3 bedeutet, sowie DV, was "${CLAUDE_SKILL_DIR}/scripts/demo_video.py" bedeutet. Jeder Befehl gibt klare Statuszeilen aus (SCENE …, RECORDED …, CHECK OK, ERROR …); lesen Sie diese, anstatt zu raten.

1. Einrichtung (einmal pro Maschine)

PY "${CLAUDE_SKILL_DIR}/scripts/setup_env.py"

Es erstellt eine private Umgebung in ~/.claude-demo-video mit Playwright, Chromium und edge-tts, und überprüft anschließend ffmpeg. Es endet mit READY oder genau mit dem, was fehlt. ffmpeg ist ein Systemwerkzeug: Fragen Sie den Benutzer, bevor Sie es installieren (winget install --id Gyan.FFmpeg -e unter Windows, brew install ffmpeg unter macOS). Die Skripte suchen auch in den üblichen Installationsordnern (WinGet, Chocolatey, Scoop, Homebrew). Wenn ffmpeg woanders liegt, setzen Sie DEMO_VIDEO_FFMPEG_DIR auf dessen Ordner für jeden Befehl.

2. Stimmen Sie das Video vor dem Schreiben mit dem Benutzer ab

Fragen Sie oder bestätigen Sie aus dem Kontext:

• Wer wird es sehen und warum (ein Prüfer, der eine Funktion freigibt, ein Kunde, neue Mitarbeiter). Das bestimmt den Ton und was erklärt werden muss.
• Was zu zeigen ist, in welcher Reihenfolge. Schlagen Sie eine Szenenliste mit je einer Zeile vor und holen Sie ein Ja ein. Zielen Sie auf 3 bis 8 Minuten.
• Sprache. Standardmäßig wird eine natürliche englische Neuralstimme (edge-tts) verwendet. Teilen Sie dem Benutzer mit, dass der Erzähltext an den Microsoft-Sprachdienst gesendet wird, um das Audio zu generieren. Er sollte nur Funktionserklärungen enthalten, niemals Daten. Die Alternative ist die Offline-Systemstimme (--offline): Nichts verlässt die Maschine, aber sie klingt roboterhaft.
• Daten. Zeichnen Sie nur Demodaten auf: fiktive Personen, @example.com-E-Mails, eindeutig falsche Projekte. Zeichnen Sie niemals echte Kunden- oder Mitarbeiterdaten auf und richten Sie den Rekorder niemals auf die Produktion.

3. Bereiten Sie die App vor

• Die App muss laufen und von dieser Maschine aus erreichbar sein, normalerweise ein lokaler Build.
• Wenn Bildschirme Daten benötigen, schreiben Sie ein Seed-Skript und ein passendes Cleanup-Skript für die Demodaten, und führen Sie das Seed aus. Markieren Sie Demo-Zeilen (z. B. IDs, die mit DEMO- beginnen), sodass das Cleanup nichts anderes berühren kann.
• Stellen Sie sicher, dass ausgehende E-Mails und Benachrichtigungen ausgeschaltet sind oder nur an gefälschte Adressen gehen, da der Walkthrough echte Schaltflächen klickt (Absenden, Genehmigen…).
• Szenen, die Daten ändern (Genehmigen, Löschen), können pro Seed nur einmal aufgezeichnet werden. Vor jeder Wiederholung neu seeden.

4. Schreiben Sie die Szenen-Datei

Erstellen Sie sie im Projekt des Benutzers, z. B. demo-videos/<name>.py, niemals im Skill-Ordner. Beginnen Sie mit ${CLAUDE_SKILL_DIR}/reference/scenes-template.py. Ein vollständiges Praxisbeispiel finden Sie unter ${CLAUDE_SKILL_DIR}/reference/zentrio-timesheet-example.py, das ein 6-minütiges Genehmigungsvideo erstellt hat.

CONFIG = {'url': 'https://localhost:7101/MyTimesheet', 'ready': '#tsCards .tsw-card', 'sign_in': True}

async def week(r):
    await r.click('.tsw-row:has-text("Approval screen")')
    await r.spot('.tsw-panel', 3)

SCENES = [
    ('week', "Klicken Sie auf eine Aufgabenzeile und das Log-Panel öffnet sich direkt darunter.", week),
]

• CONFIG['url'] ist die erste Seite. ready ist ein Selektor, der erst sichtbar ist, wenn diese Seite geladen und angemeldet ist. So erkennt der Rekorder, dass die Anmeldung funktioniert hat.
• Erzähltext: ein bis drei kurze gesprochene Sätze pro Szene. Erklären Sie, warum etwas wichtig ist, nicht nur, was auf dem Bildschirm zu sehen ist. Schreiben Sie Zahlen und Symbole so, wie sie gesprochen werden sollen („zwei Komma drei null“). Setzen Sie keine Daten in den Erzähltext.
• Aktionen werden ausgeführt, während der Erzähltext abgespielt wird. Halten Sie sie kürzer als den Text; der Rekorder wartet, bis der Erzähltext beendet ist, bevor er mit der nächsten Szene beginnt.

Szenen-Helfer (r ist der Rekorder; alles andere ist als r.page, die Playwright-Seite verfügbar):

Helfer	Tut
await r.goto('/path', wait_for=sel)	öffnet eine Seite (relativ zu CONFIG['url'])
await r.click(target, dx=.5, dy=.5)	bewegt den sichtbaren Cursor dorthin und klickt; dx/dy wählen den Punkt innerhalb des Elements
await r.move_to(target)	bewegt den Cursor ohne zu klicken
await r.type(target, 'text')	klickt ein Feld an und tippt sichtbar Text ein
await r.select(target, value)	wählt eine Dropdown-Option aus
await r.press('ControlOrMeta+K')	Tastaturkürzel (Strg unter Windows, Cmd unter macOS)
await r.spot(target, seconds, pad)	oranger Highlight-Ring
await r.card(kicker, title, lines, bullets) / await r.uncard()	Vollbild-Titelkarte (Einleitung, Zusammenfassung, Abspann)
await r.confirm_click(target, show=4)	für Schaltflächen, die confirm() aufrufen: zeigt einen ähnlichen Dialog an, akzeptiert dann
await r.download(target)	klickt einen Download an und gibt den Pfad der gespeicherten Datei zurück
await r.show_file(path)	zeigt eine lokale Datei an, z. B. eine HTML-Vorschau eines heruntergeladenen Berichts
await r.scroll_top(), await r.scroll_x(selector, px)	sanftes Scrollen
await r.clear_toasts(selector)	entfernt Benachrichtigungs-Toasts, die Schaltflächen verdecken
await r.wait(seconds)	Pause

target ist ein CSS- oder Playwright-Selektor-String ('button:has-text("Approve")') oder ein Locator (r.page.locator('tr', has_text='Aarav').first).

5. Erstellen Sie die Sprachausgabe, zeichnen Sie auf und prüfen Sie

PY DV voice  demo-videos/<name>.py     # Audio pro Szene; gibt die Länge jeder Szene aus
PY DV record demo-videos/<name>.py     # steuert die App und zeichnet Frames auf
PY DV stills demo-videos/<name>.py     # zwei Standbilder pro Szene in <name>-video/stills/

Anmeldung. Bei 'sign_in': True wird, wenn die App nicht angemeldet ist, ein Browserfenster geöffnet und der Rekorder gibt SIGN_IN_NEEDED aus. Bitten Sie den Benutzer, sich in diesem Fenster anzumelden. Geben Sie niemals Anmeldedaten ein oder fragen Sie nach Passwörtern. Die Sitzung wird in <name>-video/.profile gespeichert, sodass Wiederholungen keine erneute Anmeldung erfordern.

Prüfen Sie jedes Standbild vor dem Erstellen, indem Sie die Bilder lesen:

• Richtige Seite, Panel geöffnet, Cursor dort, wo der Erzähltext es sagt;
• Nichts verdeckt die Aktion (Toasts, Cookie-Banner, ein Profilmenü);
• Das Bild ist nicht gestreckt oder abgeschnitten;
• Keine echten persönlichen Daten auf dem Bildschirm.

Eine SCENE_ERROR-Zeile oder ein falsches Standbild bedeutet, dass diese Szenenfunktion repariert und erneut aufgenommen werden muss (zuerst neu seeden, wenn die Szene Daten geändert hat). reference/lessons.md listet die bisher aufgetretenen Fehler und deren Behebungen auf. Lesen Sie es, wenn etwas seltsam aussieht.

6. Erstellen, überprüfen und übergeben

PY DV build demo-videos/<name>.py [--out "pfad/Name.mp4"]
PY DV check "pfad/Name.mp4" --size 1600x900

run führt voice, record, stills, build und check in einem Schritt aus, sobald die Szenen als funktionsfähig bekannt sind. Teilen Sie dem Benutzer den Pfad und die Länge des Videos mit und was es zeigt. Laden Sie es nicht hoch oder teilen Sie es, es sei denn, der Benutzer fragt danach.

7. Bereinigen

• PY DV clean demo-videos/<name>.py löscht die gespeicherte Anmeldung. Führen Sie dies immer durch, wenn Sie fertig sind, da sie eine echte Sitzung enthält. --all entfernt auch Frames, Standbilder und Audio.
• Führen Sie das Cleanup-Skript für die Demodaten aus und stoppen Sie alle von Ihnen gestarteten App-Prozesse.

Plattformnotizen

• macOS: verwenden Sie python3. Untertitel werden von Chromium gezeichnet und über das Video gelegt, sodass sie überall gleich aussehen und kein ffmpeg mit libass benötigen (Homebrew's hat es nicht). Die Aufzeichnung erfolgt headless, daher ändern Retina-Bildschirme nicht die Videogröße.
• --headed zeichnet in einem sichtbaren Fenster auf. Verwenden Sie es nur, wenn eine App headless Browser ablehnt, und bitten Sie den Benutzer, das Fenster während der Aufnahme nicht zu berühren oder zu vergrößern.
• DEMO_VIDEO_HOME verschiebt die private Umgebung; DEMO_VIDEO_FFMPEG_DIR zeigt auf einen ffmpeg-Ordner.