Code Video

Que fait Code Video ?

<skill> est le dossier qui contient ce SKILL.md. Le moteur se trouve dans <skill>/template/ :

• kit.js : lignes dessinées à la main, texte et typographie cinétique, caméra, transitions, sprites pixel, minis, pixelisation d'image, clips vidéo, accessoires téléphone et curseur, flou de mouvement, useFonts
• modules de style pour les looks et formats crédités : handdrawn.js, motion.js, sand.js, lyric.js, beat.js (chacun dessine les pièces signatures de l'original)
• modules de look arcade.js, terminal.js, thermal.js, transit.js, blueprint.js : une API de scène partagée plus la scène au format signature de chaque look (references/looks.md)
• minis-ai.js : minis prêts à l'emploi pour des sujets liés à l'IA (Claude, Codex, Gemini, DeepSeek, Grok, Qwen)
• render.mjs : rendu parallèle avec Chrome sans tête ; mixe audio.wav lorsqu'il est présent
• main.js : squelette de scène

<skill>/scripts/audio.py synthétise la musique et les effets sonores, <skill>/scripts/beats.py trouve la grille de beats d'une chanson, et <skill>/scripts/reference_sheet.py place les images d'un original crédité au-dessus des vôtres.

Outils requis : node/npm, ffmpeg compilé avec libx264, Google Chrome et uv. Si l'un d'eux manque, arrêtez-vous et dites lequel.

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

0. Demander le look et le format, puis les réglages

Le look est uniquement le style de dessin ; le format est la structure de l'histoire. Tout look fonctionne avec tout format, sauf que les formats lyric et beat apportent leur propre look, sauf si l'utilisateur en demande un autre. Demandez d'abord les deux dans un seul message court avec deux listes numérotées (plus d'options qu'une seule question ne peut en contenir). Ignorez ce que l'utilisateur a déjà nommé, et suggérez un format à partir du sujet (une comparaison suggère "versus", une liste suggère "plan d'itinéraire", etc.).

Looks :

Look	Ambiance	Son par défaut	Guide	Crédit
1. Dessin à la main + minis 8-bit (par défaut)	ludique, carnet de croquis	aucun	styles/handdrawn.md	@nahiddotai
2. Motion design de marque	propre, officiel	aucun	styles/motion.md	@digitalstrategyai
3. Art du sable	chaleureux, narratif	musique et effets	styles/sand.md	@Michaelzsguo
4. Arcade 16-bit	jeu, énergique	musique style chiptune et hits	looks.md	original
5. Terminal CRT	développeur, rétro	clics de touches, nappes douces	looks.md	original
6. Reçu thermique	imprimé, tactile	ticks d'imprimante, tampon	looks.md	original
7. Plan de métro	diagramme, ordonné	carillons, trains	looks.md	original
8. Plan technique	technique, précis	sons de dessin technique	looks.md	original

Formats (détails dans references/formats.md) :

Format	Structure	Crédit
1. Promo standard (par défaut)	accroche → titre → étapes → grand chiffre → fin	original
2. Versus	rounds entre deux options, puis un décompte	original
3. Session	commandes et sorties qui montrent comment l'utiliser	original
4. Reçu	liste détaillée, total, tampon	original
5. Plan d'itinéraire	lignes, stations, correspondances	original
6. Fiche technique	pièces, chacune avec une spécification	original
7. Clip musical lyrique (son propre look)	une chanson originale, un fait et un diagramme par ligne	@goodside
8. Montage synchronisé sur le beat (son propre look)	vrais clips coupés sur les beats d'une chanson : mur, carrousel, téléphone	@twoclipping

Lorsque vous listez les looks et les formats, nommez la source originale de chaque élément crédité avec son lien.

Demandez ensuite les réglages en un seul appel AskUserQuestion. Ignorez tout ce que l'utilisateur a déjà dit, et mettez l'option recommandée en premier.

• Durée : 30 s / 15 s / 45 s / 60 s
• Cadre : 16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
• Personnages : mascotte logo + minis du sujet / minis spécifiés par l'utilisateur / mascotte logo uniquement / aucun
• Langue à l'écran : la langue de cette conversation / anglais / les deux

Les personnages prennent la forme du look : sprites 8-bit, silhouettes de sable, héros pixel, ou icônes plates. Les minis sont un ensemble secondaire qui correspond au sujet. Utilisez le casting de l'utilisateur s'il en donne un. Sinon, choisissez un casting à partir de la recherche et proposez-le dans le plan (voir "Minis" dans references/storyboard.md).

Utilisez ces valeurs par défaut pour tout ce que vous n'avez pas demandé, et indiquez-les dans le plan :

• 30 ips (60 ips avec flou de mouvement pour le format beat), H.264 MP4, au maximum 10 Mo par 30 s (un peu plus avec du son)
• Son comme indiqué pour le look ; les formats lyric et beat ont toujours de la musique. Il n'y a pas de chant.

Règles pour chaque look et format

• Les looks crédités reproduisent l'original. Avant de planifier, ouvrez le guide et regardez ses images de référence <skill>/docs/styles/<key>.jpg avec l'outil Read. Chaque élément du tableau Signature du guide doit apparaître à l'écran ; le tableau est une exigence, pas un menu. Les éléments supplémentaires viennent après la signature, jamais à la place.
• Langue : chaque texte à l'écran suit le réglage de langue à l'écran, y compris les étiquettes, le HUD, les paroles, les reçus, la sortie du terminal et le carton de fin.
• Thème issu de la recherche : la palette provient des couleurs réelles de la marque (page CI, CSS du site ou pixels du logo) et les polices de la marque si possible. Montrez la palette sous forme de valeurs hexadécimales avec leur source dans le plan. Les looks avec un matériau ou un champ fixe (sable, champ de mouvement sombre, vert terminal, papier thermique, bleu plan) le conservent et portent la marque dans le logo, un accent et le carton de fin.
• Chiffres : chaque chiffre a une source. Calculez les âges et les "N années" à partir de la date de fondation plutôt que de copier une ancienne ligne "N années" du site. N'inventez pas de lectures d'interface ou de statistiques d'exemple ; utilisez des valeurs réelles ou omettez-les.
• Crédit : les looks et formats crédités nomment le créateur dont l'idée est adaptée. Gardez ces crédits lorsque vous modifiez un guide.
• Attendez votre propre travail. Exécutez les rendus au premier plan avec un long timeout Bash (jusqu'à 600000 ms). Lorsque vous démarrez des agents ou des commandes en arrière-plan, attendez leurs résultats avant de terminer votre tour : dans un environnement non interactif, rien ne vous réveillera.

1. Recherche

Suivez references/research.md.

• Restez proportionné : pour une vidéo de moins d'une minute, environ 10 faits sourcés et les assets de la marque suffisent. Donnez à un agent en lecture seule un brief étroit (les questions, les sites, un maximum d'environ 15 requêtes) et lancez des recherches indépendantes en parallèle.
• Vérifiez vous-même les chiffres clés par rapport à la phrase d'origine.
• Si les sources ne s'accordent pas sur un chiffre, demandez à l'utilisateur lequel utiliser.

2. Approbation du plan

Montrez ce qui suit et obtenez l'approbation avant de créer le dossier de travail :

• résumé de la recherche avec liens sources
• look et format, et la chronologie des scènes en utilisant les motifs et le timing de leurs guides
• pour un look ou un format crédité : son tableau de signature avec la scène qui montre chaque élément
• palette (valeurs hexadécimales et provenance de chacune) et polices
• plan sonore lorsque le look ou le format a du son : tempo, sections et repères
• chiffres utilisés et chiffres abandonnés, liste des assets (URL du logo, polices, personnages, clips, licence de la chanson), emplacement du dossier de travail

Si l'utilisateur modifie les scènes ou l'accent, reformulez le flux révisé une fois, puis continuez.

3. Construction

cp -R <skill>/template <work-folder>/<name>-video && cd <work-folder>/<name>-video
chmod -R u+w .   # la compétence installée peut être en lecture seule, et cp conserve ses modes
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<URL du logo officiel>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png

• index.html : définissez la taille, les ips et la durée dans window.VIDEO ; déclarez les polices que le guide nomme avec @font-face (et uniquement celles-ci) ; chargez le module de style pour un look ou un format crédité (handdrawn.js, motion.js, sand.js, lyric.js, beat.js) ou un module de look pour les looks 4 à 8 (ses polices se chargent via useFonts(LOOK.fonts)).
• Avec un module de look, construisez les scènes à partir de l'API de scène et de la scène signature du format (references/looks.md) ; définissez les couleurs de la marque sur LOOK.colors.
• main.js : THEME, fonctions de scène et boot(). L'API se trouve dans references/kit-api.md.
• Utilisez le vrai logo et le fichier wordmark.
• Dessinez la mascotte du logo sous forme de sprite drawPixels (ou de silhouette dans le look sable).
• Enregistrez les minis dans MINIS et dessinez-les avec drawMini. Pour les sujets liés à l'IA, chargez minis-ai.js et dessinez uniquement les personnages manquants.
• Montrez à l'utilisateur un aperçu de la sélection de personnages tôt et faites-le confirmer.
• Conservez le texte et les chiffres sous forme de constantes en haut de main.js. Pour deux versions (un chiffre en attente, deux langues), bifurquez sur un paramètre d'URL et effectuez le rendu de chacun avec QUERY=lang=ko node render.mjs video ….
• Son : écrivez audio.json avec les mêmes temps de scène que main.js, puis uv run --with numpy --with scipy python <skill>/scripts/audio.py audio.json audio.wav. Pour le format beat, exécutez d'abord beats.py sur la chanson et coupez selon sa grille.

4. QA

Suivez references/qa-checklist.md.

1. Effectuez le rendu d'images fixes avec node render.mjs stills <temps de mi-scène et temps juste avant et après chaque transition>.
2. Construisez des fiches de révision avec uv run --with pillow python <skill>/scripts/contact_sheet.py stills <dossier-temporaire> et regardez-les.
3. Corrigez ce que vous trouvez.
4. Effectuez le rendu de la vidéo une fois avec CRF=25 node render.mjs video <Nom>.mp4, extrayez les images de transition et une image toutes les 2 s, et vérifiez la taille du fichier. Avec du son, vérifiez le flux audio, le volume sonore et le timing des repères.
5. Pour un look ou un format crédité, construisez uv run --with pillow python <skill>/scripts/reference_sheet.py <clé> <Nom>.mp4 <dossier-temporaire>/ref.jpg, regardez-la, et cochez chaque élément de signature. Corrigez toute erreur et effectuez un nouveau rendu.

5. Livraison

• Le rendu QA est le fichier de livraison. Effectuez un nouveau rendu uniquement après une correction ; s'il dépasse l'objectif de taille, augmentez CRF à 27 ou réduisez boot({ noise }).
• Supprimez les fichiers intermédiaires tels que stills/ et les logs.
• Envoyez le MP4 avec SendUserFile (afficher render) et rapportez :
  • spécifications : look, format, durée, résolution, ips, taille du fichier, son
  • la source originale d'un look ou d'un format crédité, avec son lien, et le résultat de la checklist de signature
  • la liste des scènes
  • les faits utilisés, avec les liens sources
  • les chiffres abandonnés et pourquoi, et les éléments nécessitant une confirmation
  • la commande de nouveau rendu, en notant qu'elle doit être exécutée dans le dossier de travail