Communitygithub.com

video-screen-tutorial

Erstelle ein gebrandetes Tutorial- oder Walkthrough-Video (30 s bis 10 min, 1080p Querformat), das zeigt, wie man etwas in einer echten App oder Website macht (Search Console, Cloudflare, Google Tag Manager, WordPress, GitHub, jedes Dashboard). Nutzt die eigene Bildschirmaufnahme des Benutzers, falls vorhanden; andernfalls werden die Schritte als genaue HTML-ähnliche Screens mit einem beweglichen Cursor, Klicks, Tippen und Fokus auf dem besprochenen Steuerelement nachgebaut. Vertont mit der Stimme des Benutzers (oder Jay), in deren Marke, mit Schrittmarkierungen, Stempeln, echten Quellenbelegen für jede Behauptung und leichtem Einsatz des Kits.

Was ist video-screen-tutorial?

Dieses Skill ist spezialisiert auf die Erstellung von Tutorial-Videos, die Schritt für Schritt Aktionen in einer Software-Oberfläche zeigen. Es unterstützt zwei Modi: Wenn der Benutzer eine eigene Bildschirmaufnahme bereitstellt, wird diese verwendet; ansonsten baut das Skill die UI-Schritte als HTML-ähnliche Nachbildungen nach – inklusive Cursor-Bewegungen, Klicks, Tastatureingaben und Fokus auf das jeweilige Bedienelement. Die generierten Videos sind in 1080p, 30 Sekunden bis 10 Minuten lang, werden in der Marke des Benutzers (Farben, Logo, Stimme) erstellt und enthalten Schrittmarkierungen sowie echte Quellenbelege (z. B. Screenshots aus der offiziellen Doku). Der Kit-Einsatz ist bewusst leicht gehalten – nur bei Behauptungen über das Produkt oder für emotionale Momente (z. B. Reaktionen). Das Skill eignet sich perfekt für Anleitungen, Setup-Anleitungen und ‚Zeige, wie man X in Y macht‘-Videos. Es ist nicht gedacht für konzeptionelle oder meinungsbasierte Inhalte – dafür gibt es separate Skills. Die Verarbeitung ist ruhig und auf den Zuschauer ausgerichtet, der parallel mitmacht.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/NicheEgg/video-studio/tree/HEAD/skills/video-screen-tutorial

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Bildschirm-Tutorial

Lies zuerst references/house-rules.md; es hat Vorrang. Ausführungsreihenfolge: video-director Abschnitt 3. Diese Datei deckt nur das ab, was spezifisch ist.

Status: Nachgebaute Look-alike-Bildschirme sind erprobt (das Search Console + Cloudflare Video); Screenshots im screen-Beat sind erprobt. Das Abspielen einer echten Aufzeichnung im Zoom-Fenster ist noch nicht gebaut: Baue und teste es bei der ersten echten Aufnahme (erweitere den screen-Beat, um video zu akzeptieren, so wie es der clip-Beat tut), aktualisiere dann diese Zeile.

Was spezifisch ist

  • Woher die Bildschirme kommen (harte Regel 2): die eigene Bildschirmaufnahme des Benutzers, falls vorhanden; andernfalls baue die Schritte als HTML-ähnliche Look-alikes nach anhand aktueller, datierter Referenzen (references/screens.md), mit Cursor, Klicks, Tippen und Fokus. Das ist eine Demonstration, also ist Nachbau richtig. Bestehende Module zur Wiederverwendung: gsc-add-property, cloudflare-dns-add, gsc-verify.
  • Was dennoch echt sein muss: jede Behauptung über das Produkt („Google sagt…“) ist ein Beleg, der aus dessen Doku erfasst wurde, und jede statische Seite, die als sie selbst gezeigt wird (Startseite, Preisseite), ist eine Erfassung.
  • Prüfe auf private Daten in jedem verwendeten Frame (E-Mails, Konto-IDs, Schlüssel, Umsätze). Verpixelte oder schneide es aus und informiere den Benutzer.
  • Quelle: fetch-video.sh → enhance-audio.sh → rough-cut.mjs (es schneidet Bild und Ton zusammen, sodass tote Zeit und Wiederholungen entfernt werden) → voice.mjs --provider file.
  • Jeder Schritt ist ein screen-Beat mit der Aufzeichnung (oder dem Screenshot) im Markenfenster und Kamera-moves: Start weit, zoome auf das Steuerelement, wenn es genannt wird (1,3–1,6×), halte, ziehe zurück. Niemals ein Laptop- oder Geräterahmen.
  • Schrittmarkierung oben rechts aus script.json → steps. Ein Stempel oder eine Hervorhebung auf dem zu klickenden Element. Ein Befehl pro Beat, benannt so, wie das Bildschirm-Label es zeigt.
  • Struktur: Haken (das Problem, 5–10 s; vor der Kamera, falls sie sich selbst gefilmt haben) → die gesamte Aufgabe in einem Satz → die Schritte → das Ergebnis → ein extra Tipp.
  • Kit-Einsatz ist leicht: Belege für Behauptungen über das Produkt (dessen eigene Doku), eine Reaktion oder ein Meme-Sound bei den „hat funktioniert“- oder „ist fehlgeschlagen“-Momenten. Kein Cutaway während eines Schritts.
  • Nachgebaute Bildschirme verwenden Platzhalterdaten (example.com), niemals Details eines echten Kontos.
  • Tempo: ruhig. Der Zuschauer macht mit.

Kosten und Zeit

Nur Transkription (Cent). Rendern ≈ 1–1,5 min pro Minute Video.

Referenzen

own-footage.md · engine-api.md (screen-Beat, Kamera-Bewegungen) · screens.md (Nachbau von App-Bildschirmen für Demonstrationen) · voice-music.md · troubleshooting.md

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills