Changroro/code-video

Code Video

<skill> ist der Ordner, der diese SKILL.md enthält. Die Engine befindet sich in <skill>/template/:

• kit.js: handgezeichnete Linien, Text und kinetische Typografie, Kamera, Übergänge, Pixel-Sprites, Minis, Bild-Pixelierung, Videoclips, Telefon- und Cursor-Props, Bewegungsunschärfe, useFonts
• Stilmodule für die genannten Looks und Formate: handdrawn.js, motion.js, sand.js, lyric.js, beat.js (jedes zeichnet die charakteristischen Elemente des Originals)
• Look-Module arcade.js, terminal.js, thermal.js, transit.js, blueprint.js: eine gemeinsame Szenen-API plus das charakteristische Format-Szenen jedes Looks (references/looks.md)
• minis-ai.js: vorgefertigte Minis für KI-bezogene Themen (Claude, Codex, Gemini, DeepSeek, Grok, Qwen)
• render.mjs: paralleles Rendern mit Headless Chrome; mischt audio.wav bei, wenn vorhanden
• main.js: Szenen-Grundgerüst

<skill>/scripts/audio.py synthetisiert Musik und Soundeffekte, <skill>/scripts/beats.py findet das Beat-Raster eines Songs und <skill>/scripts/reference_sheet.py legt die Frames eines genannten Originals über deine.

Erforderliche Tools: node/npm, ffmpeg mit libx264, Google Chrome und uv. Wenn eines fehlt, stoppen und sagen, welches.

for c in node npm ffmpeg uv; do command -v $c >/dev/null || echo "missing: $c"; done; ffmpeg -hide_banner -encoders | grep -q libx264 || echo "missing: libx264"

0. Nach Look und Format fragen, dann nach den Einstellungen

Der Look ist nur der Zeichenstil; das Format ist die Struktur der Geschichte. Jeder Look funktioniert mit jedem Format, außer dass die Lyric- und Beat-Formate ihren eigenen Look mitbringen, es sei denn, der Benutzer wünscht einen anderen. Frage zuerst nach beidem in einer kurzen Nachricht mit zwei nummerierten Listen (mehr Optionen, als eine Frage fassen kann). Überspringe, was der Benutzer bereits genannt hat, und schlage ein Format basierend auf dem Thema vor (ein Vergleich legt Versus nahe, eine Aufzählung legt eine Routenkarte nahe usw.).

Looks:

Look	Gefühl	Standard-Sound	Leitfaden	Quelle
1. Handgezeichnet + 8-Bit-Minis (Standard)	verspielt, skizzenhaft	keiner	styles/handdrawn.md	@nahiddotai
2. Marken-Motion-Grafiken	sauber, offiziell	keiner	styles/motion.md	@digitalstrategyai
3. Sandkunst	warm, geschichtenartig	Musik und Effekte	styles/sand.md	@Michaelzsguo
4. 16-Bit-Arcade	Spiel, energiegeladen	Chiptune-Musik und Hits	looks.md	original
5. CRT-Terminal	Entwickler, Retro	Tastenanschläge, weiches Pad	looks.md	original
6. Thermodruck	gedruckt, haptisch	Druckergeräusche, Stempel	looks.md	original
7. Transitkarte	diagrammartig, ordentlich	Glockenspiele, Züge	looks.md	original
8. Blaupause	technisch, präzise	Zeichengeräusche	looks.md	original

Formate (Details in references/formats.md):

Format	Struktur	Quelle
1. Standard-Promo (Standard)	Aufhänger → Titel → Schritte → große Zahl → Ende	original
2. Versus	Runden zwischen zwei Optionen, dann Auszählung	original
3. Session	Befehle und Ausgaben, die die Verwendung zeigen	original
4. Quittung	aufgelistete Positionen, Gesamtsumme, Stempel	original
5. Routenkarte	Linien, Stationen, Umsteigemöglichkeiten	original
6. Spezifikationsblatt	Teile, jedes mit einer Spezifikation	original
7. Lyrik-Musikvideo (eigener Look)	ein Originalsong, ein Fakt und ein Diagramm pro Zeile	@goodside
8. Beat-synchronisiertes Footage (eigener Look)	echte Clips, geschnitten auf die Beats eines Songs: Wand, Karussell, Telefon	@twoclipping

Wenn du Looks und Formate auflistest, nenne die Originalquelle jedes genannten mit seinem Link.

Frage dann nach den Einstellungen in einem einzigen AskUserQuestion-Aufruf. Überspringe alles, was der Benutzer bereits gesagt hat, und setze die empfohlene Option an die erste Stelle.

• Länge: 30 s / 15 s / 45 s / 60 s
• Frame: 16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
• Charaktere: Logo-Maskottchen + Themen-Minis / benutzerdefinierte Minis / nur Logo-Maskottchen / keine
• Bildschirmsprache: die Sprache dieser Konversation / Englisch / beide

Charaktere nehmen die Form des Looks an: 8-Bit-Sprites, Sandsilhouetten, Pixel-Helden oder flache Symbole. Minis sind ein unterstützender Cast, der zum Thema passt. Verwende den Cast des Benutzers, wenn er einen nennt. Wähle andernfalls einen Cast aus der Recherche aus und schlage ihn im Plan vor (siehe „Minis“ in references/storyboard.md).

Verwende diese Standardeinstellungen für alles, was du nicht gefragt hast, und gib sie im Plan an:

• 30 fps (60 fps mit Bewegungsunschärfe für das Beat-Format), H.264 MP4, maximal 10 MB pro 30 s (etwas mehr bei Ton)
• Sound wie für den Look aufgeführt; die Lyric- und Beat-Formate haben immer Musik. Es gibt keine gesungenen Vocals.

Regeln für jeden Look und jedes Format

• Genannte Looks reproduzieren das Original. Öffne vor der Planung den Leitfaden und betrachte seine Referenzframes <skill>/docs/styles/<key>.jpg mit dem Read-Tool. Jedes Element in der Signaturtabelle des Leitfadens muss auf dem Bildschirm erscheinen; die Tabelle ist eine Anforderung, kein Menü. Extras kommen nach der Signatur, niemals an ihrer Stelle.
• Sprache: Jeder Text auf dem Bildschirm folgt der Einstellung für die Bildschirmsprache, einschließlich Beschriftungen, HUD, Liedtexten, Quittungen, Terminalausgaben und der Endkarte.
• Thema aus der Recherche: Die Palette stammt von den echten Farben der Marke (CI-Seite, Site-CSS oder Logo-Pixel) und die Schriftarten von der Marke, wo möglich. Zeige die Palette als Hex-Werte mit ihrer Quelle im Plan. Looks mit einem festen Material oder Hintergrund (Sand, dunkles Bewegungsfeld, Terminalgrün, Thermopapier, Blaupausenblau) behalten diesen bei und tragen die Marke im Logo, einem Akzent und der Endkarte.
• Zahlen: Jede Zahl hat eine Quelle. Berechne Alter und „N Jahre“ anhand des Gründungsdatums, anstatt eine alte „N Jahre“-Zeile von der Website zu kopieren. Erfinde keine UI-Anzeigen oder Beispielstatistiken; verwende reale Werte oder lasse sie weg.
• Quellenangabe: Genannte Looks und Formate nennen den Schöpfer, dessen Idee sie adaptieren. Behalte diese Quellenangaben bei, wenn du einen Leitfaden änderst.
• Warte auf deine eigene Arbeit. Führe Renderings im Vordergrund mit einem langen Bash-Timeout (bis zu 600000 ms) aus. Wenn du Agents oder Befehle im Hintergrund startest, warte auf ihre Ergebnisse, bevor du deine Runde beendest: In einer nicht interaktiven Ausführung weckt dich nichts wieder auf.

1. Recherche

Befolge references/research.md.

• Halte es proportional: Für ein Video unter einer Minute reichen etwa 10 Fakten mit Quellenangabe und die Marken-Assets. Gib einem Read-Only-Agent einen engen Auftrag (die Fragen, die Seiten, ein Limit von etwa 15 Abrufen) und führe unabhängige Suchen parallel aus.
• Überprüfe die Schlagzeilenzahlen selbst mit dem Originalsatz.
• Wenn Quellen bei einer Zahl uneins sind, frage den Benutzer, welche verwendet werden soll.

2. Planungsgenehmigung

Zeige Folgendes und hole die Genehmigung ein, bevor du den Arbeitsordner erstellst:

• Recherchezusammenfassung mit Quellenlinks
• Look und Format sowie die Szenen-Zeitleiste unter Verwendung der Muster und Zeitangaben in ihren Leitfäden
• für einen genannten Look oder ein genanntes Format: seine Signaturtabelle mit der Szene, die jedes Element zeigt
• Palette (Hex-Werte und woher jeder stammt) und Schriftarten
• Soundplan, wenn der Look oder das Format Sound hat: Tempo, Abschnitte und Cues
• verwendete und verworfene Zahlen, Asset-Liste (Logo-URL, Schriftarten, Charaktere, Clips, Song-Lizenz), Speicherort des Arbeitsordners

Wenn der Benutzer Szenen oder Schwerpunkte ändert, wiederhole den überarbeiteten Ablauf einmal, dann fahre fort.

3. Bauen

cp -R <skill>/template <work-folder>/<name>-video && cd <work-folder>/<name>-video
chmod -R u+w .   # Das installierte Skill kann schreibgeschützt sein, und cp behält seine Modi bei
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<offizielle Logo-URL>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png

• index.html: Größe, fps und Länge in window.VIDEO setzen; die vom Leitfaden genannten Schriftarten mit @font-face deklarieren (und nur diese); das Stilmodul für einen genannten Look oder ein genanntes Format laden (handdrawn.js, motion.js, sand.js, lyric.js, beat.js) oder ein Look-Modul für Looks 4–8 (seine Schriftarten werden durch useFonts(LOOK.fonts) geladen).
• Mit einem Look-Modul: Szenen aus der Szenen-API und dem charakteristischen Format des Formats erstellen (references/looks.md); Markenfarben auf LOOK.colors setzen.
• main.js: THEME, Szenenfunktionen und boot(). Die API befindet sich in references/kit-api.md.
• Das echte Logo und die Wortmarke-Dateien verwenden.
• Das Logo-Maskottchen als drawPixels-Sprite zeichnen (oder als Silhouette im Sand-Look).
• Minis in MINIS registrieren und mit drawMini zeichnen. Für KI-bezogene Themen minis-ai.js laden und nur die fehlenden Charaktere zeichnen.
• Dem Benutzer frühzeitig ein Standbild der Charakteraufstellung zeigen und bestätigen lassen.
• Kopien und Zahlen als Konstanten am Anfang von main.js halten. Für zwei Versionen (eine ausstehende Zahl, zwei Sprachen) mit einem URL-Parameter verzweigen und jede mit QUERY=lang=ko node render.mjs video … rendern.
• Sound: audio.json mit denselben Szenenzeiten wie main.js schreiben, dann uv run --with numpy --with scipy python <skill>/scripts/audio.py audio.json audio.wav. Für das Beat-Format zuerst beats.py auf den Song anwenden und auf dessen Raster schneiden.

4. Qualitätssicherung

Befolge references/qa-checklist.md.

1. Standbilder rendern mit node render.mjs stills <Mitten-Szenenzeiten und Zeiten kurz vor und nach jedem Übergang>.
2. Überprüfungsbögen erstellen mit uv run --with pillow python <skill>/scripts/contact_sheet.py stills <temporärer-ordner> und sie ansehen.
3. Gefundene Fehler beheben.
4. Das Video einmal rendern mit CRF=25 node render.mjs video <Name>.mp4, die Übergangsframes und alle 2 s einen Frame extrahieren und die Dateigröße überprüfen. Bei Ton den Audio-Stream, die Lautstärke und das Timing der Cues überprüfen.
5. Für einen genannten Look oder ein genanntes Format: uv run --with pillow python <skill>/scripts/reference_sheet.py <key> <Name>.mp4 <temp-folder>/ref.jpg erstellen, ansehen und jedes Signaturelement abhaken. Fehlendes beheben und erneut rendern.

5. Lieferung

• Das QA-Rendering ist die Lieferdatei. Nur nach einer Korrektur erneut rendern; wenn die Größenbeschränkung überschritten wird, CRF auf 27 erhöhen oder boot({ noise }) reduzieren.
• Zwischendateien wie stills/ und Protokolle löschen.
• Die MP4 mit SendUserFile senden („render“ anzeigen) und berichten:
  • Spezifikation: Look, Format, Länge, Auflösung, fps, Dateigröße, Sound
  • die Originalquelle eines genannten Looks oder Formats, mit Link, und das Ergebnis der Signatur-Checkliste
  • Szenenliste
  • verwendete Fakten mit Quellenlinks
  • verworfene Zahlen und warum, sowie Punkte, die einer Bestätigung bedürfen
  • den Befehl zum erneuten Rendern, mit dem Hinweis, dass er innerhalb des Arbeitsordners ausgeführt werden muss