Communitygithub.com

stanglivideo

Motion-Design-Videos per Code mit Remotion erstellen, die auf den Beat geschnitten sind und Soundeffekte enthalten, die genau auf dem Frame landen.

Was ist stanglivideo?

Diese Fähigkeit ermöglicht es KI-Agenten, vollständige Motion-Design-Videos – wie Produkt-Launch-Filme, Erklärvideos oder Social-Media-Clips – ausschließlich mit Code und der Bibliothek Remotion zu erstellen. Anders als herkömmliche Videobearbeitung wird jeder Frame als reine Zeitfunktion berechnet, wodurch das Video vollständig editierbar bleibt. Der Workflow ist stark strukturiert: Der Agent analysiert zunächst 2 bis 5 Referenzvideos des Nutzers (Frames, Spektrogramm, Lautstärke), lernt die Markenidentität des Produkts kennen, entwickelt ein Storyboard und lässt es vom Nutzer genehmigen, bevor er den ersten Frame rendert. Zu den nicht verhandelbaren Qualitätsmerkmalen gehören ehrliche Produktaussagen, die Einhaltung der Sync-Gate (jeder Sound muss exakt mit einem Bildwechsel synchron sein), eine Lautstärke von -14 LUFS und ein wahrer Spitzenwert von -2 dBFS. Das Skill unterstützt optionale Modi wie die Generierung von Fotos oder Footage-Loops mit Gemini für Elemente, die sich nicht zeichnen lassen, sowie ein „Refresh“ der Referenzgalerien. Die Ausgabe erfolgt immer als analysierter, getakteter Film, der erst nach bestandener Sync-, Lautstärke- und Bildprüfung als fertig gilt.

Funktioniert mit~Claude Code~Codex CLI✓Cursor✓Gemini CLI
npx skills add https://github.com/ilijachrchev/skills/tree/HEAD/skills/stanglivideo

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht stanglivideo?

Ein Film, der aussieht, als hätte das Produkt ihn gemacht, sich im Takt bewegt und richtig klingt: Jeder Sound auf seinem Frame, jedes Wort auf dem Bildschirm lang genug zum Lesen, nichts außerhalb des Bildes. Aus Code mit Remotion erstellt, bleibt er editierbar.

Pfade unten beziehen sich auf den Ordner dieser Fähigkeit, sofern sie nicht mit einem Filmprojektpfad beginnen. $PY ist das Python, das der Doktor ausgibt (das .venv der Fähigkeit).

Jeder Durchlauf beginnt hier

  1. Doktor. Erster Durchlauf (kein .venv oder keine taste.md in diesem Ordner): node scripts/doctor.mjs --setup. Es erstellt .venv, installiert requirements.txt und erstellt taste.md aus taste.example.md. Spätere Durchläufe: node scripts/doctor.mjs. Es prüft Node 18+, Python 3.10+ mit numpy und scipy, ein vollständiges ffmpeg und die Begleitfähigkeit. Wenn Node selbst fehlt, kann der Doktor nicht laufen: Sag es und gib die Installationszeile unten.

  2. Sage dem Benutzer klar, was fehlt. Für jedes FEHLER: eine kurze Zeile, was fehlt, warum die Fähigkeit es braucht, und der genaue Befehl, um es auf seinem System zu installieren. Dann warte, bis er sagt, dass es erledigt ist, und führe den Doktor erneut aus.

    FehltWarumWindowsMac
    Node 18+baut und rendert den Filmwinget install --id OpenJS.NodeJS.LTS -ebrew install node
    Python 3.10 bis 3.13bewertet den Sound und führt die Prüfungen durchwinget install --id Python.Python.3.12 -ebrew install [email protected]
    ffmpeg (vollständiger Build)Analyse, Kodierung, Lautstärkeprüfungenwinget install --id Gyan.FFmpeg -ebrew install ffmpeg
    BegleitfähigkeitRemotion-API-Regelnnpx skills add remotion-dev/skillsgleich

    Nach der Installation von Node, Python oder ffmpeg muss der Benutzer ein neues Terminal öffnen, damit sie im PATH sind, und dann erneut node scripts/doctor.mjs --setup ausführen. GEMINI_API_KEY ist optional: Erwähne es nur, wenn tatsächlich ein generiertes Bild oder ein Loop gewünscht wird.

  3. Begleitfähigkeit (erforderlich). remotion-best-practices, offizielle Fähigkeiten von Remotion. Nicht hier gebündelt. Verwende sie für Fragen zur Remotion-API (Medien, Schriftarten, Untertitel, Rendereinstellungen).

  4. Geschmack. Lese references/base-rules.md und taste.md (erstelle sie aus taste.example.md, falls sie noch fehlt). Dies sind die ständigen Regeln des Benutzers; bei Konflikten gewinnt taste.md.

Unverhandelbar

  • Das Design des Produkts gewinnt. Farben, Schriftart, Komponenten, Logo, Stimme und Behauptungen stammen vom Produkt. Übertrage niemals den Geschmack eines anderen Produkts, einschließlich allem in dieser Fähigkeit, das ihrem Design widerspricht.
  • Jeder Frame ist eine reine Funktion der Zeit. Keine CSS-Übergänge oder Keyframes, keine Timer, kein Date.now(), kein Math.random (gesäter rand), kein zwischen Frames übertragener Zustand.
  • Eine einzige Timing-Quelle. src/films/<film>/cues.json jedes Films enthält alle Cue-Zeiten. Das TSX des Films importiert es und die Bewertung liest es (sound/cues.py). Keines von beiden enthält jemals eine Literalzeit.
  • Messen, nie raten. Beats aus dem Audio, Positionen aus dem Debug-Overlay, Farben aus dekodierten Pixeln.
  • Ehrliche Behauptungen. Zeige nur, was das Produkt tut. Die Verbotsliste wird vom Benutzer genehmigt, bevor der Text geschrieben wird.
  • Vorher fragen, bevor du irgendetwas committest, pushst oder veröffentlichst, und vor jedem kostenpflichtigen API-Aufruf.
  • Keine Geviert- oder Halbgeviertstriche in Texten, Dateien oder Nachrichten.

Workflow und Genehmigungstore

Jeder STOPP ist ein hartes Tor: Fragen (AskUserQuestion), warten und die Antwort im BRAND.md des Projekts aufzeichnen.

  1. Aufnahme (erforderlich). Frage nach 2 bis 5 Videos, die dem Benutzer gefallen, jeweils eine Zeile, was ihnen gefällt, einschließlich des Sounds. Führe node scripts/intake/intake.mjs <Projekt>/intake <Videos...> aus und lese jedes Blatt. Siehe references/intake.md.
  2. Entdeckung. Lerne das Produkt kennen: Regeldateien, Tokens (hell und dunkel), Komponenten, Logo, Landingpage, echte Screens und Texte, Behauptungen. Siehe references/discovery.md.
  3. Interview. Das Briefing und die Zutaten. Siehe references/interview.md. Dann:
    • STOPP: hell oder dunkel. Pro Film, wenn es mehrere gibt; ein Set mischt beide, wenn das Produkt beide Themes hat.
    • STOPP: verbotene Behauptungen. Zeige, was die Filme behaupten werden, und die Liste dessen, was sie niemals sagen dürfen (aus dem Code, der Website und dem Benutzer). Warte auf die Genehmigung beider Listen.
  4. Marken-Kit. Fülle templates/BRAND.md in das Projekt. Jede Regel zitiert ihre Quelle.
  5. Musik. Durchsuchen und Kandidaten messen. STOPP: Musikauswahl. Siehe references/music.md.
  6. Geschichte. Fülle templates/film-prompt.md; schreibe den Beat-Plan als cues.json. Siehe references/story.md und references/ingredients.md.
  7. Projekt. node scripts/new-project.mjs <Verz>, npm install. Ein Kit in src/kit/; ein Ordner pro Film. Siehe references/engine.md.
  8. Storyboard. Baue die Szenen, rendere 5 bis 8 Standbilder pro Film (im Projekt: node scripts/stills.mjs), kachel sie. STOPP: Storyboard-Genehmigung vor jedem vollständigen Render. Siehe references/review.md.
  9. Render. Im Projekt: node scripts/render.mjs <Composition> out/<film>.mp4 (Sicherheit eingebaut). Kontaktbogen, Aussehen, Beheben.
  10. Bewertung. Im Projekt: sound/scores/<film>.py aus cues.json; $PY sound/render.py <Film>. Siehe references/sound-rules.md.
  11. Tor (obligatorisch). Im Projekt: $PY scripts/gate.py <Film>. Nichts gilt als fertig, bis es bestanden ist. Siehe references/render.md.
  12. Auslieferung. Pfade, Längen, Lautstärke, Spitzenwert, Testergebnis, was geändert wurde. Behalte jede Version.

Das Sync-Tor

  • Whooshes werden platziert an ihrem Peak auf dem schnellsten Frame der Bewegung (align="peak"; kit/speed.ts findet den schnellsten Frame einer Kamerabewegung; ein E.out-Eingang ist am schnellsten an seinem Anfang, ein E.exit-Verlassen an seinem Ende).
  • Pops landen auf dem Frame, auf dem das Element landet. Chings auf dem Frame, an dem die endgültige Zahl erscheint.
  • Risers enden auf dem Schlag (align="end").
  • Jeder Sound trägt ein Label, das sein On-Screen-Ereignis benennt.
  • Nach jedem Mix: sound/check.py (kein Sound vor seiner Bildänderung), scripts/final-check.py (-14 LUFS innerhalb von 1 LU, wahrer Spitzenwert -2 dBFS oder niedriger, Lautstärkebereich 4 LU oder mehr, keine Stille, Bild identisch mit dem stummen Render, gleiche Längen) und scripts/verify.py, alle ausgeführt von scripts/gate.py. Eine Flagge wird korrigiert, indem der Sound (oder der Cue) verschoben wird, niemals indem er ausgenommen wird, ohne sein Blatt anzusehen.

Geschmacksgedächtnis

  • references/base-rules.md wird mit der Fähigkeit ausgeliefert: Korrekturen aus echten Filmen, als allgemeine Regeln.
  • taste.md (in .gitignore, aus taste.example.md) gehört dieser Maschine. Jede neue Korrektur, die der Benutzer gibt, wird dort als allgemeine Regel eingetragen, bevor du den Film reparierst, formuliert, so dass sie das Problem in jedem Film verhindert hätte. Lies sie zu Beginn jedes Durchlaufs.
  • Eine Regel, die für mehrere Filme gilt, kann per Pull-Request zu dieser Fähigkeit in base-rules.md aufgenommen werden, niemals durch eine stille Bearbeitung.

Sicherheit (in die Skripte eingebaut)

templates/project/scripts/safety.mjs, verwendet von jedem Bundle und Render: Freier Speicher wird zuerst geprüft (mindestens 10 GB), maximal zwei Render laufen gleichzeitig, temporäre Bundles werden nach jedem Job gelöscht und veraltete davor. Rendere mit Gleichzeitigkeit 1 auf einem Rechner mit wenig Speicher. Stoppe nur Prozesse, die du gestartet hast.

Optionale Modi

  • Generierte Medien. Nur für das, was Code nicht zeichnen kann: echte Fotos, fotografische Texturen, Ausschnitte und gefilmte Hintergründe (Seide, Flüssigkeit, Licht), wenn der Benutzer einen echten gefilmten Look möchte. scripts/gemini/image.mjs nimmt Referenzbilder, damit die Ausgaben zu einem gewählten Look passen, plus Seitenverhältnis, Größe, Größenänderung und Chroma-Key; scripts/gemini/video.mjs erstellt Veo-Clips aus einem farblich angepassten ersten Frame (oder nativen Loops). Schlüssel von GEMINI_API_KEY nur in der Umgebung; jeder Aufruf druckt seine Kosten und läuft nur nach einem Ja des Benutzers. Siehe references/gemini.md.
  • Medienwerkzeuge (kostenlos, jeder Clip). scripts/media/loop.py verwandelt einen Clip in einen nahtlosen Hintergrund-Loop (Nahtsuche, exakte Überblendung, Interpolation auf die Bildrate des Films, Loop plus Standbild plus Standbildsequenz plus Grenzblatt); LoopBackground im Kit platziert es unter der Bewegungsebene aus der cues.json des Films. scripts/media/clip.py prüft, kodiert neu in das Projektformat, beschneidet Kanten und extrahiert Standbilder oder ein Blatt. scripts/media/imgpost.py keyt und ändert die Größe von Bildern.
  • Aktualisierung. Wenn der Benutzer fragt: Untersuche prompt-motion.com, skillry.dev und das awesome-opus5-5-videos-Repo auf neue Einträge und schlage Referenzaktualisierungen per PR vor. Siehe references/refresh.md.

Qualitätsuntergrenze (immer)

  • Nur die eigenen Oberflächen, Farben, Ränder und Schattierungen des Produkts. Keine erfundenen Paneele oder Farbtönungen.
  • Lesbar in der Auslieferungsgröße. Weniger Wörter schlagen kleinere Wörter. Zeilen, die Leute lesen müssen, erscheinen mit etwa 0,2 s pro Wort und halten 2 s oder länger.
  • Jede Karte und das Abschlusszeichen vollständig innerhalb des Rahmens für jeden Frame jeder Bewegung.
  • Halte jede Einstellung 5 bis 6 s mit einem langsamen Push; wenn es sich hektisch anfühlt, schneide einen Bildschirm, anstatt zu beschleunigen.
  • Text wird niemals von einem Cursor oder Chip verdeckt, kreuzt niemals anderen Text, zentriert sich niemals neu, während er aufgebaut wird.
  • Auf jedem Beat passiert etwas; Szenengrenzen landen auf Takten; der letzte Frame eines Loops ist gleich seinem ersten.
  • In einem Set teilen keine zwei Filme eine Struktur; alles, was nebeneinander gehalten wird, ist exakt zentriert.
  • Keine Effekte, die die Sprache des Produkts nicht verwendet: Glühen, Partikel, Klickringe, federnde Verlangsamung, Shader.

Wissen

Fallen, die echte Zeit kosten

  • Remotion-Standbilder leiten keine Konsolenprotokolle weiter: Drucke Messungen in den Frame (kit/debug.tsx).
  • npx remotion still bündelt bei jedem Aufruf neu: Verwende scripts/stills.mjs (ein Bundle, viele Frames).
  • Remotions gebündeltes ffmpeg hat kein tmix, select oder tile: Verwende das System-ffmpeg, das der Doktor geprüft hat.
  • Farbbereich: Dekodiere Frame 0 jeder Auslieferung und überprüfe es (verify.py --bg); ein mit begrenztem Bereich gelesener Master als voller Bereich hebt dunkle Hintergründe auf Grau an.
  • interpolateColors kann color-mix() nicht parsen: Hex für alles, was animiert wird.
  • Asynchrone Bildkomponenten können in einem Frame leer rendern: Verwende Remotion <Img>.
  • Ein aus der Zeit berechneter Index ist -1 kurz vor seinem Abschnitt: Begrenze ihn (safeIndex).
  • will-change auf alles, was die Kamera skaliert, macht seinen Text unscharf.
  • Eine Wort-Enthüllungsmaske schneidet die letzten Buchstaben ohne Polsterung ab: Verwende kit/components.tsx WordReveal.
  • Videodekodierung innerhalb von Rendern ist unzuverlässig: Konvertiere Loops in Bildsequenzen.

Individual skills in this repo

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

Verwandte Skills