Communitygithub.com

code-film

Ein Bewegtfilm, dessen jedes Bild eine reine Funktion seines Zeitstempels ist: aus Code gerendert, frame-geprüft.

Was ist code-film?

code-film ist eine Fähigkeit (Skill) für KI-Agenten, die es ermöglicht, kurze Bewegtfilme (z. B. Produkt-Launch-Clips, Showreels, kinetische Typografie, animierte Diagramme oder Loop-Animationen) direkt aus Code zu generieren. Jeder Frame wird deterministisch aus einem Zeitstempel berechnet – die Seite stellt `window.__seek(t)` bereit, der Agent nutzt `ui:render --profile film`, um jeden Frame zu erfassen, die Sequenz auf Determinismus zu prüfen, sie auf Photosicherheit (Strobe-Effekte) zu testen und schließlich mit ffmpeg zu codieren. Der Skill vermeidet unnötige Abhängigkeiten von kostenpflichtigen Videoanbietern und Live-Wiedergabe, indem er auf einem klaren Frame-Vertrag basiert, der in separaten Referenzdateien spezifiziert ist. Die Fähigkeit unterstützt Plattformen wie Claude Code, Cursor und andere Agenten-Tools, die über eine entsprechende Render-Schnittstelle verfügen. Sie ist ideal für Entwickler, die wiederholbare, überprüfbare Animationen aus eigenem Codematerial erstellen möchten, ohne auf externe Videodienste angewiesen zu sein.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/event4u-app/agent-config/tree/HEAD/src/skills/code-film

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht code-film?

Ein Bewegtfilm, dessen jedes Bild eine reine Funktion seines Zeitstempels ist: Eine Seite stellt window.__seek(t) bereit, ui:render --profile film sucht jeden Frame auf, erfasst ihn, beweist die Determinismus der Sequenz, prüft sie gegen den Photosicherheits-Schwellenwert und das deklarierte Format und codiert sie mit ffmpeg. Kein kostenpflichtiger Videoanbieter, keine Live-Wiedergabe. Die Werte für die Filmbewegung befinden sich in references/film-motion.md; der Seitenvertrag in film-page.

Wann verwenden

  • Der Benutzer wünscht einen kurzen Bewegtfilm aus eigenem Material – ein Produkt-Launch-Clip, eine Showreel, kinetische Typografie, ein animiertes Diagramm, ein Prozesserklärer, eine Loop-Markenanimation.
  • Der Film muss zweimal identisch rendern, auf einem Beat oder einem deklarierten Tempo sitzen oder als MP4 in einer bestimmten Größe ausgeliefert werden.

Wann NICHT verwenden

  • Eine Aufforderung an einen generativen Videoanbieter (Veo, Kling, Sora) → motion-choreographer.
  • Eine Animation innerhalb einer UI – Hover, Scroll-Reveal, Seitenübergang → fe-design § Motion.
  • Schneiden oder Untertiteln von vorhandenem Filmmaterial → das /video-Cluster.
  • Ein einzelnes statisches oder gelooptes SVG-Asset → svg-authoring.

Vorgehen

  1. Eingaben. Frage nur das, was das Rezept als variabel auflistet: Zweck, Format und Pixelgröße, Palette als Hex, eine Schriftart, Audio (keine, eine mitgelieferte Datei oder ein deklariertes Tempo), Endkarte. Bei „Mach einfach“ gib die von Dir verwendeten Standardwerte an.

  2. Richtung. Wähle ein Rezept aus dem Korpus aus und nenne das eine Konzept, dem jeder Einstellung dient:

    node <skills-root>/corpus-grounding/scripts/ground.mjs search \
      --manifest <skills-root>/code-film/data/manifest.json "<die Kurzbeschreibung>"
    
  3. Verbote. Hole die Anzeichen für die Kurzbeschreibung (--domain tell) und schreibe jedes Verbot mit seiner Alternative in den Plan.

  4. Raster. Tempo und Takte aus der gelieferten Spur (allin1.sh wenn installiert; andernfalls ein deklariertes Tempo, als deklariert gemeldet), dann eine geordnete Einstellungsliste mit Zeiten. Halte jeden Text für seine Lesedauer (3 Wörter pro Sekunde).

  5. Nur Erklärer – Behauptungen. Liste jede abgebildete Zahl, jeden Namen und jedes Datum mit seiner Quelle auf oder markiere sie als die des Benutzers. Erfinde keine.

  6. Bauen. Schreibe die Seite nach dem Seek-Vertrag: window.__seek(t), window.__videoMeta, keine Wanduhr, gesäter Zufall, lokale Schriftarten. Wähle den Renderer aus --domain renderer; einfaches HTML ist die Standardeinstellung und ein lizenzierter Renderer wird erst nach Beantwortung seiner Lizenzfrage vorgeschlagen.

  7. Kontaktabzug. Einmal rendern, contact.png lesen, Unordnung, Überlappungen und versetztes Timing beheben. Maximal drei Durchläufe.

  8. Rendern.

    agent-config ui:render film/index.html --profile film --out film/out.mp4 [--audio track.wav]
    

    Exit 0 ist sauber, 2 enthält Befunde (Determinismus, Blitze, Totzeit, Format, Netzwerk), 1 bedeutet nicht bewertet, 3 bedeutet kein Browser-Treiber.

  9. Bericht. Zitiere das Manifest: die Seek-Form, jede Prüfung als ran oder skipped: <reason>, die Befunde und verification. Sage verified nur, wenn das Manifest es angibt und sein Datei-Digest die von Dir gelieferte Datei ist.

Status – Bedeutung der einzelnen Wörter

  • verified – Jede anwendbare Prüfung wurde auf dieser Maschine ausgeführt und der Digest der codierten Datei ist der aufgezeichnete. Es sagt nichts darüber aus, ob der Film gut ist.
  • static-only – Frames wurden erfasst und gehasht, aber eine Prüfung, die ffmpeg benötigt (Blitzschwellwert, Codierung, Format), wurde nicht ausgeführt. Nenne das fehlende Werkzeug.
  • unassessed – Es wurde nichts gesehen: kein Browser-Treiber, keine Seek-Form oder keine deklarierte Länge. Nenne die Installation oder die fehlende Deklaration.

Ausgabeformat

  1. Der Film-Pfad und sein SHA-256 aus dem Manifest.
  2. Die Prüfungstabelle (ran / skipped: …) und jeder Befund.
  3. Der Pfad zum Kontaktabzug.
  4. Bei einem Erklärer die Liste der Behauptungen mit Quellen.

Stolperfallen

  • Eine Seite, die Math.random oder Date.now verwendet, rendert im umgekehrten Durchlauf anders; das Manifest nennt den ersten abweichenden Frame. Säe von t aus.
  • Der Blitzschwellwert ist ein Sicherheitsschwellwert: Ein Stroboskop fällt durch und keine Flagge senkt ihn.
  • Das Filmprofil führt die Skripte der Seite mit deaktiviertem Netzwerk aus. Eine Schriftart oder ein Bild, das von einem CDN geholt wird, lädt nicht – liefere es neben der Seite aus.
  • Determinismus wird pro Maschine bewiesen; Schriftarten und GPUs unterscheiden sich zwischen Maschinen.
  • Eine Seite, die auf einem Zeitachsen-Framework aufbaut, wird über window.__timelines (angehaltene, durchsuchbare Einträge) angezeigt; eingebettetes Filmmaterial wird bei t − data-start gehalten. Codiere Filmmaterial rein-intra (-g 1), sonst landet eine Suche zwischen Keyframes.

Nicht tun

  • Füge KEINEN Prompt-Text aus einer externen Galerie in einen Plan oder ein Rezept ein – schreibe ihn frisch aus dem Korpus.
  • Bündele oder installiere KEINEN Renderer ohne Nachfrage; erkenne und leite weiter.
  • Erkläre einen Film NICHT allein aus dem Code für fertig – die Frames entscheiden.
  • Bezeichne einen Film NICHT als gut, markenkonform oder „weniger KI“; berichte, was gemessen wurde.

Siehe auch

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills