Communitygithub.com

octaviosilva2/claude-video-motion

Erzeugt deterministische Videos mit HyperFrames – HTML/CSS-Komposition, aufgenommen in Chrome/FFmpeg, mit deklariertem Format, fps, Dauer und Auflösung sowie autorisiertem Rendervorgang. Verwende dies, wenn die Ausgabe eine gerenderte Mediendatei (MP4, WebM, MOV, PNG) ist, wenn der Nutzer ein Videostück, Motion, exportierte Animation oder reproduzierbare Komposition anfordert. Nicht verwenden für bereits existierendes Video, das innerhalb einer Website eingebettet wird (das ist ein Web-Asset) oder für interaktive animierte UI (das ist normales Frontend-Web).

Was ist claude-video-motion?

Diese Skill ermöglicht die deterministische Videoproduktion mittels HyperFrames, einem leistungsstarken Tool, das HTML/CSS-Kompositionen in Chrome rendert und mit FFmpeg in gängige Videoformate (MP4, WebM, MOV, PNG) umwandelt. Der entscheidende Unterschied zu herkömmlichem Webvideo: Die Ausgabe ist immer eine eigenständige, reproduzierbare Mediendatei – keine interaktive UI. Die Skill definiert klare Gates: Alle Parameter (Auflösung, fps, Dauer, Format) müssen vorab mit dem Nutzer geklärt werden, es gibt keine Standardwerte. Der Rendervorgang ist nie automatisch, sondern erfordert explizite Autorisierung, da er Rechenzeit und möglicherweise Kosten verursacht. Die Skill unterstützt die Plattformen Claude Code, Cursor und Codex. Vor dem Start muss die Infrastruktur (Node, Chrome, FFmpeg, HyperFrames-Paket) bestätigt sein. Die Skill legt großen Wert auf Reproduzierbarkeit – dafür müssen HyperFrames-Version, Chrome, FFmpeg, Codecs, Auflösung und Assets festgeschrieben werden. Musik- und Toneffekte werden nur mit Nutzererlaubnis heruntergeladen, Sprachaufnahmen (Narration) werden nicht generiert, sondern als Text bereitgestellt, den der Nutzer extern erstellen lässt.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/octaviosilva2/claude-video-motion/tree/HEAD/skill/frontend-video

In Ihrer bevorzugten KI fragen

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

Dokumentation

Die Hürde – vor jeder Komposition

Wörtlicher Auslöser: Die Ausgabe IST eine gerenderte Mediendatei. MP4, WebM, MOV, PNG. Format der Ausgabe, niemals das Erscheinungsbild.

Diese Skill wird nicht aktiviert:

  • Video, das auf einer Website eingebettet ist — Hero, Hintergrund, Testimonial. Es ist ein gewöhnliches Web-Asset.
  • Animierte UI, die wie ein Video aussieht, aber interaktiv ist — es bleibt Frontend-Web.

Die Unterscheidung liegt im Ausgabeformat. Wenn das Ergebnis im Browser geöffnet wird und auf Klicks reagiert, ist es nicht diese Skill.

Format, Auflösung, fps und Dauer haben keinen Standardwert

Keiner der vier. Die Wahl von „1080p 30fps, weil das üblich ist“ ist genau das, wofür die Hürde da ist, um es zu verhindern. Die vier werden dem Nutzer vor Beginn der Komposition vorgelegt (verwende AskUserQuestion), mit der Empfehlung für den Zielkanal (z. B. vertikal 1080×1920 für Reels/TikTok/Shorts).

Betriebskosten – vor Zusage bestätigen

HyperFrames ist kein Import: Es ist ein Produktionsprozess. Es setzt Node, Chrome und FFmpeg voraus, und die Aufnahme ist rechenintensiv.

Stelle sicher, dass die Infrastruktur vorhanden ist, bevor du die Route zusagst. Es ist zu spät, wenn beim Rendern auffällt, dass FFmpeg fehlt, nachdem die gesamte Komposition geschrieben wurde.

Die Installation aller Abhängigkeiten (Node, FFmpeg, Chrome, das Paket hyperframes) ist die Entscheidung des Nutzers. Nenne, was fehlt und den Befehl, und warte auf die Bestätigung.

Rendern ist niemals automatisch

Kein Rendervorgang wird ohne explizite Autorisierung des Nutzers ausgeführt. Rendern verbraucht Rechenzeit und, wenn Mediengenerierung involviert ist, echtes Geld.

Wenn ein Asset fehlt und die Alternative darin besteht, es zu generieren: Nenne, was fehlt und was generiert würde – und stoppe dort.

Wie man es verwendet

frontend-video/
├── SKILL.md                ← diese Datei. Die EINZIGE, die immer gelesen wird
└── referenzen/
    ├── hyperframes.md      die Hürde, Format/fps/Dauer, deterministische Zeit,
    │                       Adapter, Untertitel, Render-Autorisierung
    ├── direcao-visual.md   Tokens mit schriftlicher Begründung, Anti-Generisch, zerlegte Referenz
    ├── assets.md           Herkunft, Lizenz, Optimierung – hier ist das Asset die Ausgabe
    └── validacao.md        die auf die Medien anwendbaren Hürden
Deine AufgabeÖffne
Format, Auflösung, fps, Dauer festlegenhyperframes.md §3
Inhalt, Schriftarten, Untertitel, Rechtehyperframes.md §4
Deterministische Zeit, reproduzierbare Ausgabe, Szenen-Adapterhyperframes.md §5
Barrierefreiheit und Performance des Stückshyperframes.md §6
Render autorisierenhyperframes.md §7
Ästhetische Richtung der Kompositiondirecao-visual.md
Lizenz für Bild, Schrift, Musik, Effekt, Erzählungassets.md
Ausgabe abschließenvalidacao.md

Immer ignorieren: SEO, indexierbares DOM, Navigationspfade und Anwendungszustände – deterministische Medien haben keinen von diesen vieren. Laufzeit-Web als finale Ausgabe trifft ebenfalls nicht zu: Hier ist der Browser ein Aufnahmewerkzeug, nicht das Ziel.

Musik, Effekte und Erzählung

  • Musik und Toneffekte: Lade sie nur mit der Zustimmung des Nutzers herunter, Datei für Datei. Die Lizenz muss die beabsichtigte Nutzung (ggf. kommerziell) erlauben. Notiere Herkunft, Autor und Lizenz jedes Tracks. Details in assets.md.
  • Erzählung (Narration): Die Skill generiert keine Stimme. Schreibe den Text der Erzählung in kurzen Blöcken und bitte den Nutzer, ihn mit seinem Sprachdienst (z. B. ElevenLabs) zu generieren und die Datei zu senden. Sprachgenerierung kostet Geld: Nenne den Block und stoppe dort.

Reproduzierbarkeit – was „deterministisch“ wirklich erfordert

Die Engine macht die Komposition nach Zeit durchsuchbar. Das allein garantiert keine identische Ausgabe.

Eine byte-genau reproduzierbare Datei zu versprechen, erfordert, all diese festzulegen: HyperFrames, Chrome, FFmpeg, Schriftarten, Assets, Codec und Flags, Auflösung, fps, Dauer und Umgebung. Sogar ein Commit ohne dieses Lock autorisiert das Versprechen nicht.

Geprüfte Quelle: Repository heygen-com/hyperframes, Commit af1cb1c10da33bade100db8233435c7591b7c0bc, Hauptpakete 0.8.17 in diesem Commit, Lizenz Apache-2.0 im Stammverzeichnis und im CLI. Verifiziert am 2026-08-28. Das exemplo-p01/ dieses Repositories wurde mit der 0.8.166 gerendert, mit der Version im package.json festgeschrieben. Fixiere die Version in deinem Projekt und überprüfe erneut, wenn die Komposition auf Fähigkeiten angewiesen ist, die nicht durch die Beschreibungen abgedeckt sind.

Was immer gilt

  1. Echter Inhalt, niemals erfunden – kein Platzhalter, der wie fertig aussieht.
  2. Untertitel und Kontrast sind Teil der Ausgabe, kein Extra.
  3. Validierung an der echten Ausgabe, niemals an der Vorschau. Was die Vorschau zeigt und was die endgültige Datei enthält, weicht ab – Codec, Farbe und Timing unterscheiden sich.
  4. Autorenszene-Code bleibt für die eigene Bereinigung verantwortlich. Eine Three/WebGL-Szene innerhalb der Komposition benötigt ein Teardown wie überall sonst.

Verwandte Skills