ascorblack/video-skills

Regeln für die Aufnahme von Programmoberflächen für Videos, Präsentationen und GIFs – frame-basierte Browser-Aufnahme in virtueller Zeit (Headless Chrome, beginFrame), Demostand mit fiktiven Daten, Cursor, Markierungen während der Aufnahme, Puffer am Anfang und Ende der Aufnahme, Einzelbildliste, Zooms und Zuschnitte, Bildschirm im stilisierten Rahmen, Version in einer anderen Sprache mit denselben Klicks und Synchronisation von Händen in einer 3D-Szene mit der Aufnahme. Verwende dies, wenn du Bildschirmaufnahmen von Anwendungen aufnimmst, schneidest, beschleunigst oder in ein Video einfügst.

Was ist video-skills?

Dieses Skill-Paket enthält eine Sammlung von Regeln und Praktiken für die Aufnahme von Programmoberflächen für Videos, Präsentationen und GIFs. Es basiert auf Lektionen aus vergangenen Tutorials und behandelt die frame-basierte Aufnahme im Browser mithilfe von virtuellem Zeitmanagement (Headless Chrome, beginFrame) statt Echtzeit-Videoaufzeichnung, die Bildfehler verursacht. Der Schwerpunkt liegt auf der Verwendung eines Demostands mit fiktiven Daten, der vor der Aufnahme visuell überprüft werden sollte, um Konsistenz zwischen den Bildschirmen zu gewährleisten. Es beschreibt, wie der Cursor präzise zu Zielen bewegt wird, Markierungen während der Aufnahme gesetzt werden, Puffer am Anfang und Ende der Aufnahme sowie die Überprüfung jeder Aufnahme anhand einer Einzelbildliste. Zudem behandelt es Zoomtechniken, die Darstellung des Bildschirms in einem stilisierten Rahmen, die Erstellung einer Version in einer anderen Sprache mit denselben Klicks und die Synchronisation von 3D-Händen mit der Aufnahme. Das Skill unterstützt verschiedene Plattformen und stellt sicher, dass Aufnahmen konsistent, wiederverwendbar und in unterschiedlichen Kontexten (z. B. Produktvideos oder wissenschaftlicher Stil) einsetzbar sind.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/ascorblack/video-skills/tree/HEAD/ru/skills/video-ui-capture

Dokumentation

Запись интерфейса

Jede Regel stammt aus Lektionen früherer Videos; in eckigen Klammern ist die Quelle angegeben (Legende unten). Wo die Quellen divergieren, sind beide Ratschläge mit dem Hinweis aufgeführt, für welchen Fall jeder gilt.

Kurze Regeln

Nimm frame-basiert auf und führe den Browser in virtueller Zeit: Ein Frame vorwärts – ein Frame aufgenommen. Echtzeit-Bildschirmaufnahme zerreißt die Frames. [Video] [3D]
Nimm nur den Demostand mit fiktiven Daten auf; überfliege vor der Aufnahme jeden Bildschirm mit den Augen. [Video] [3D]
Der Stand muss mit sich selbst konsistent sein: Zwei Bildschirme, die dieselbe Tatsache lesen, sagen dasselbe. [Video]
Der Cursor fährt zum Ziel, nicht daran vorbei; zeichne ihn auf der Seite aus denselben Ereignissen, die an die Anwendung gehen. [Video] [3D]
Setze Markierungen direkt während der Aufnahme und hänge Beschriftungen und Kamera an die Markierungen, nicht an Sekunden. [Video]
Gib Puffer am Anfang und Ende der Aufnahme [Video]; in der zweiten Sprachversion sind Einleitung und Abspann gleich lang wie im Original [3D].
Überprüfe jede Aufnahme anhand einer Liste von 4–6 Frames. [Video]
Jedes Warten des Recorders hat ein Timeout; Hintergrundprozesse beende über die PID. [Video]
Zeige die Aufnahme bis zum sichtbaren Ergebnis der Aktion; zoome auf einen ganzen Block, nicht auf einen Button. [Video] [3D]
Die echte oder gezeichnete Oberfläche hängt vom Video ab: Ein Werbevideo über das Programm nimmt die echte auf [Video], ein stilisierter Wissenschaftsfilm zeichnet sie neu [Sciencepop]. Siehe framing.md.

Details

recording.md – Wie man aufnimmt: virtuelle Zeit, Stand, Markierungen, Puffer, Überprüfung der Aufnahme, Recorder.
framing.md – Aufnahme im Video: Zuschneiden und Beschleunigen, Zooms, Cursor, Bildschirm im stilisierten Rahmen, echte oder gezeichnete Oberfläche.
languages-and-sync.md – Version in einer anderen Sprache und Synchronisation von 3D-Händen mit der Aufnahme.

Quellen

[Video] – Archivlektionen zu Video: Oberflächenaufnahmen, Tempo, Übergänge.
[3D] – Lektionen eines 3D-Videos in der Egoperspektive im Browser, bei dem Bildschirmaufnahmen in eine 3D-Szene eingefügt werden.
[Sciencepop] – Lektionen eines Videos im Stil des sowjetischen Wissenschaftspop und eines Diafilms der frühen 70er Jahre mit Programmoberflächen im Bild.