Communitygithub.com

nemock/video-explainer-system

Lokale Claude-Code-Fertigkeit: Verwandle ein Thema oder Dokument in eine visuell dynamische HTML-Erklärpräsentation und ein vertontes Video – komplett lokal, nur mit kostenlosen Tools (Kokoro, ffmpeg) und einem Claude-Abonnement.

Was ist video-explainer-system?

Mit der Fertigkeit 'nemock/video-explainer-system' für Claude Code können Entwickler und technische Autoren jedes Thema oder Dokument in eine interaktive HTML-Erklärpräsentation (Deck) und ein erzähltes Video verwandeln – vollständig lokal und ohne teure Cloud-Dienste. Das System nutzt das lokale Text-to-Speech-Modell Kokoro für natürlich klingende Sprachausgabe und ffmpeg für die Videokomposition. Es unterstützt eine Vielzahl von Eingabeformaten, darunter Markdown-Dokumente, URLs und freie Texteingaben. Der Workflow ist vollständig automatisiert: Claude Code extrahiert die Kernkonzepte, generiert eine strukturierte HTML-Präsentation mit visuellen Effekten, erzeugt passende Sprachaufnahmen und kombiniert alles zu einem MP4-Video. Die Ausgabe bleibt vollständig lokal – ideal für Datenschutz, Offline-Nutzung oder schnelle Prototypen. Die Fertigkeit ist speziell für Claude Code optimiert, funktioniert aber auch in anderen KI-Agenten-Umgebungen, sofern die Abhängigkeiten (Kokoro, ffmpeg) lokal installiert sind.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add nemock/video-explainer-system

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht video-explainer-system?

Lokale Claude-Code-Fertigkeit: Verwandle ein Thema oder Dokument in eine visuell dynamische HTML-Erklärpräsentation und ein vertontes Video – komplett lokal, nur mit kostenlosen Tools (Kokoro, ffmpeg) und einem Claude-Abonnement.

Funktionsweise

  1. Eingabe: Du gibst Claude Code ein Thema, einen Artikel, eine URL oder ein Markdown-Dokument.
  2. Analyse & Strukturierung: Claude Code extrahiert die wichtigsten Konzepte und strukturiert sie in logische Abschnitte.
  3. HTML-Präsentation: Aus den Abschnitten wird eine eigenständige HTML-Datei mit dynamischen visuellen Effekten (Übergänge, Animationen, responsive Layouts) erstellt.
  4. TTS-Erzeugung: Jeder Abschnitt wird mithilfe von Kokoro (lokal ausgeführt) in eine natürlich klingende Sprachdatei umgewandelt.
  5. Videokomposition: ffmpeg kombiniert die HTML-Folien mit den Audiospuren zu einem nahtlosen MP4-Video.

Voraussetzungen

  • Claude-Abonnement (für Claude Code)
  • Lokale Installationen:
    • Kokoro (Text-to-Speech)
    • ffmpeg (Videoverarbeitung)
    • Ein moderner Webbrowser (zur HTML-Vorschau)

Verwendung

# Grundlegende Verwendung
claude "Erstelle ein Video-Explainer zum Thema 'Quantencomputing'"

# Aus einem Dokument
claude "Erstelle ein Video-Explainer aus der Datei ./dokument.md"

# Mit benutzerdefinierten Optionen
claude "Erstelle ein Video-Explainer zum Thema 'KI-Agenten' mit 10 Folien und sanften Übergängen"

Ausgabe

Nach erfolgreicher Ausführung findest du folgende Dateien im aktuellen Verzeichnis:

  • explainer.html – Die interaktive HTML-Präsentation
  • explainer.mp4 – Das fertige Video mit Sprachausgabe
  • audio/ – Einzelne Audiodateien pro Abschnitt (optional)

Anpassung

Du kannst das visuelle Erscheinungsbild über CSS-Variablen in der generierten HTML-Datei steuern. Typische Anpassungen umfassen:

  • Farbschema (hell/dunkel)
  • Schriftgröße und -familie
  • Übergangsanimationen
  • Foliendesign (Einspalter, Zweispalter, Bild-lastig)

Fehlerbehebung

  • Kokoro nicht gefunden: Stelle sicher, dass Kokoro installiert und im PATH verfügbar ist.
  • Kein Ton im Video: Überprüfe die ffmpeg-Audiokonfiguration und die Kokoro-Ausgabe.
  • HTML wird nicht angezeigt: Öffne die Datei in einem modernen Browser (Chrome, Firefox, Edge).

Lizenz

Diese Fertigkeit wird unter der MIT-Lizenz bereitgestellt. Siehe LICENSE für weitere Details.

Verwandte Skills