Communitygithub.com

atultiwari/remotion-motion-explainer

Ein vollständiges Remotion-Projekt-Template und Runbook für farbenfrohe Motion-Graphics-Erklärvideos im Stil eines ‚Incident Reports‘: Nachrichten- und Vorfall-Erklärungen, Fallstudien, Videos zu ‚Was ist schiefgelaufen und was Ärzte daraus lernen sollten‘.

Was ist remotion-motion-explainer?

Dieses Skill bietet ein komplettes, eigenständiges Remotion-Videoprojekt-Template und Runbook zur Erstellung von animierten Erklärvideos im Stil eines ‚Incident Reports‘. Es enthält das Template (`template/`), Skripte (unter anderem Kopien der Sarvam TTS- und Mastering-Skripte) und ein vollständiges Beispiel (`examples/fridge-hack/`). Entwickler können damit Nachrichten, Vorfälle oder Fallstudien visuell aufbereiten. Das Skill unterstützt einen strukturierten Workflow mit neun Gate-Schritten, von der Faktenrecherche über Szenen-Erstellung, Stills-QA, Sprachsynthese und Sound-Design bis zum finalen Rendern und der Kapitelerstellung. Es ist Teil einer Skill-Familie für die Videoproduktion und wird ergänzt durch Skills für Whiteboard-Animationen, generelle Videoproduktion und Promo-Kits. Voraussetzung ist ein installiertes Remotion-Projekt, in das das Template über ein Installationsskript kopiert wird.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/atultiwari/remotion-motion-explainer/tree/HEAD

In Ihrer bevorzugten KI fragen

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

Dokumentation

Bewegungs-Erklärvideo

Ein komplettes Videoprojekt-Template sowie das Runbook, das Kühlschränke gehackt: Was Ärzte über KI-Sicherheit wissen müssen hervorgebracht hat (11:05, 49 Szenen, Oktober 2026). Alles Nötige ist in diesem Skill enthalten: das Template (template/), dessen Skripte (einschließlich Kopien der Sarvam TTS- und Mastering-Skripte) und das ausgearbeitete Beispiel (examples/fridge-hack/). Es wird nichts auf das ursprüngliche Projektverzeichnis verwiesen.

Wann welches Skill verwenden

VideoSkill
Nachrichten, Vorfälle, Fallstudien, ‚Lehren aus X‘: Typografie, Karten, Zeitungsseiten, Anzeigendieses Skill
Gezeichnete Bilder, Stift und Hand, schrittweise Anatomie oder Diagrammeremotion-whiteboard (unverändert; erforderlich für alles Gezeichnete)
Arbeitsablauf, Behauptungen, Skript, Stimme, Gates (jedes Video)youtube-video-production (dessen motion-Modus verweist hierher)
Thumbnails, Karussells, LinkedIn/Instagram/WhatsApp-Kopien, YouTube-Uploadvideo-promo-kit

Schnellstart

node ~/.claude/skills/remotion-motion-explainer/scripts/install.mjs ~/Projects/remotion-projects/<name>
cd ~/Projects/remotion-projects/<name> && npm run dev

Das Template öffnet mit der Kühlschrank-Hack-Geschichte, damit die Optik sofort sichtbar ist. Ersetzen Sie src/data/scenes.json mit der neuen Geschichte.

Der Arbeitsablauf (Gates sind fett markiert)

  1. Zuerst die Fakten. Schreiben Sie ein Faktenblatt mit Quellen, bevor es eine Erzählung gibt. Jede on-screen Zahl benötigt einen sourceCitation.
  2. Geschichte → scenes.json. Erzählung pro Szene, Komponente + Props, Zitate. npm run estimate && npm run narration; Linten mit npm run tts:lint.
  3. Stumme Vorschau mit temporären Untertiteln. Satz-Untertitel, geschätzte Dauern. Der Eigentümer genehmigt hier die Geschichte; vorher kein TTS.
  4. Stills-QA: npm run stills, Kontaktbogen, Überlappungen beheben (references/05).
  5. Stimme: npm run tts → npm run tts:check (Whisper, jeder Take) → Neuaufnahme oder Umformulierung → npm run tts:master → npm run captions. Szenenlängen werden jetzt aus dem Audio abgeleitet.
  6. Wort-Cues: Fügen Sie {"atWord": "…"} zu den Props hinzu, deren Ereignisse auf ein Wort fallen müssen.
  7. Sound: Effekte werden aus Komponenten ausgelöst; überprüfen Sie den gesamten Mix mit einem Audio-Only-Render (Ziel −14 LUFS, ≤ −1 dBTP).
  8. Rendern nur, wenn der Eigentümer zustimmt (references/05).
  9. Kapitel (npm run chapters), dann Übergabe an video-promo-kit.

Wo die Details zu finden sind

DateiLesen bei
references/01-look-and-story.mdSchritt 1–2: die visuelle Sprache, Handlungsbogen, Motive, Schreibregeln
references/02-scene-graph.mdSchritt 2: jedes Feld von scenes.json, Wort-Cues, Übergänge
references/03-components.mdSchritt 2–4: Komponentenkatalog, Props, Layoutregeln, Hinzufügen einer Komponente
references/04-voice-and-sound.mdSchritt 5–7: Sarvam, Whisper-Check, Mastering, Untertitel, Effekte, Musik, Pegel
references/05-qa-render.mdSchritt 4, 8, 9: Stills, Kontaktbögen, Render, Verifikation, Kapitel
references/06-lessons.mdWenn etwas falsch aussieht: jeder gemachte Fehler und seine Regel
examples/fridge-hack/das ausgearbeitete Beispiel: scenes.json, Erzählskript, Status, Lehren, Stills der Optik

Unverhandelbare Regeln

  • Keine echten Logos oder Markenzeichen; Sender- und Firmennamen als reiner Text; Überschriften paraphrasiert; erfundene Grafiken mit "illustrativ" gekennzeichnet.
  • Keine Exploit-Schritte, Code oder Anleitungen für Angriffe in Sicherheitsvideos.
  • Niemals über die Zuordnung spekulieren; sagen Sie "nicht öffentlich zugeordnet zum Stand ".
  • Der Eigentümer genehmigt das Skript, das Thumbnail und den Render. Fragen Sie bei Zweifeln.

Verwandte Skills