Communitygithub.com

v01d3tr/slidegen-video

Wandelt das Skript des Benutzers (.txt mit [n] Folienmarkierungen, [Datei] Medien und [Beschreibung] Token) und eine Sprachaufnahme in ein Video mit animierten Folien um, das Wort-für-Wort mit der Erzählung synchronisiert ist und im Stil des genannten Spiels mit dessen echten Icons/Kunstwerken gestaltet wird.

Was ist slidegen-video?

Diese Fähigkeit erstellt Videos mit animierten Folien aus einem Benutzerskript und einer Sprachaufnahme. Der Benutzer liefert eine Textdatei mit speziellen Token, die Folienübergänge (`[1]`, `[2]`, …), Mediendateien (`[datei.mp4]`, `[bild.png]`) und Beschreibungen (`[irgendein Text]`) markieren, zusammen mit einem Spielnamen und einer Sprachaufnahme. Die Fähigkeit ist für Claude Code, Cursor, Codex und ähnliche KI-Agenten konzipiert. Sie richtet ein Projektverzeichnis ein, installiert Abhängigkeiten (sherpa-onnx, ffmpeg, Playwright) und führt dann das Skript aus, um Token zu verarbeiten, Abschnitte zu planen und echte visuelle Assets aus dem genannten Spiel zu finden (z. B. WoW-Icons, Dark Souls-Art). Vor dem Rendern erstellt sie eine Stiltafel mit 6 spielbezogenen visuellen Richtungen zur Auswahl durch den Benutzer. Der Renderprozess verwendet ein Vue.js-Template mit Playwright Chromium und ffmpeg und synchronisiert die Folien Wort-für-Wort mit der ASR-Transkription (Parakeet TDT v3). Die Ausgabe ist eine MP4-Datei mit animierten Folien, Titeln, Symbolen und optionalen Medienclips, alle im Stil des ausgewählten Spiels gestaltet.

Funktioniert mit✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/v01d3tr/claude-skills/tree/main/skills/slidegen-video

In Ihrer bevorzugten KI fragen

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

Dokumentation

Skript + Sprache → animiertes Folienvideo (slidegen)

Eingaben vom Benutzer (Michał):

  • script.txt — der vollständige Erzähltext (kann in die Nachricht eingefügt werden). Token in eckigen Klammern:
    • [1], [2]… — Folienframes: Folie n läuft von [n] bis [n+1]. Harte Grenzen, vom Benutzer gewählt. Wenn das Skript keine hat, nach Thema aufteilen (ein Gedanke pro Folie, ~10–40 s).
    • [boss.mp4], [mapa.png] — eine Mediendatei, die der Benutzer anhängt; zeige sie ab diesem Punkt der Erzählung an.
    • [beliebiger anderer Text], z. B. [obrazek z WoW pokazujący Lich Kinga] — eine Beschreibung: finde passenden echten Inhalt (siehe Assets) und zeige ihn ab diesem Punkt an.
  • Spielname — das Aussehen muss sich direkt oder zumindest indirekt auf dieses Spiel beziehen; Icons/Kunstwerke müssen daraus stammen (ein Dateiname wie ds_bronie deutet auf Dark Souls hin; im Skript bestätigen).
  • Sprachaufnahme (beliebiges Audio/Video) — kann vor oder nach dem Skript eintreffen; transkribiere sie, sobald sie eintrifft.

Feste Regel: bevor ein Video gerendert wird, zeige 6 spielbezogene visuelle Richtungen auf dem eigenen Inhalt des Benutzers an und warte auf dessen Wahl (Schritt 4). Das Brett benötigt nur das Skript.

Code: GitHub v01d3tr/claude-skills, Ordner slidegen/ (README dort listet die Dateien auf). script.py Token → Abschnitte → Zeiten · align.py Parakeet TDT v3 → words.json · spec.json von Claude geschrieben · render.mjs Playwright Chromium + ffmpeg (nur bewegte Fenster werden aufgenommen, andere werden gehalten, gecachte Segmente, Bretter) · template.html Themen + Layouts · icons.py offizielle WoW-Icons · assets.py Spielkunst von GitHub. Der Quellcode dieser Fähigkeit ist skills/slidegen-video/SKILL.md im selben Repository.

1. Einrichtung (einmal pro Sitzung; überspringen, wenn /home/claude/slidegen/render.mjs existiert)

  1. Hänge das Repository mit dem add_repo-Tool an (Besitzer v01d3tr, Repo claude-skills; access: "push" nur, wenn Code-Änderungen gepusht werden) und klone es genau wie vom Tool angegeben nach /home/claude/claude-skills.
  2. Installiere:
cp -r /home/claude/claude-skills/slidegen /home/claude/slidegen && cd /home/claude/slidegen && npm install
pip install -q --break-system-packages sherpa-onnx soundfile numpy
mkdir -p /home/claude/models && cd /home/claude/models && curl -sSL https://github.com/k2-fsa/sherpa-onnx/releases/download/asr-models/sherpa-onnx-nemo-parakeet-tdt-0.6b-v3-int8.tar.bz2 | tar xj

Wenn das Repository nicht erreicht werden kann und der Benutzer slidegen.zip angehängt hat, entpacke es stattdessen nach /home/claude/. Playwright + Chromium sind vorinstalliert. Von der Shell aus sind HuggingFace, Wowhead, Wikis, Fandom und Spiel-CDN blockiert; GitHub (git, API-Suche, Releases) und npm/PyPI funktionieren.

2. Das Skript lesen

mkdir -p /home/claude/proj && cd /home/claude/proj && cp "<script upload>" script.txt   # oder den eingefügten Text schreiben; plus alle vom Benutzer angehängten Mediendateien
python3 /home/claude/slidegen/script.py split script.txt   # Abschnitte, Wortanzahlen, ~Dauern, Medien-/Beschreibungs-Token, FEHLENDE Dateien

Fehlende Mediendateien → den Benutzer bitten, sie anzuhängen (in der Zwischenzeit weitermachen). Wenn die Aufnahme bereits da ist, jetzt Schritt 5 align.py + script.py align ausführen: es zeigt, welche Skriptteile tatsächlich gesprochen wurden — ungesprochene Inhalte nicht auf Folien setzen.

3. Folien planen, Assets finden, spec.json schreiben

Der Benutzer bevorzugt zuerst eine Planung: sende eine kurze Gliederung (Folie n → Titel, Layout, Hauptpunkte, Medien) vor der Verfeinerung, es sei denn, sie sagen, mach einfach. Die Gliederung kann zusammen mit der Stiltafel (Schritt 4) kommen.

  • Eine Folie pro [n]-Frame. Ein [Datei]/[Beschreibung]-Token innerhalb eines Frames wird zu einer Medienfolie, die bei diesem Wort beginnt; wenn der Frame > ~8 s nach Ende eines Clips fortgesetzt wird, füge eine Inhaltsfolie danach ein ("at": "<Phrase>").
  • Folienanfänge: "mark": "3" für [3], "mark": "m:boss.mp4" für Dateien, "mark": "d:1"… für Beschreibungen in der Reihenfolge (Schlüssel, die von script.py ausgegeben werden). Ohne [n]-Markierungen verwende "at": "<erste Wörter des Themas>".
  • Objekte erscheinen bei dem Wort, an dem der Sprecher sie nennt: "at": "<1–3 markante Wörter>" (Fuzzy-Matching; ab dem Folienanfang gesucht). Wähle Wörter, die ASR richtig erkennt (überprüfe transcript.txt), keine verstümmelten Eigennamen.
  • Titel ≤ ~26 Zeichen (automatisch gekürzt), Bildunterschriften ≤ ~35, ≤ 5 Icons pro Zeile, ≤ 4 Karten (3 mit einer Abbildung). Mit korrekten Diakritika polnisch; Folien fassen zusammen, transkribieren nie. Namen aus dem Skript buchstabieren, niemals von ASR.
  • Eine Entität pro Folie (Waffe, Klasse, Boss, Build) → feature-Layout; wenn die Erzählung einen Charakter/Gegner/NPC nennt, füge eine Ganzkörper-figure bei diesem Stichwort hinzu (dem Benutzer gefiel das).
  • Look-Felder (theme, vars, bgImage, fonts) stammen aus der Richtung, die der Benutzer in Schritt 4 wählt.

Spezifikationsformat (vollständiges funktionierendes Beispiel: slidegen/examples/dark-souls-bronie/spec.json):

{
  "series": "Dark Souls · najlepsze bronie PvE",
  "theme": "parchment", "vars": { "--accent": "#8c2a17" }, "bgImage": "art/Mapa_Lordran.webp", "fonts": ["marcellus-sc/400.css"],
  "boardThemes": [ /* die 6 Richtungen, Schritt 4 */ ],
  "audio": "voice.wav", "words": "words.json", "marks": "marks.json", "output": "out.mp4", "lead": 0.12,
  "slides": [
    { "mark": "1", "section": "1/4 Wstęp", "kicker": "Dark Souls · PvE", "title": "Najlepsze bronie", "layout": "icons",
      "items": [ { "icon": "icons/Zweihander.png", "tone": "fire", "label": "Zweihander", "caption": "siła" } ],
      "note": { "at": "według stylu", "text": "podział według stylu gry" } },
    { "mark": "3", "kicker": "Ulubieniec speedrunnerów", "title": "Black Knight Halberd", "layout": "feature",
      "feature": { "icon": "icons/Black Knight Halberd.png", "tone": "danger", "label": "BK Halberd", "caption": "quality / siła" },
      "figure": { "src": "art/black-knight-figure.jpg", "label": "Czarny Rycerz", "caption": "Darkroot Basin", "at": "czarnego rycerza" },
      "items": [ { "at": "czarnego rycerza", "icon": "icons/Black Knight Helm.png", "tone": "shadow", "label": "Drop z Czarnego Rycerza", "caption": "rzadki drop" } ] },
    { "mark": "m:boss.mp4", "layout": "media", "src": "boss.mp4", "caption": "Walka z bossem", "audio": true, "volume": 0.3, "clip": [12, 30] },
    { "mark": "d:1", "layout": "media", "src": "art/icc_raid.jpg", "kicker": "Raid", "title": "Icecrown Citadel", "kenburns": true },
    { "mark": "4", "layout": "meter", "items": [ { "at": "levelowanie", "value": 0.14, "tone": "nature", "label": "Levelowanie", "caption": "prosty i bezpieczny" } ] },
    { "at": "talenty", "layout": "stats", "items": [ { "at": "dziesiątym", "label": "10", "caption": "pierwszy punkt" } ] },
    { "at": "podsumowując", "layout": "hero", "kicker": "Podsumowanie", "title": "Szukamy magów", "subtitle": "serwer PvP, Horda" }
  ]
}
  • Stichwortformen: "at": "Phrase", "at": 12.5, {"at": "Phrase", "offset": -0.3}; "mark" (+ "markLead", Standard 0,25 s). Nicht markierte Items werden nach der Kopfzeile eingeblendet; Bildschirmreihenfolge = Listenreihenfolge (verwende offset, wenn ein späteres Item früher erscheinen würde).
  • Layouts: hero (großer Titel + Untertitel) · icons (Zeile mit Kacheln, Label + Bildunterschrift; off: true graut aus + durchstreicht) · cards (Icon optional, Bildunterschrift, Abzeichen) · feature (feature: {icon,label,caption,tone,at} große Kachel links + Karten rechts; optional figure: {src,label,caption,at} hohes gerahmtes Porträt, das bei seinem Stichwort ganz rechts erscheint, --fig-pos = object-position) · meter (Marker bewegt sich zum value 0–1 jeder Karte, frühere Karten werden abgedunkelt; eine zweite Meter-Folie kann fortgesetzt werden) · stats (große Zahlen) · media (Bild oder Clip; optionaler Titel/Kicker; "fit": "full", "contain": true, "kenburns": true; Clips: "clip": [s,e], "audio": true + volume (Standard 0,35) mischt Clip-Ton unter die Stimme, sonst stumm; "mediaAt" verzögert es).
  • tone: arcane, fire, frost, nature, holy, shadow, danger, neutral.

Assets — echte Inhalte aus dem genannten Spiel

  • WoW-Icons: python3 /home/claude/slidegen/icons.py find frostbolt lichking; icons.py get /home/claude/proj/icons <name>… (64×64, ≈14k offizielle Icons von WeakThorr/wowinterfaceicons, nicht-kommerzielle Fan-Nutzung). Magier-Spezialisierungen: arkan spell_holy_magicalsentry, Feuer spell_fire_firebolt02, Frost spell_frost_frostbolt02; Bosse oft achievement_boss_*. Unsicher bei einem Namen → WebSearch " wowhead".
  • Andere Spiele / größere Kunstwerke: python3 /home/claude/slidegen/assets.py search "<game> icons" "<game> item icons" "<game> assets" "<game> wiki" "<game> fan site" "<game> landing page" "<game> loading screens"; assets.py readme owner/repo (offizielles Paket vs. Fan-made); assets.py ls owner/repo <regex>; assets.py get owner/repo /home/claude/proj/art <pfad>…. Fan-Wiki / Fan-Site / Landing-Page-Repos sind die beste Quelle für Screenshots, Bereichskunst und Charakter-Renderings — grep mit dem Thema in mehreren Sprachen (black|knight|caballero|rycerz). Auch npm (curl -s "https://registry.npmjs.org/-/v1/search?text=<game>%20icons&size=20").
  • Bekannte Quellen — WoW: Jestokyzz/mod-loading-screen-16x9 (88 klassische/TBC/WotLK Ladebildschirme 1920×1080, Fan-Remastered, mit Rahmen + Logo), Zogmaw/encounter-journal-images. Dark Souls 1: SlendyMawn/DarkSoulsItemIcons (alle DSR-Item-Icons, transparentes PNG ~185 px, Weapons/, Armor/, Consumables/…), ozankasikci/dark-souls-wiki (assets/images/{areas,armor,bosses,npcs,weapons,shields,rings,items}; armor/*-set.jpg = Ganzkörperfigur im Set, z. B. black-knight-set.jpg = Black Knight, 180×342 → mit Lanczos 3× hochskalieren + leichte Schärfung), LeaGaj04/dark-souls-hub (public/: Lagerfeuer 4K 44.jpg, Mapa_Lordran.webp, gwyn.jpg, artorias.jpg, solaire.jpg, OrnsteinSmough.jpg), ABDUSSALAM0005/dark-souls-ui (src/background.png dunkles Pergament, Klassen-Renderings).
  • Transparente Item-Icons (Souls-Stil): spielweit vars "--icon-crop": "0%", "--icon-pad": "7%", "--icon-fit": "contain", "--tile-bg": "radial-gradient(circle at 50% 42%,#2e2a25 0%,#141210 70%,#0a0908 100%)", "--tile-border": "#4d463c". WoW-Icons behalten die Standardwerte (8% Randbeschnitt).
  • Bilder mit einem Spielrahmen/-logo als Medienfolie: mit PIL auf den Kunstbereich vorbeschneiden (1920×1080 WotLK-Bildschirme: crop((437,340,1482,928)) → 1152×648); als bgImage verwende --bgart-size: 200% auto; --bgart-pos: 50% 70%. Kein Logo darf angezeigt werden.
  • Jedes heruntergeladene Bild immer lesen und bestätigen, dass es das Motiv zeigt. Niemals einen Platzhalter generieren/zeichnen, der als Spielkunst präsentiert wird; niemals eine Bildersuche nach Spielcharakteren durchführen.
  • Nicht gefunden → bester echter Fallback (Bereichskunst, Rüstungsset-Figur, Icon auf einer Karte) + die Lücken mit Links auflisten (WebSearch), damit der Benutzer Dateien anhängen kann.
  • Dem Benutzer einmal mitteilen, woher die Kunst stammt (Repo-Namen; sagen, wenn Fan-Site/Remaster) und dass es sich um geistiges Eigentum des Herausgebers unter Fan-Content-Bedingungen handelt. game-icons.net (gi:<name>, CC BY 3.0, Credit) nur für generische Konzepte.

4. Stiltafel — 6 spielbezogene Richtungen, erforderlich vor jedem Rendern

Erstelle spec.boardThemes (max. 6) {name, base, bgImage, fonts, vars}; spielweite vars bleiben in spec.vars. Ausgearbeitete Sets: Dark Souls (im Beispiel-Spec — der Benutzer wählte 2 · Mapa Lordranu: Pergament + Lordran-Karte bei --bgart-op .17 + Marcellus SC) und WoW (Karazhan / Questlog / Nexus / Arena / Kirin Tor / Icecrown auf WoW-Ladebildschirmen). Erstelle ein neues Set pro Spiel und Thema. Regeln:

  • Richtung = Basis-Struktur + spielabgeleitete Palette (vars) + optionales echtes Hintergrundkunstwerk (bgImage, optimiert mit --bgart-op/-blur/-bright/-sat/-size/-pos) + optionale Schriftart. Benenne sie nach einem Ort, einer Fraktion, einem Element oder einem UI-Element des Spiels.
  • ≥ 4 von 6 verwenden echte Spielkunst als Hintergrund oder imitieren ein erkennbares Spiel-UI-Element (Questlog, Inventar, Karte, Ladebildschirm-Rahmen). Alle 6 klar unterschiedlich (zentriert/linksbündig, hell/dunkel, andere Kunst).
  • Helle Basen mit viel Kunst: --bgart-op ≈ .17, dunkleres --muted; setze --fcap-color (Feature-Bildunterschrift) auf einen dunklen Akzent — Tonfarben sind für dunkle Karten gemacht.
  • Schriftarten nur mit latin-ext (Polnisch): ls /home/claude/slidegen/node_modules/@fontsource/<f>/files | grep -c latin-ext > 0. OK: Cinzel, Marcellus SC, Pirata One, Cormorant Garamond, Oswald, Rajdhani, Inter. Nicht: IM Fell English SC, Orbitron. Andere: npm i -s @fontsource/<f>, "fonts": ["<f>/400.css"], setze --title-font/--label-font.
  • Basen (body[data-theme=…] in template.html): grimoire dunkel warm gold Cinzel zentriert · parchment helles Papier, tiefrote Titel, dunkle Karten · arcane Indigo/Türkis-Glühen, Rajdhani · esports Holzkohle, Oswald, linksbündig, Tag-Kicker · codex hell editorial Cormorant, linksbündig · frostforge kaltes Stahlblau, weißes Eis Cinzel. Füge eine Basis hinzu, wenn ein Spiel eine benötigt.

Führe auf den 2 repräsentativsten Folien aus (unterschiedliche Layouts; füge eine Medienfolie hinzu, wenn das Skript darauf angewiesen ist):

cd /home/claude/slidegen && node render.mjs /home/claude/proj/spec.json --board 1,3   # funktioniert ohne Aufnahme

Lies zuerst proj/build/board_*.jpg (Überlauf, Text auf Kunst, Logo-Leaks, falsche Icons, geringer Kontrast), behebe es, sende dann dem Benutzer beide Dateien + die Gliederung und frage nach einer Nummer oder einer Mischung. Anhalten und warten. Dann kopiere die gewählte Richtung auf die oberste Spezifikationsebene: theme = Basis, vars = {...spec.vars, ...direction.vars}, bgImage, fonts.

5. Aufnahme ausrichten, rendern

cd /home/claude/proj
ffmpeg -v error -y -i "<recording upload>" -vn -ac 1 -ar 44100 voice.wav
python3 /home/claude/slidegen/align.py voice.wav words.json          # ~0.1× Echtzeit; schreibt transcript.txt
python3 /home/claude/slidegen/script.py align script.txt words.json  # marks.json; überprüfe "low confidence" / "NOT FOUND"
cd /home/claude/slidegen
node render.mjs /home/claude/proj/spec.json --cues                    # alle Zeiten; behebe "Cue not found" / seltsame Fuzzy-Matches
node render.mjs /home/claude/proj/spec.json --preview 12.4,95.2       # vollster Moment jeder Folie → build/preview_*.jpg, lese sie
node render.mjs /home/claude/proj/spec.json --budget 540              # Vordergrund, Timeout 600000; exit 3 = PARTIAL → wiederholen bis fertig

Ad-libs sind in Ordnung (Ausrichtung überspringt unpassende Wörter); eine NICHT GEFUNDENE Markierung bekommt "at" mit einer Phrase aus transcript.txt. Ein bewegtes 1-Minuten-Video rendert in ~40 s; lange Vorträge sind meist Standbilder (≈25–35 min pro 40 min). Spezifikationsänderungen rendern nur geänderte Folien (Differential Build; Standbilder aus Cache wiederverwendet). Das Endvideo wird nach /home/claude/proj/out.mp4 geschrieben. Überprüfung vor dem Senden: ffprobe → prüfe Dauer, Auflösung, Bildrate; sieh dir einen Screenshot des Endrahmens an (erweiterte Szene). Wenn der Benutzer eine MP4 von Bildern wünscht: node render.mjs … --stills und PNGs mit ffmpeg zu MP4 zusammenfügen (25 fps, -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2"). Für die mobile Ansicht des Benutzers reduzieren: ffmpeg -i out.mp4 -vf "scale=1080:1920:force_original_aspect_ratio=decrease,pad=1080:1920:(ow-iw)/2:(oh-ih)/2,setsar=1" -c:a copy out_vertical.mp4. Das Originalvideo beeinträchtigen die Änderungen nicht.

6. Übergebe die Datei

mv /home/claude/proj/out.mp4 /home/claude/proj/"$1" && SendUserFile /home/claude/proj/"$1"

Rufe dies wie folgt auf: SendUserFile /home/claude/proj/out.mp4. Oder erstelle einen lokalen Namen, der den Inhalt beschreibt, z. B. "Dark Souls - Najlepsze bronie PvE.mp4", und verwende diesen.

Liste der Layouts

  • hero — großer Titel + Untertitel
  • icons — Zeile mit Symbolkacheln (Label + Bildunterschrift; off: true graut + streicht durch)
  • cards — Icon optional, Karte mit Bildunterschrift, Abzeichen
  • feature — große Kachel links + Karten rechts; optional figure Ganzkörperporträt, das bei seinem Stichwort erscheint
  • meter — Marker bewegt sich mit value 0–1; frühere Karten werden abgedunkelt; zweite Folie kann fortsetzen
  • stats — große Zahlen
  • media — Bild oder Clip; optionaler Titel/Kicker; fit: full, contain, kenburns; Clips mit clip, audio, volume, mediaAt

Verwandte Skills