Leihyn/claude-demo-video-skill

Was macht claude-demo-video-skill?

Erstelle Hackathon-/Produkt-Demo-Videos mit Remotion. Übernimmt Videostruktur, Szenenerstellung, Bildschirmaufnahmen, Voiceover-Generierung und finales Rendering. Verwende dies zum Erstellen von Demo-Videos, Erklärvideos oder Pitch-Videos für jedes Projekt.

Funktionsweise

Dieses Skill nutzt Remotion, um Videos programmatisch aus React-Komponenten zu generieren. Du definierst die Video-Struktur in einer Konfigurationsdatei (video.config.json), und das Skill erledigt den Rest.

Hauptfunktionen

• Videostruktur: Definiere Kapitel, Szenen und deren Reihenfolge.
• Szenenerstellung: Erstelle dynamische Szenen mit Text, Bildern, Screenshots und Code-Blöcken.
• Bildschirmaufnahmen: Nimm Bildschirmaktivitäten auf und binde sie nahtlos ein.
• Voiceover-Generierung: Erzeuge KI-basierte Sprachaufnahmen für Erklärungen oder Erzählungen.
• Finales Rendering: Render das gesamte Video als MP4-Datei.

Installation

npm install

Verwendung

1. Konfiguration erstellen: Erstelle eine video.config.json im Projektverzeichnis.

Beispiel video.config.json:

{
  "title": "Mein Hackathon-Projekt",
  "scenes": [
    {
      "type": "intro",
      "duration": 5,
      "title": "Einführung",
      "content": "Willkommen zu meiner Demo!"
    },
    {
      "type": "screen-recording",
      "duration": 10,
      "title": "Live-Demo",
      "url": "https://mein-projekt.example.com"
    },
    {
      "type": "code-snippet",
      "duration": 8,
      "title": "Code-Highlight",
      "language": "javascript",
      "code": "console.log('Hello World!');"
    },
    {
      "type": "outro",
      "duration": 5,
      "title": "Abschluss",
      "content": "Vielen Dank fürs Zuschauen!"
    }
  ],
  "voiceover": {
    "enabled": true,
    "language": "de"
  },
  "output": "final-video.mp4"
}

2. Video rendern:

npx remotion render src/index.ts build/out.mp4

Konfigurationsoptionen

Option	Typ	Beschreibung
title	string	Titel des Videos
scenes	array	Liste der Szenen (siehe oben)
voiceover.enabled	boolean	Voiceover aktivieren/deaktivieren
voiceover.language	string	Sprache für Voiceover (z. B. de, en)
output	string	Ausgabedateiname

Szenentypen

• intro: Einleitungsszene mit Titel und Inhalt
• screen-recording: Zeichne den Bildschirm auf (erfordert url)
• code-snippet: Zeige Code mit Syntax-Highlighting an
• outro: Abschlussszene mit Dankesnachricht

Voraussetzungen

• Node.js 18+
• Remotion (wird automatisch installiert)
• (Optional) Ein Voiceover-Anbieter (z. B. ElevenLabs, Google TTS)

Beispiel-Workflow

# 1. Repository klonen
# 2. Abhängigkeiten installieren
npm install

# 3. Konfiguration bearbeiten
echo '{"title":"Meine Demo","scenes":[{"type":"intro","duration":5,"title":"Hallo","content":"Das ist mein Projekt"}]}' > video.config.json

# 4. Video rendern
npx remotion render src/index.ts build/out.mp4

Lizenz

MIT