Communitygithub.com

harish-anumula/launch-video-skill

Plane und produziere ein 30–75s Motion-Design-Launch-Video für jedes Produkt in Code mit Remotion (React), optionalem KI-Voiceover und instrumentaler Musik, beat-synchronen Schnitten, kinetischer Typografie und einer aus den echten Screens des Produkts nachgebauten UI. Verwende es, wenn jemand nach einem Launch-Video, Produkterklärer, Feature-Showreel, „What's new“-Video, animierter Produktdemo oder Social-Cutdowns (16:9, 1:1, 9:16) fragt.

Was ist launch-video-skill?

Dieses Skill orchestriert die vollständige Produktion eines professionellen Launch-Videos von der ersten Idee bis zur finalen Auslieferung. Es richtet sich an Entwickler und KI-Agenten, die mit Remotion (React) arbeiten und ein strukturiertes, pipelinebasiertes Framework benötigen. Der gesamte Workflow umfasst Discovery-Fragen, Storyboard-Erstellung, Produkt-Captures, Voiceover- und Musikgenerierung (optional mit KI), Szenenbau in Remotion, Review-Runden, Rendering und die Erstellung von Thumbnails sowie Social-Media-Cutdowns. Das Skill stellt sicher, dass die menschliche Kreativität (Geschmack, Produktwissen) durch die technische Pipeline des Agenten (Recherche, Code, Automatisierung) ergänzt wird, ohne dass der Nutzer jedes Detail manuell vorgeben muss. Es unterstützt Claude Code, Codex und andere KI-Agenten und enthält Referenzmaterialien für Storyboarding, visuelle Bausteine, Motion-Design, Audio-Prozesse und Qualitätssicherung. Durch die Verwendung von fiktiven Daten und die Betonung von Markenkonsistenz sowie Lizenzkompatibilität eignet es sich für Produkt-Launch-Videos, Erklärvideos, Feature-Showreels und Social-Media-Inhalte.

Funktioniert mit✓Claude Code✓Codex CLI✓Cursor
npx skills add harish-anumula/launch-video-skill

In Ihrer bevorzugten KI fragen

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

Dokumentation

Launch-Video

Du führst Regie und baust ein kurzes Launch-Video von Anfang bis Ende: Discovery-Fragen → Storyboard → Produkt-Captures → Skript und Voiceover → Musik → Remotion-Szenen → Review → Render → Thumbnail und Cutdowns. Die Person bringt Geschmack und Produktwissen mit; du bringst die Pipeline und das Handwerk. Stelle die unten stehenden Fragen, triff alle anderen Entscheidungen selbst und sag, was du gewählt hast.

Alles hier ist generisch. Bringe die eigene Marke des Produkts, Screens, API-Keys und Musiklizenz mit.

Installation (jeder Agent)

  • Claude Code: Kopiere diesen Ordner nach ~/.claude/skills/launch-video/ (persönlich) oder <repo>/.claude/skills/launch-video/ (Projekt).
  • Codex: Kopiere ihn nach ~/.codex/skills/launch-video/ oder referenziere SKILL.md aus deiner AGENTS.md.
  • Andere Agenten: Lege ihn irgendwo ab und sage dem Agenten, er solle zuerst SKILL.md lesen. Pfade, Versionen und APIs ändern sich im Laufe der Zeit; wenn sich ein Befehl oder eine API-Form weiterentwickelt hat, prüfe die aktuellen Docs und passe an, anstatt abzubrechen.

Was in diesem Skill enthalten ist

PfadWas es ist
references/storyboard-template.mdStory-Shapes, Hook-Typen, wie man Referenzvideos verwendet, ein Beat-Blatt und ein Feature-Beat-Rezept
references/visual-catalog.mdDie visuellen Bausteine, was jede zeigt und für welche Produkte/Features sich jede eignet
references/motion-cheatsheet.mdEasing, Federn, Tempo, Stilfamilien und Schriftart, Übergänge, Kamera über UI, Textur, Cursor
references/audio.mdVoiceover vs. Musik, TTS- und Musik-API-Formen, Mix, Lautstärke
references/review-checklist.mdWas pro Szene, am gesamten Schnitt und vor dem Teilen zu prüfen ist
references/gotchas.mdFehlermodi und deren Behebungen
scripts/Referenzanalyse, Sprachranking, VO pro Zeile mit Wortzeitmessungen, Take-Auswahl, Musikgenerierung/-QA/-Optionen/-Stretch, beat-snapped Timing, Kontaktbögen, Finalisierung
template/Remotion-Starter: Marken-Tokens, Timing-Helfer, kinetische Überschrift, Cursor, Korn, HUD, Logo-Assembly, generische Hook/Reveal/Feature/Payoff/End/Thumbnail-Szenen, eine Bibliothek visueller Elemente, eine Katalogvorschau und video.config.tsx (das Storyboard in Code)

Tools

  • Node 20+, ffmpeg, Python 3.11 via uv/uvx (Skripte deklarieren ihre eigenen Abhängigkeiten).
  • Remotion: npx create-video@latest --yes --blank --no-tailwind video. Installiere die offiziellen Agent-Skills (npx skills add remotion-dev/skills) und lies remotion-best-practices, bevor du Szenen schreibst.
  • Optional: rubberband (sauberes Time-Stretching), demucs und Whisper via uvx (Analyse und QA), ein ElevenLabs- (oder anderer TTS/Musik-) Account.
  • Lizenzen: Remotion ist kostenlos für Einzelpersonen und Unternehmen mit bis zu 3 Personen; größere Unternehmen benötigen eine Remotion-Unternehmenslizenz. Prüfe die kommerziellen Bedingungen deines TTS-/Musikanbieters. Logos Dritter sind Marken; zeige sie nur bei echten Integrationen.

1. Discovery-Fragen (vor der Planung stellen)

Stelle diese Fragen in einem Batch (verwende das Frage-/Multiple-Choice-Tool, falls dein Client eines hat; andernfalls eine kurze nummerierte Liste). Biete für jede eine empfohlene Standardeinstellung an, damit die Person sie einfach bestätigen kann.

  1. Produkt: sein Name genau so, wie er erscheinen soll, und ein Satz darüber, was es tut und für wen.
  2. Zielgruppe und Ziel: wer zusieht (Kunden, Interessenten, Investoren, das interne Team) und was sie danach tun sollen (anmelden, eine Demo buchen, eine Funktion ausprobieren).
  3. Was zu zeigen ist, in Prioritätsreihenfolge: die 3–6 Funktionen oder Momente, die am wichtigsten sind. Die Bildschirmzeit folgt dieser Reihenfolge.
  4. Länge und Format: z.B. 45–75 Sekunden Hauptschnitt im Format 16:9; welche Cutdowns (15–20s, 1:1, 9:16) und wo sie gepostet werden.
  5. Ton: Voiceover + Musik (empfohlen, wenn das Produkt erklärt werden muss) oder nur Musik. Sprachpräferenz (Geschlecht, Akzent, Energie) oder „dieses Beispiel anpassen“.
  6. Geschichte und Look: die Story-Shape und Hook-Art (siehe references/storyboard-template.md; empfehle eine mit Begründung), hell oder dunkel, die Stilfamilie (produkteigen, redaktionell, Showreel, verspielt, filmisch; references/motion-cheatsheet.md) und alle Videos, die ihnen gefallen. Marken-Assets: Logo (SVG), Farben, Schriftarten oder wo sie ausgelesen werden können (das CSS des Produkts).
  7. Screens: Kannst du das Produkt mit einem Demo-Konto und fiktiven Daten ausführen, oder liefern sie Screenshots? Alles, was nicht erscheinen darf.
  8. Endkarte: CTA-Text und URL; Veröffentlichungsdatum/„jetzt in der Beta“-Formulierung.
  9. Keys: wo der TTS-/Musik-API-Key lebt (Umgebungsvariable oder eine git-ignorierte .env). Bitte nie, Keys in den Chat einzufügen.

Wenn sie einige dieser Fragen bereits beantwortet haben, frage nicht noch einmal.

2. Das Storyboard planen

  • Wähle eine Story-Shape und Hook-Art aus references/storyboard-template.md (Problem → Produkt → Beweis ist nur eine von mehreren). Feature-Beats folgen der Prioritätsreihenfolge.
  • Wenn die Person Referenzvideos teilt, leihe dir ihr Handwerk (Tempo, Schnitte, Kamera, Typografie), niemals ihre Zeilen, Eröffnungen oder Sequenzen; überprüfe das Skript anhand der Referenztranskripte, bevor du aufnimmst.
  • Schreibe das VO als eine kurze Zeile pro Szene (≈2,5 Wörter/s; 60s ≈ 140 Wörter). Jede Zeile sollte auf ihrem visuellen Moment der Szene landen.
  • Wähle für jeden Feature-Beat eine visuelle Darstellung aus references/visual-catalog.md, die zu diesem Produkt passt (eine mobile App könnte Phone → Steps → Notifications sein; ein Entwickler-Tool ComposerAnswer → BeforeAfter → Device). Variiere die Bewegungen zwischen aufeinanderfolgenden Beats.
  • Teile das Storyboard als kurze Tabelle und bestätige es, bevor du baust.

3. Das Produkt erfassen

  • Führe das Produkt mit einem Demo-Konto und fiktiven Daten aus. Zeige niemals echte Kunden, Kollegen, E-Mails oder Produktionsdaten.
  • Erfasse Referenz-Screenshots (Playwright, 2x DPR) von jedem Bildschirm, den das Storyboard verwendet, und notiere den genauen sichtbaren Text. Baue diese Bildschirme als vereinfachte React-Komponenten innerhalb von Device/Phone/Karten nach, damit sie scharf bleiben und animieren. Echte Screenshots können direkt in Device/Phone eingefügt werden, wenn ein Nachbau es nicht wert ist.
  • Wenn ein Zustand nicht ehrlich erreicht werden kann, stilisiere ihn und sag es.

4. Voiceover (falls gewählt)

  • Füge die Zeilen in config/script.json ein. scripts/vo_lines.py erstellt 3 Takes pro Zeile mit Wortzeitmessungen; scripts/vo_pick.py wählt den besten anhand der Transkriptübereinstimmung (und Ähnlichkeit zu einer Referenzstimme, falls angegeben).
  • Generiere pro Zeile, niemals das gesamte Skript auf einmal: Ein-Durchgangs-Lesungen verbinden Zeilen und du kannst nicht jede Zeile an ihrem Schnitt beginnen lassen.
  • Verwende Standard-/vorgefertigte Stimmen. Um einer Stimme aus einem Beispiel zu ähneln, bewerte Standardstimmen mit scripts/voice_match.py; klone niemals eine reale Person ohne Einwilligung.

5. Musik

  • Generiere 3–4 instrumentale Optionen (scripts/music.py) oder lizenzierte Tracks. Erstelle eine A/B/C/D-Auszugsdatei (scripts/music_options.sh) und lass die Person nach Gehör wählen.
  • Messe den ausgewählten Track (scripts/music_qa.py); generierte Tracks folgen selten dem gewünschten Tempo oder den Abschnitten, also richte die Schnitte an den erkannten Beats aus (scripts/build_timing.py). Wenn das natürliche Ende an der falschen Stelle liegt, time-stretche ein paar Prozent (scripts/stretch_music.sh).

6. Bauen

  • Richte die Vorlage ein (template/README.md), setze Marken-Tokens, Logo und CTA und schreibe das Storyboard in video.config.tsx.
  • Bevor das VO existiert, gibt scripts/draft_timing.py Animatic-Timing, damit Szenen gebaut werden können; danach ersetzt build_timing.py es mit echten Wortzeiten.
  • Baue eine Szene nach der anderen. Nach jeder rendere 6–10 Standbilder über die Szene bei halber Skalierung und betrachte sie als Kontaktbogen (scripts/sheet.py).
  • Rendere und sende die StyleTest-Komposition (Hook, Reveal, erstes Feature) zur Genehmigung, bevor du den Rest baust.

7. Review und Iteration

  • Rendere den vollständigen Schnitt, führe scripts/finalize.sh aus (−14 LUFS, Cover-Art, 1-fps Kontaktbogen, Transkript des finalen Mixes) und gehe references/review-checklist.md durch.
  • Ändere für jede Runde von Anmerkungen nur das, was gefragt wurde, rendere neu und sag genau, was sich von der vorherigen Version geändert hat. Committe jede Version.
  • Du kannst nicht in Echtzeit zusehen: Sag, welche Prüfungen du durchgeführt hast (Standbilder, Transkript, Lautstärke) und bitte die Person, einmal zuzusehen, bevor sie teilt.

8. Liefern

  • Master 1920×1080, 30 fps (60 für dichte UI-Bewegungen), H.264 CRF 16–18, AAC 256k, −14 LUFS, −1 dBTP.
  • Thumbnail: die Thumbnail-Komposition, lesbar bei ~360px Breite; es ist auch Frame 0 des Videos (viele Apps zeigen den ersten Frame als Vorschau) und das Cover-Art der MP4. Exportiere ein PNG und ein 1280×720 JPG für Plattformen mit benutzerdefinierten Thumbnails.
  • Cutdowns auf Anfrage: ein 15–20s Hook-Schnitt, 1:1 und 9:16 (Stapeltyp über UI), eine stille Website-Schleife, SRT-Untertitel aus den VO-Wortzeitmessungen.

Erklär- und Social Videos

Die gleiche Pipeline produziert kurze Erklärvideos (einen Blogbeitrag, ein Paper, eine Funktion oder Idee) für LinkedIn und X. Was sich ändert:

  • Fakten stammen aus der Quelle, vollständig gelesen. Zusammenfassungen von Web-Fetch-Tools können Zahlen erfinden oder zusammenführen. Erstelle eine Faktencheck-Liste aus dem Originaltext, bevor du das Skript schreibst.
  • Skript für jedermann, nicht für Spezialisten. Eine Idee pro Bildschirm, höchstens ~10 große Wörter, eine alltägliche Analogie für das Kernkonzept (z.B. wird ein Evaluierungsdurchlauf zu „einem Übungstest im Vergleich zum echten Test“), kein Jargon oder Modellnamen, höchstens zwei gerundete Zahlen und ende mit etwas, das der Zuschauer tun kann. „Genau, aber zu technisch“ ist die wahrscheinlichste erste Anmerkung.
  • Tempo: Der Inhalt jedes Bildschirms landet innerhalb von etwa einer Sekunde (schnelle Eintritte, schnelle ~0,12s Schnitte auf den Beat), hält dann 4–5s zum Lesen an. In der Vorlage umwickle eine Szene mit SpeedCtx.Provider value={1.6}, um einen erstellten Eintritt schneller abzuspielen, ohne ihn neu zu timen.
  • Format: 4:5 (1080×1350) für den LinkedIn/X-Feed, 30–50s, nur Musik. Der Text auf dem Bildschirm ist die Bildunterschrift (die meisten Feed-Videos werden stumm abgespielt). Frame 0 ist ein fertiges Cover.
  • Look: Passe an die bestehende visuelle Identität der Person (ihre Karussell-Posts, ihre Website) an, nicht an die Produktvorlage.
  • Musik: Für Social Media sind knackige, Drum-lastige Produktwerbe-Tracks (klarer Kick, Snare, Claps, tiefer Bass, der auf Beat 1 beginnt) normalerweise besser als sanfte Ambient-Titel. Generiere 3 Optionen und lass die Person nach Gehör wählen; gleich schnelle Tracks können ein Beat-Raster teilen.
  • Liefere mit dem Post: Post-Text, Link-Platzierung, Tags, Alt-Text, Cover und eine Posting-Zeit basierend auf der eigenen Zielgruppen-Analyse der Person (wo Follower sind, wann ihr Netzwerk wach ist).

Regeln

  • Nur fiktive Daten auf dem Bildschirm; keine echten Personen, es sei denn, sie haben zugestimmt.
  • Gib keine Zahlen oder Fähigkeiten an, die das Produkt nicht hat. Bestätige, dass jedes „hunderte von …“ oder Statistiken wahr und genehmigt sind.
  • Schreibe originelle Kopie. Verwende nicht den Hook, Slogan oder Claim eines anderen Videos wieder und nimm nicht standardmäßig eine Formel für alle Videos.
  • Bleibe in der Markenpalette; plötzliche außerhalb der Palette liegende Szenen wirken wie Störungen.
  • Halte die Musik unter der Payoff-Linie (sanfter Abfall, niemals fast Stille).
  • Verwende offizielle Kennzeichen für Logos Dritter, niemals Annäherungen.

Verwandte Skills