every-app/video-skills

Erzähltes Video

Die Person nimmt einen Take von sich selbst auf, während sie über ein Storyboard spricht. Der Agent bearbeitet den Take und animiert echte Screenshots des Produkts dazu: Jede Szene beginnt, jeder Klick landet und jede Suche wird auf dem Wort getippt, das sie benennt. Das gesamte Video ist Code (eine HyperFrames-Komposition plus eine Editierliste). Ein neuer Take, ein geänderter Bildschirm oder eine andere Reihenfolge bedeutet eine Neuausführung, keine Neubearbeitung.

Das Video beugt sich der Erzählung, nie umgekehrt. Die Person gibt die Richtung vor; der Agent erzeugt Schnitte, zeigt Frames und fragt nach.

Einrichtung

• ffmpeg im PATH, uv, Node 20+ mit npx (HyperFrames 0.8.62 läuft über npx) und Playwright mit Chromium für Aufnahmen. Funktioniert unter macOS, Linux und Windows.
• Whisper läuft lokal: mlx-whisper auf Apple Silicon, faster-whisper auf anderen Systemen. uv run installiert das richtige.
• SK=<Verzeichnis dieses Skills>/scripts. Jedes Werkzeug wird als uv run $SK/<tool>.py ausgeführt; jedes deklariert seine eigenen Abhängigkeiten.
• Arbeite in einem Ordner außerhalb der versionierten Dateien eines Repositories (einem git-ignorierten .logs/<video>/ oder einem temporären Ordner):

<work>/
  assets/            Aufnahmen, Hintergrund, Endkarte
  storyboard.json    die Szenen -> storyboard/index.html
  takes/<name>/      ein Ordner pro aufgenommener Take: Sondenergebnisse, Transkripte, edit.json, der geschnittene Kommentar und die Webcam
  video.py           das Kompositionsskript -> comp/ (index.html, renders/)
  NOTES.md           jede Entscheidung: Schnitte und warum, Szenenstarts, Neuaufbaubefehle

1. Briefing

Bestätige in einem kurzen Austausch und biete Standardwerte an:

• Format: Launch-Video, Feature-Demo oder Tutorial (references/formats.md – nur Englisch). Ein Launch-Video bleibt unter 2:00 inklusive Endkarte.
• Zielgruppe, die drei oder vier Punkte, die das Video treffen muss, und der Call-to-Action.
• Beispieldaten, die sich gut demonstrieren lassen: ein Beispielunternehmen oder eine Suche, die für diese Zielgruppe auf einen Blick lesbar ist.
• Marke: ein Hintergrundbild (oder der Standardverlauf), eine Endkarte (das OG-Bild des Produkts funktioniert gut), die in der Titelleiste des Fensters angezeigte URL.

2. Aufnahme

Echte Screenshots des laufenden Produkts bei 1440x900, 2x, aus einem Playwright-Skript, das auf $SK/capture.mjs basiert: Frames pro Tastendruck für alles, was auf dem Bildschirm getippt wird, Vorher-Nachher-Zustände für alles, was angeklickt wird, hohe Aufnahmen für alles, was gescrollt wird, und gemessene Klickziele für den Zeiger. Wenn die App eine Anmeldung benötigt, übergib login und der erste Durchlauf öffnet ein Browserfenster, damit sich die Person einmalig anmelden kann. Zeichne nie UI und bearbeite keine Pixel. Sieh dir jede Aufnahme an, bevor du sie verwendest. Details und der Datenschutzhinweis: references/capture.md (nur Englisch).

3. Storyboard

Schreibe storyboard.json, eine Karte pro Szene: den Screenshot, was auf dem Bildschirm zu sehen ist, drei bis sechs Aufzählungspunkte zum Gesagten (kurze Notizen, keine Sätze) und ungefähre Sekundenangaben. Erstelle es und zeige es an:

uv run $SK/storyboard.py storyboard.json storyboard/

Es ist eine einfache Seite, ein Abschnitt pro Szene. Veröffentliche storyboard/ (index.html plus frames/), wenn die Umgebung eine Seite veröffentlichen kann, andernfalls öffne es lokal. Wiederhole den Vorgang, bis die Person bereit ist, aufzunehmen, und übergib dann die Aufnahmehinweise in references/storyboard-and-recording.md (nur Englisch). Sobald sie danach aufnimmt, ändere das Storyboard nicht ohne Rückfrage.

4. Aufnahme

Die Person nimmt einen Take auf, Webcam und Stimme in einer Datei (mit einem beliebigen Webcam-Rekorder: QuickTime, Photo Booth, Windows Camera, OBS), und spricht dabei die Szenen durch. Patzer sind in Ordnung: Sie beginnen den Satz neu und machen weiter. Mehrere Takes sind in Ordnung; jeder erhält einen Take-Ordner.

5. Take bearbeiten

uv run $SK/probe.py <aufnahme> takes/<name>       # take.wav, cam.mp4, take.json; überprüfe still.jpg, wiederhole mit --crop falls nötig
uv run $SK/transcribe.py takes/<name>              # zwei Durchläufe: normal und einer, der Füllwörter ausschreibt
uv run $SK/analyze.py takes/<name>                 # Kandidaten: lange Pausen (mit Schnitten), Füllwörter, Neustarts, Fremdgeräusche
uv run $SK/trace.py takes/<name> <a>:<b>           # platziere jeden Schnitt auf der Energie-Spur (--fine für 5 ms Zeilen)
uv run $SK/splicetest.py takes/<name> c1=<a>:<Schnittstart>,<Schnittende>:<b>   # höre einen Schnitt: er muss wie der beabsichtigte Satz klingen
uv run $SK/jump.py takes/<name> <Schnittstart>:<Schnittende> --slide 0.3        # wie sichtbar der Schnitt in der Webcam-Blase ist
# schreibe takes/<name>/edit.json, dann:
uv run $SK/edit.py takes/<name>                    # edl.json; gibt die bearbeitete Erzählung und die behaltenen Füllwörter aus: lies alles
uv run $SK/build.py takes/<name>                   # narration-edit.wav, cam-edit.mp4 (Crossfades und Webcam-Überblendungen bei jedem Schnitt)
uv run $SK/master.py takes/<name>                  # narration.wav bei -16 LUFS

Zwei Ebenen der Bearbeitung (references/editing.md – nur Englisch):

• Leicht, die Voreinstellung: Schneide Neustarts und Fehlstarts heraus und kürze tote Stellen (eine Pause über ~1,1 s behält 0,7 s, bei einem Szenenwechsel 0,9 s). Jedes „Ähm“ und jede kurze Zögerung bleibt erhalten.
• Weniger Füllwörter, auf Wunsch: Entferne auch die meisten „Ähms“, die allein zwischen Phrasen stehen, und kürze Pausen über ~0,8 s auf etwa 0,55 s. Lasse jedes Füllwort, das an ein benachbartes Wort angehängt ist, bestehen.
• Jeder Schnitt sitzt im Raumton auf der Spur und besteht einen Splice-Test, bevor er eingefügt wird. Neustartschnitte werden nach Möglichkeit an Szenenwechseln vorgenommen, sodass der Bildschnitt den Sprung in der Blase verbirgt.

6. Auf die Wörter komponieren

uv run $SK/cues.py takes/<name>       # words.json, die Cue-Tabelle (Clip-weise Transkripte der endgültigen Erzählung)
NV_SCRIPTS=$SK ASSETS=assets uv run --with numpy python video.py   # das Kompositionsskript -> comp/; gibt jeden Cue im Kontext aus
uv run $SK/render.py comp lint
uv run $SK/render.py comp snapshot 1,14.2,22.5,40.1

Schreibe video.py basierend auf dem funktionierenden Beispiel, examples/openseo-launch/video.py: Szenenstarts und Cue-Zeiten aus der Cue-Tabelle, Kameraeinstellungen über den Aufnahmen und eine auf Wörter abgestimmte Choreographie. Die Cue-Positionen des Beispiels passen nur zu seiner eigenen Bearbeitung: Verankere jeden einzeln neu und lies die Cue-Tabelle, die es nach jeder Änderung der Bearbeitung ausgibt. Die Timing-Regeln finden sich in references/composition.md (nur Englisch); die wichtigsten sind:

• Eine Szene beginnt 0,3 s vor ihrem ersten Wort oder genau an einem Schnitt in der Pause davor.
• Jede Aktion erfolgt auf dem Wort, das sie benennt: der Klick auf „copy“, das Tippen während die Suche gesprochen wird, der Zoom auf eine Zahl, während sie genannt wird, der Zeiger auf jedem Element, während es genannt wird.
• Der erste Frame ist das Poster: die gesamte App, kein Einblenden. In jedem Frame bewegt sich etwas.
• Ein kurzes Label pro Punkt. Mache einen Schnappschuss von jedem Szenenstart, jedem Klick und jedem Label und betrachte sie vor dem Rendern.

7. Rendern und verifizieren

uv run $SK/render.py comp render
uv run $SK/composite.py comp takes/<name> comp/renders/<video>-1080p.mp4
uv run $SK/check.py comp/renders/<video>-1080p.mp4 comp takes/<name>
uv run $SK/filmstrip.py comp/renders/<video>-1080p.mp4 comp/renders/filmstrip.png

Nichts geht an die Person, bis die Prüfung zeigt, dass das Fenster in jedem Frame vorhanden ist, jeder Webcam-Punkt bei Frame-Offset 0 liegt, ein Audio-Median von 0 ms und etwa -16 LUFS vorliegt, und du das Transkript gelesen und den Filmstreifen betrachtet hast (references/verification.md – nur Englisch).

8. Überprüfen und iterieren

• Gib der Person den mpf-Pfad, was geschnitten wurde und worauf sie achten sollte.
• Halte NOTES.md aktuell: jeden Schnitt mit Begründung, Szenenstarts, Neuaufbaubefehle. Erwarte mehrere Runden.
• Varianten sind einfach: ein anderer Take, eine leichte und eine Bearbeitung mit weniger Füllwörtern, eine andere Szenenreihenfolge. Jede ist ein Take-Ordner oder ein Kompositionsskript; erstelle sie mit Unteragenten parallel unter separaten Dateinamen, damit sie nie kollidieren.

Harte Regeln

• Nur echte Bildschirme. Verstecke, was nicht zur Geschichte gehört (ein Banner, einen Cookie-Hinweis); übermale niemals Pixel.
• Überprüfe Aufnahmen und Aufzeichnungen auf Geheimnisse und personenbezogene Daten (API-Schlüssel, E-Mails und Namen anderer Personen, Kundendaten, localhost-URLs) vor dem Rendern; rahme sie aus oder nimm sie neu auf, und lasse jeden Schlüssel, der auf dem Bildschirm erschienen ist, widerrufen. Der eigene Name oder die eigene E-Mail-Adresse der Person in der App ist in Ordnung, sobald sie es bestätigt.
• Die Aufnahmen und die Anmeldesitzung der Person verbleiben auf ihrem Rechner. Veröffentliche nichts ohne Aufforderung.

Was immer noch Probleme bereitet: references/gotchas.md (nur Englisch).