Communitygithub.com

Sound und Music Sync

Ein Video wie ein Editor vertonen: Schnitte auf den Beat legen, Soundeffekte auf Übergänge setzen, Voiceover atmen lassen, lizenzfreie Tracks sicher finden und die Musik so ducken, dass die Stimme klar darüber liegt.

Was ist Sound und Music Sync?

Sound und Music Sync ist eine KI-Agent-Fähigkeit für die kreative Audiopostproduktion von Videos. Sie ermöglicht es, Musik, Soundeffekte und Voiceover so zu synchronisieren, dass das Ergebnis professionell wirkt – selbst bei einfachem Animationsmaterial. Die Fähigkeit deckt den gesamten kreativen Workflow ab: von der Auswahl und Lizenzprüfung eines Musikstücks über die Berechnung eines Beat-Rasters (BPM in Frames), das Einrasten von Schnitten auf den Takt, die präzise Platzierung von Soundeffekten auf Übergängen, die Tempo- und Atemkontrolle des Voiceovers bis hin zur finalen Audio-Abmischung mit dynamischem Ducking der Musik unter der Stimme. Sie stellt sicher, dass jeder harte Schnitt auf einem Beat liegt, Soundeffekte genau im Moment ihrer Bewegung kulminieren, das Voiceover mit etwa 150 Wörtern pro Minute und bewussten Pausen läuft und die Musik bei Sprache auf ca. 30 % ihres Pegels abgesenkt wird. Die Entscheidungen werden als konkrete Zahlen (Beat-Frames, SFX-Zeitstempel, Ducking-Pegel) an die Tools **remotion-compose** und **remotion-render** übergeben – die kreative Führung bleibt hier, die technische Umsetzung dort. Zwei mitgelieferte Rechner-Skripte (beat_grid.js für das Beat-Raster und mix_levels.js für die Ducking-Planung) automatisieren die Berechnungen. Die Fähigkeit ist für Plattformen wie Claude Code, Cursor oder Codex konzipiert und arbeitet eng mit Schwesterskills wie video-storyboard, kinetic-typography und motion-color-and-light zusammen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/sound-and-music-sync

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht Sound und Music Sync?

Sound ist die Hälfte des Videos – und die Hälfte, die oft vergessen wird. Eine mittelmäßige Animation, die auf den Beat geschnitten ist und ein sauberes Voiceover hat, wirkt professionell; eine schöne Animation mit Schnitten, die schweben, und einer unter der Musik begrabenen Stimme wirkt amateurhaft. Dies ist die Audio-Ebene des Geschmacks. Du entscheidest, wo Schnitte landen, wo Soundeffekte akzentuieren, wie das Voiceover atmet und wie der Mix sitzt – dann gibst du die konkreten Zahlen (Beat-Frames, SFX-Zeitstempel, Ducking-Pegel) an remotion-compose weiter, um sie auf der Timeline zu verdrahten, und an remotion-render, um sie zu exportieren. Du schreibst nicht das <Audio>-JSX oder startest den Renderer; du triffst die kreativen Entscheidungen, die sie füttern.

Dieses Skill arbeitet mit dem Rest des motion-video-direction-Pakets zusammen: eine video-storyboard-Szenenliste und motion-design-principles-Timing-Entscheidungen sind deine Eingabe – du vertonst auf bereits existierende Beats. Wenn Text zum Audio animiert wird, synchronisiere ihn mit kinetic-typography; wenn der Schnittrhythmus eine Produktvorführung trägt, stimme dich mit product-demo-director ab; wenn du eine vertikale/Social-Version schneidest, leite die Beats pro Plattform mit social-video-formatter neu ab. Der Audio-Mix ist seine eigene Ebene – überlasse den visuellen Look (Farbkorrektur, Beleuchtung, Kontrast) motion-color-and-light und vertone gegen das, was es korrigiert.

Arbeitsablauf

Führe diese Schritte in der Reihenfolge aus. Beginne nicht mit dem Platzieren von SFX, bevor die Schnitte auf dem Beat verriegelt sind, und finalisiere den Mix nicht, bevor das VO-Timing stimmt – jeder Schritt baut auf dem vorherigen auf.

  1. Track auswählen und Tempo festlegen. Wähle Musik, die zur Energie und Länge des Videos passt, bestätige die Lizenz (siehe references/royalty-free-sourcing) und ermittle die BPM. Die meisten lizenzfreien Bibliotheken listen BPM; falls nicht, klopfe sie aus oder verwende einen Detektor. BPM ist das Rückgrat von allem, was folgt – ein Beat dauert 60 / BPM Sekunden, und bei der Projekt-FPS sind das fps * 60 / BPM Frames.

  2. Beat-Raster erstellen und Schnitte einrasten lassen. Rechne Beats in Framenummern um und setze jeden harten Schnitt und jeden großen Szenenwechsel auf einen Beat (führe beat_grid.js unten aus). Schneide auf der Betonung – Schläge 1, 5, 9 im 4/4-Takt – für Betonung; schneide auf jedem Beat für gewöhnliche Übergänge. Ein Schnitt, der zwei oder drei Frames vom Beat entfernt landet, wirkt „falsch“, selbst für Zuschauer, die nicht benennen können, warum. Übergib die eingerastete Frame-Liste als <Sequence from={...}>-Grenzen an remotion-compose.

  3. Soundeffekte auf Übergänge setzen, nicht darüber. SFX existieren, damit Bewegungen sich physisch anfühlen. Die Regel: Der Soundpeak liegt genau im Moment des Bewegungshöhepunkts. Ein Whoosh führt in einen Wisch ein (beginne ihn ~3–5 Frames vor dem Schnitt, sodass sein Nachhall auf dem Schnitt landet); ein Impact/Thud landet auf dem Frame, an dem eine Karte einschlägt; ein Klick/Pop landet auf dem Frame, an dem ein UI-Element erscheint; ein Riser baut sich über die 10–20 Frames vor einer Enthüllung auf und löst sich auf ihr auf. Ein SFX pro Übergang – mehrere übereinander verwandeln Interpunktion in Lärm. Siehe references/sfx-placement.

  4. Voiceover so bemessen, dass es atmet. VO gibt das eigentliche Tempo des Videos vor; die Bilder dienen ihm, nicht umgekehrt. Ziele auf ein gesprächiges Tempo von ~150 Wörtern pro Minute (≈2,5 Wörter/Sekunde) – schneller wirkt gehetzt, langsamer wie ein Geiselvideo. Lasse eine Beat-Stille (8–15 Frames) vor einer Schlüsselzeile und nach dem CTA. Schreibe für das Ohr: kurze Sätze, eine Idee pro Satz, Zusammenziehungen. Lasse niemals einen Szenenschnitt mitten im Wort landen – richte Szenengrenzen an den Lücken zwischen Sätzen aus. Timing des VO zuerst, dann dehne oder stauch die Szenendauer, um es anzupassen (dies wird das durationInFrames, das remotion-compose verwendet).

  5. Mix: Ducke die Musik, sodass das VO oben liegt. Dies ist der häufigste Audiofehler überhaupt. Musik und VO in voller Lautstärke konkurrieren im selben Frequenzbereich, und die Wörter gehen verloren. Ducke die Musik auf etwa 25–35 % ihres Pegels immer dann, wenn das VO spricht, und bringe sie in den Lücken wieder hoch. Führe mix_levels.js für konkrete Pegel- und Timing-Zahlen aus. Ziele auf das VO bei etwa –3 bis –6 dB (klar, nie übersteuernd), geduckte Musik bei etwa –18 bis –22 dB. Übergib die Ducking-Hüllkurve (welche Frames zu ducken sind, den Bodenpegel) an remotion-compose, das sie mittels volume-Callbacks pro <Audio> anwendet.

  6. Export stichprobenartig prüfen. Nachdem remotion-render das MP4 erzeugt hat, höre es auf Laptop-Lautsprechern und auf Telefon-Lautsprechern an, nicht nur auf guten Kopfhörern – die meisten Zuschauer hören auf schlechten Lautsprechern. Bestätige: Jedes Wort des VO ist über der Musik verständlich, kein SFX kratzt oder erschreckt, Schnitte fühlen sich auf den Beat verriegelt an, und der lauteste Moment verzerrt nicht. Wenn ein Wort verloren geht, ducke tiefer in diesem Bereich; wenn SFX erschrecken, ziehe sie um 6 dB herunter.

Qualitätsstandard

Das Audio ist nur dann erstklassig, wenn all dies zutrifft:

  • Jeder harte Schnitt landet auf einem Beat-Frame aus dem Raster – keiner schwebt zwischen Beats.
  • Jeder Übergangs-SFX peakt auf dem genauen Frame, an dem seine Bewegung peakt; Riser lösen sich auf der Enthüllung auf, nicht davor oder danach.
  • VO läuft mit ~140–160 Wörtern pro Minute mit bewusster Stille vor Schlüsselzeilen und nach dem CTA; keine Szenenschnitte mitten im Wort.
  • Das VO ist auf Telefon-Lautsprechern vollständig über der Musik verständlich – überprüft, nicht angenommen – weil die Musik auf ~30 % unter Sprache duckt.
  • Genau ein SFX pro Übergang; der Track loopt oder endet sauber ohne abruptes Abschneiden auf dem letzten Frame.
  • Die Lizenz jedes Audio-Assets erlaubt die beabsichtigte Nutzung (kommerziell / bezahlte Anzeigen / Kundenarbeit) und die Anforderungen an die Namensnennung sind dokumentiert.

NICHT

  • Lasse Schnitte nicht außerhalb des Takts schweben, um die „natürliche“ Länge einer Szene zu bewahren – dehne oder trimme die Szene stattdessen auf den nächsten Beat.
  • Lasse Musik nicht in voller Lautstärke unter dem Voiceover laufen; nicht geduckte Musik ist der Grund, warum VO matschig klingt. Ducke sie jedes Mal, wenn jemand spricht.
  • Stapele nicht mehrere SFX auf einen Übergang oder verwende denselben Whoosh bei jedem Schnitt – variiere sie, sonst hört das Ohr auf, sie wahrzunehmen.
  • Schreibe hier nicht das <Audio>-JSX, setze startFrom/volume-Callbacks oder rufe den Renderer auf – erzeuge die Zahlen und gib sie an remotion-compose/remotion-render weiter.
  • Verwende keine Tracks von YouTube-Rips, „kostenlosen“ Seiten ohne angegebene Lizenz oder dem Spotify eines Kunden – kommerzielle Nutzung erfordert eine echte lizenzfreie oder lizenzierte Quelle.
  • Normalisiere nicht den gesamten Mix, um so laut wie möglich zu sein; lasse Headroom, damit der lauteste Impact nicht übersteuert.
  • Lasse das VO nicht rasen, um in eine feste Laufzeit zu passen – schneide die Bilder zum VO, nicht das VO zu den Bildern.

Rechner: Beat-Raster

In sich geschlossenes Node-Skript. Speichere es als beat_grid.js und führe es mit node beat_grid.js aus. Es wandelt BPM und fps in die genauen Framenummern um, auf denen deine Schnitte landen sollten, und markiert Betonungen. Keine Abhängigkeiten. Gib die gedruckten Frames als <Sequence from={...}>-Grenzen an remotion-compose weiter.

// Beat-Raster. Eingaben bearbeiten, dann: node beat_grid.js
const input = {
  bpm: 120,            // Tempo des gewählten Tracks
  fps: 30,             // Projektbildrate
  durationSeconds: 12, // Länge des Videos
  beatsPerBar: 4,      // 4/4-Takt; Betonung ist jeder 4. Beat
}

const framesPerBeat = (input.fps * 60) / input.bpm
const totalFrames = Math.round(input.durationSeconds * input.fps)
const beats = []
for (let b = 0; ; b++) {
  const frame = Math.round(b * framesPerBeat)
  if (frame > totalFrames) break
  beats.push({ beat: b + 1, frame, downbeat: b % input.beatsPerBar === 0 })
}

console.log('Frames pro Beat:', framesPerBeat.toFixed(2), '(' + (60 / input.bpm).toFixed(3) + 's pro Beat)')
console.log('Auf diesen Frames schneiden (* = Betonung, am besten für harte Schnitte):')
for (const b of beats) {
  console.log('  Beat ' + String(b.beat).padStart(2), '-> Frame', String(b.frame).padStart(4), b.downbeat ? '*' : '')
}
console.log('Nur Betonungs-Frames:', beats.filter((b) => b.downbeat).map((b) => b.frame).join(', '))

Beispielausgabe der Berechnung

Mit den obigen Eingaben gibt das Skript aus:

Frames pro Beat: 15.00 (0.500s pro Beat)
Auf diesen Frames schneiden (* = Betonung, am besten für harte Schnitte):
  Beat  1 -> Frame    0 *
  Beat  2 -> Frame   15 
  Beat  3 -> Frame   30 
  Beat  4 -> Frame   45 
  Beat  5 -> Frame   60 *
  Beat  6 -> Frame   75 
  Beat  7 -> Frame   90 
  Beat  8 -> Frame  105 
  Beat  9 -> Frame  120 *
  ...
Nur Betonungs-Frames: 0, 60, 120, 180, 240, 300, 360

So zu lesen: Bei 120 BPM und 30 fps ist ein Beat genau 15 Frames. Setze normale Übergänge auf jeden aufgeführten Frame und deine härtesten Schnitte – den Intro-zu-Inhalt-Schnitt, die CTA-Enthüllung – auf eine Betonung (0, 60, 120…). Wenn eine Szene 70 Frames laufen soll, raste sie auf 75 (Beat 6) ein, anstatt den Schnitt bei 70 schweben zu lassen. Diese eingerasteten Zahlen sind genau das, was remotion-compose in <Sequence from={...}> einfügt.

Rechner: Mix-Pegel und Ducking-Timing

In sich geschlossenes Node-Skript. Speichere es als mix_levels.js und führe es mit node mix_levels.js aus. Es berechnet den geduckten Musikpegel und die Frame-Bereiche pro VO-Zeile zum Ducken, sodass du remotion-compose eine konkrete Hüllkurve statt eines Gefühls übergibst. Keine Abhängigkeiten.

// Mix- und Ducking-Planer. Eingaben bearbeiten, dann: node mix_levels.js
const input = {
  fps: 30,
  musicVolume: 0.8,       // Musikpegel, wenn niemand spricht (0-1)
  duckToPercent: 0.30,    // Musik auf diesen Anteil ihres Pegels unter VO ducken
  voVolume: 1.0,          // Voiceover-Pegel (VO als lautestes Element belassen)
  duckFadeFrames: 8,      // Ein-/Ausblenden, damit das Ducken kein harter Sprung ist
  // VO-Zeilen als [StartSekunden, EndSekunden]; ducke Musik über jede, mit Fade-Puffer
  voLines: [
    [0.5, 3.2],
    [4.0, 7.5],
    [8.2, 11.0],
  ],
}

const duckedLevel = +(input.musicVolume * input.duckToPercent).toFixed(3)
const toFrame = (s) => Math.round(s * input.fps)
// grobe dB als Referenz: 20*log10(level)
const dB = (v) => (v <= 0 ? '-inf' : (20 * Math.log10(v)).toFixed(1) + ' dB')

console.log('VO-Pegel:           ', input.voVolume, '(' + dB(input.voVolume) + ')  <- lautestes Element')
console.log('Musik (keine Sprache):  ', input.musicVolume, '(' + dB(input.musicVolume) + ')')
console.log('Musik geduckt unter VO:', duckedLevel, '(' + dB(duckedLevel) + ')')
console.log('Duck-Fade:          ', input.duckFadeFrames, 'Frames ein/aus')
console.log('Ducke Musik über diese Frame-Bereiche (Puffer ' + input.duckFadeFrames + 'f pro Seite für das Fade):')
for (const [start, end] of input.voLines) {
  const a = toFrame(start) - input.duckFadeFrames
  const b = toFrame(end) + input.duckFadeFrames
  console.log('  VO ' + start + 's-' + end + 's  -> Ducke Frames', Math.max(0, a), 'bis', b)
}

Beispielausgabe der Berechnung

VO-Pegel:            1 (0.0 dB)  <- lautestes Element
Musik (keine Sprache):   0.8 (-1.9 dB)
Musik geduckt unter VO: 0.24 (-12.4 dB)
Duck-Fade:           8 Frames ein/aus
Ducke Musik über diese Frame-Bereiche (Puffer 8f pro Seite für das Fade):
  VO 0.5s-3.2s  -> Ducke Frames 7 bis 104
  VO 4s-7.5s    -> Ducke Frames 112 bis 233
  VO 8.2s-11s   -> Ducke Frames 238 bis 338

So zu lesen: Das VO bleibt auf vollem Pegel (das lauteste Element im Mix), Musik läuft bei 0.8 in den Lücken und duckt auf 0.24 – etwa ein Drittel – wo immer jemand spricht, und blendet über 8 Frames ein/aus, sodass der Abfall kein ruckartiger Sprung ist. Die Frame-Bereiche sind genau die Bereiche, die remotion-compose dem volume-Callback des Musik-<Audio> füttert: voller Pegel außerhalb, duckedLevel innerhalb, linear über den Fade-Puffer gerampt. Deshalb bleiben die Wörter klar, ohne dass die Musik verschwindet.

Vorlage: Audio-Cue-Blatt

Kopiere dies, fülle die FILL-Felder mit deinen Beat-Raster- und Mix-Pegel-Ausgaben und übergib das ausgefüllte Blatt an remotion-compose. Es ist die einzige Quelle der Wahrheit für jede Audio-Entscheidung im Video.

AUDIO-CUE-BLATT. [FILL: Video-Name]. fps [FILL] / [FILL] BPM / [FILL]s gesamt

MUSIK
  Track:                 [FILL: Titel + Quelle]
  Lizenz:               [FILL: z.B. Epidemic Sound commercial / CC0] - Namensnennung: [FILL: ja/nein, Text]
  Pegel (keine Sprache):     [FILL: 0-1]    Geduckt unter VO: [FILL: 0-1] (~30%)

BEAT-RASTER (von beat_grid.js) - Schnitte landen hier
  Betonungs-Frames:       [FILL: 0, 60, 120, ...]
  Harte Schnitte auf:          [FILL: welche Betonungen tragen die großen Schnitte]

SFX (eines pro Übergang; Peak AUF dem Bewegungshöhepunkt)
  FRAME    SFX            ROLLE
  [FILL]   [FILL whoosh]  führt in Wisch ein (Start ~4f früher, Nachhall auf Schnitt)
  [FILL]   [FILL impact]  Karten-Einschlag, landet AUF Schnittframe
  [FILL]   [FILL riser]   baut sich über 10-20f auf, löst sich auf Enthüllung
  [FILL]   [FILL pop]     UI-Element erscheint

VOICEOVER (~150 Wörter/min; Szenen passen zum VO, nicht umgekehrt)
  ZEILE                                   START   ENDE    SZENE
  [FILL Zeile]                            [FILL]  [FILL] [FILL]
  (Stille 8-15f vor Schlüsselzeile / nach CTA)

DUCKING-HÜLLKURVE (von mix_levels.js) - Frame-Bereiche zum Absenken der Musik
  [FILL: 7-104, 112-233, ...]  Fade [FILL]f ein/aus

ÜBERGABE: remotion-compose verdrahtet <Audio> + volume-Callbacks; remotion-render exportiert.

references/royalty-free-sourcing

Kommerzielle Videos benötigen Musik, für die du tatsächlich lizenziert bist – „Ich hab's auf YouTube gefunden“ ist keine Lizenz, und das Spotify eines Kunden auch nicht. Lizenzierte/lizenzfreie Quellen, nach Anwendungsfall:

  • Abonnement-Bibliotheken (sicherste für Kunden-/Kommerziell-/Anzeigenarbeit): Epidemic Sound, Artlist, Musicbed, Soundstripe. Pauschalgebühr, breite kommerzielle Lizenz, große SFX-Bibliotheken, keine Namensnennung pro Video. Der Standard für bezahlte Arbeit.
  • Kostenlos mit Bedingungen (überprüfe jede Lizenz sorgfältig – einige verbieten kommerzielle Nutzung oder erfordern Namensnennung): Free Music Archive, YouTube Audio Library, Pixabay Music, Incompetech. Geeignet für eigene Projekte, Low-Budget-Arbeit oder interne Videos; für Kundenprojekte die Abonnement-Option bevorzugen.
  • Einmaliger Kauf (OK für eigenständige Videos): AudioJungle, Pond5. Lizenz variiert je nach Verkäufer – auf „kommerzielle Nutzung“ und „Anzahl der Aufrufe“ prüfen.
  • NIE verwenden: YouTube-Rips, SoundCloud-Downloader, TikTok-Sounds ohne nachgewiesene Lizenz, Spotify, Apple Music, Bandcamp – sofern nicht explizit als lizenzfrei oder unter einer Creative-Commons-Lizenz mit kommerzieller Erlaubnis gekauft/angegeben.

Zu dokumentieren für jeden Track: Quelle, Lizenztyp (Abonnement, CC0, einmaliger Kauf), ob Namensnennung erforderlich ist und was der Urheberrechtsnachweis verlangt (z. B. „Musik von Epidemic Sound“). Schreibe dies in das Audio-Cue-Blatt, damit remotion-compose und der Client wissen, dass die Nutzung sauber ist.

references/sfx-placement

Ein SFX pro Übergang. Hier ist, wo jeder Typ typischerweise landet – die Framenummern sind relativ zum Schnittframe (dem Frame, an dem sich die Szene ändert). Diese Tabelle ist zur Entscheidungsfindung gedacht; schreibe die genauen Frames in das Audio-Cue-Blatt.

SFX-Typen und Timing

SFX-TypStart (relativ zum Schnitt)PeakEnde (relativ zum Schnitt)Typische Verwendung
Whoosh-3 bis -5 FramesAuf dem Schnitt+2 bis +4 FramesWisch-/Schwenk-/Schnellübergänge; der Nachhall des Whoosh überlappt den neuen Clip
Impact/Thud-1 FrameAuf dem Schnitt (Frame 0)+2 bis +3 Frames, AusklingenKarte schlägt ein, Logo erscheint, harter Szenenwechsel; der Schlag ist der Schnitt
Riser-10 bis -20 FramesAuf dem Schnitt+0 Frames (zum Schnitt aufgelöst)Enthüllungen, Build-ups, Höhepunkte; Spannung aufbauen, genau im Moment der Enthüllung auflösen
Click/Pop0 Frames (genau auf dem Frame, an dem das UI erscheint)Das Erscheinungsframe selbst+1 Frame, sehr kurzUI-Element erscheint, Knopf, Häkchen; schnell, präzise, ein Frame
Ambient-Pad-5 bis -10 FramesÜberlappt den Schnitt+5 bis +10 FramesAtmosphärenwechsel; beginnt vor dem Schnitt, überlappt sanft in die neue Szene

Regel

Ein SFX pro Übergang. Wenn der Übergang einen Whoosh und einen Impact erhält, sind es zwei separate Geräusche: der Whoosh führt den Bildwechsel ein, der Impact verstärkt das erste Element im neuen Bild. Stapele sie nicht auf demselben Moment, es sei denn, du modellierst eine bestimmte physische Aktion (z. B. eine Tür, die zuschlägt und verriegelt – ein Thud, dann ein Klick 5 Frames später). Variiere die SFX-Auswahl: Derselbe Whoosh auf jedem Schnitt wird unsichtbar; verwende 3–5 verschiedene und rotiere sie.

Vermeide

  • Kein SFX auf Schnitten, die keine Bewegung zeigen (z. B. Standbild zu Standbild) – ohne Bewegung fühlt sich das Geräusch aufgesetzt an.
  • Kein SFX auf Überblendungen mit einfachem Crossfade – die Überblendung selbst ist die Transition.
  • Keine harten SFX auf sanften Szenen (ein Donnerschlag auf einer ruhigen Nahaufnahme wirkt wie ein Fehler).
  • Lasse SFX nicht auf voller Lautstärke, wenn sie nah an der Musik oder dem VO liegen – senke sie um 3–6 dB, wenn der Mix überladen wirkt.

Die genauen Framenummern notierst du im Audio-Cue-Blatt unter dem SFX-Abschnitt. remotion-compose platziert die -Elemente auf diesen Frames.

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

Captions From Transcript

Produce an accurate, properly timed caption track (SRT or WebVTT) from a video

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Render

Renders a Remotion composition to MP4 and runs the edit-and-re-render loop - CLI render commands, 1080p/4K/9:16 presets, concurrency tuning, codec selection, batch variants from a JSON data file, and Lambda for cloud rendering. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

Screencast Capture

Capture clean raw screen and camera footage for a tutorial or product demo - choosing the recorder (macOS Screenshot toolbar, QuickTime, OBS, Windows Game Bar), setting resolution / frame-rate / cursor / microphone, prepping a distraction-free stage, and recording in retakeable segments. Use when someone says

SkillMedev/tutorial-video-studio

Plan a product demo, feature announcement, or launch video as a beat sheet and shot list BEFORE animating - hook in the first 3s, problem, reveal, proof, CTA - with target duration and pacing per scene type, output as a JSON scene plan that remotion-compose consumes directly. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

Verwandte Skills