media-use : Avant de sourcer l'audio/les images, appelez
/media-usepour résoudre la BGM/SFX/les images du catalogue HeyGen. Exécutez--adoptd'abord pour enregistrer les actifs existants. Voir la compétence/media-use.
Du Lancement Produit aux HyperFrames
Utilisez cette compétence pour capturer un produit, comprendre sa marque, planifier une vidéo de lancement et la construire image par image dans HyperFrames.
Confirmez la route avant l'Étape 0. Vous êtes l'orchestrateur. Exécutez chaque étape, vérifiez sa porte, et seulement ensuite passez à l'étape suivante. Cette compétence est destinée à un produit en cours de commercialisation, de lancement, de promotion ou de révélation, y compris les demandes telles que "promo pour notre site" lorsque le but est promotionnel. Aiguillez les autres intentions ailleurs : une visite de site web générale (pas un lancement) ->
/general-video; un explicateur de sujet sans produit ->/faceless-explainer; une PR GitHub ->/pr-to-video; des sous-titres sur des séquences existantes ->/embedded-captions; une courte animation graphique sans narration ->/motion-graphics. Si l'utilisateur dit seulement "fais une vidéo" ou si la route est incertaine, lisez/hyperframesd'abord.
Vous êtes l'orchestrateur. Travaillez dans videos/<projet>/. Exécutez les étapes dans l'ordre et passez chaque porte avant de continuer. Les étapes avec validation utilisateur sont l'Étape 0, l'Étape 3 et l'Étape 6. Faites chaque étape vous-même sauf l'Étape 5, où vous déléguez un sous-agent par image. Ne mettez pas de règles de conception ou de mouvement ici ; celles-ci vivent dans le sous-agent worker d'image, les ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ locaux de cette compétence, et hyperframes-creative.
Flux de travail : Étape 0 configuration -> hyperframes.json ; Étape 1 capture -> capture/ ; Étape 2 système de design -> frame.md ; Étape 3 storyboard/script -> STORYBOARD.md et SCRIPT.md ; Étape 3.1 audio -> audio_meta.json ; Étape 4 conception visuelle -> STORYBOARD.md enrichi ; Étape 5 images -> compositions/frames/NN-*.html et index.html ; Étape 6 rendu final -> renders/video.mp4.
Étape 0 : Configuration et Brief
Objectif : Verrouiller le brief vidéo principal et créer le projet HyperFrames si nécessaire.
Initialisez uniquement si hyperframes.json est manquant. Nommez <projet> à partir de la marque ou du domaine en kebab-case, par exemple acme-promo ; n'utilisez jamais le nom de l'espace de travail ou un horodatage.
npx hyperframes init "videos/<projet>" --non-interactive --example=blank — init vérifie les compétences installées par rapport aux dernières sur GitHub et met à jour l'ensemble global si l'une d'elles est obsolète.
Affichez le statut de connexion avant le brief — exécutez npx hyperframes auth status et relayez sa sortie textuellement (ne la paraphrasez pas et ne la réécrivez pas). Il indique si la voix/BGM utilisera les moteurs HeyGen ou locaux et, lorsque vous n'êtes pas connecté, comment vous connecter. Si vous n'êtes pas connecté, ARRÊTEZ-VOUS et attendez que l'utilisateur choisisse — se connecter, ou dire "go"/"offline" pour continuer avec les moteurs locaux — avant de demander le brief ou quoi que ce soit d'autre. Traitez cela comme un véritable point de décision, pas une note passagère ; ne fusionnez pas le choix dans la question du brief et n'écrivez pas de clés dans un .env par dépôt. (En mode autonome, notez le statut et continuez hors ligne.) Voir ../hyperframes-media → Preflight pour les conseils canoniques.
Porte : hyperframes.json existe, et l'angle, la durée, le rapport hauteur/largeur et la langue sont verrouillés ; le statut de connexion a été affiché (connecté, ou continuant hors ligne).
Étape 1 : Capture des actifs
Objectif : Collecter le matériel source, les signaux de marque et les actifs utilisables pour la vidéo.
Classifiez l'entrée et choisissez le chemin. URL explicite -> capturez-la et utilisez le site pour la narration et les actifs. Script/brief copié-collé -> enregistrez-le textuellement comme user_script.txt, demandez une fois "l'utiliser textuellement ou le restructurer ?", stockez la réponse comme VO_MODE, puis résolvez la cible de capture : URL dans le texte -> utilisez-la ; nom de marque uniquement -> WebSearch, confirmez l'URL en une ligne, puis explorez ; pas d'URL/site -> chemin sans capture.
Exécutez la capture avec : npx hyperframes capture "<URL>" -o ./capture
Si GEMINI_API_KEY, GOOGLE_API_KEY ou une clé OpenRouter existe, la capture sous-titre automatiquement les actifs dans capture/extracted/asset-descriptions.md. Ce n'est pas une porte de révision. Sans clé de vision, utilisez le contexte DOM et continuez.
Chemin sans capture : créez capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md et capture/assets/ manuellement. tokens.json doit être { "title": "", "description": "", "colors": [], "fonts": [] } ; remplissez titre/description à partir du brief lorsque possible. visible-text.txt contient le brief ou le script complet. asset-descriptions.md doit indiquer qu'aucun actif n'a été capturé à moins que l'utilisateur n'ait donné des notes sur les actifs.
Porte : capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md et capture/assets/ existent ; vous pouvez énoncer la marque en une phrase claire. Traitez asset-descriptions.md comme l'inventaire principal des actifs. S'il manque après une capture réelle, arrêtez-vous et signalez que la capture est incomplète. Si capture/BLOCKED.md existe, suivez-le.
Étape 2 : Système de Design
Objectif : Choisir un préréglage d'image livré ; un script le transforme en frame.md + skin de sous-titres de cette vidéo.
Vous prenez la seule décision — quel préréglage. Lisez ../hyperframes-creative/references/design-spec.md et choisissez le préréglage dont l'apparence correspond le mieux à la marque et au brief. Exécutez ensuite :
node <SKILL_DIR>/scripts/build-frame.mjs --preset <nom> --hyperframes .
Le script fait le reste de manière déterministe : copie le FRAME.md du préréglage → frame.md et le remix sur les jetons de marque dans capture/extracted/tokens.json (couleurs de la marque mappées sur les clés de couleur du préréglage par rôle — encre, toile, accents — en gardant les clés/la structure/les composants ; les polices d'affichage + corps du préréglage échangées contre celles de la marque), copie le skin de sous-titres du préréglage vers .hyperframes/caption-skin.html, et s'auto-valide (sortie 1 en cas de mapping cassé). Passez à l'étape suivante dès qu'il sort 0 — pas d'édition manuelle de la spécification.
tokens.json sans couleurs/polices de marque (par exemple, pas de capture) → le script conserve la propre palette du préréglage, un design complet livrable. Si le brief nomme des couleurs/polices de marque que la capture a manquées, ajoutez-les à capture/extracted/tokens.json avant d'exécuter (ou utilisez le design.md de l'utilisateur pour le remplir) ; ajustez frame.md à la main seulement après si un mapping en a vraiment besoin.
Porte : build-frame.mjs s'est terminé avec le code 0 — frame.md existe à partir d'un préréglage nommé, et (lorsque le préréglage en livre un) .hyperframes/caption-skin.html existe comme source du skin de sous-titres.
Étape 3 : Storyboard et Script
Objectif : Transformer le brief et le matériel capturé en un plan d'histoire image par image approuvé.
Lisez references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes-core/references/storyboard-format.md et ../hyperframes-core/references/script-format.md. Utilisez-les pour écrire STORYBOARD.md et, lorsque la narration est nécessaire, SCRIPT.md.
Utilisez story-design.md pour le plan directeur de l'histoire, l'accroche, la logique de persuasion, les battements, VO_MODE et les choix d'actifs. En tant que guide souple, consultez le menu rôle→plan directeur dans ../hyperframes-animation/blueprints-index.md : pour chaque battement, notez un ID de plan directeur candidat lorsqu'il correspond. La vérité de l'histoire décide toujours quels battements existent — ne forcez jamais un battement à correspondre à un plan directeur, et n'inventez jamais un battement simplement parce qu'une forme éprouvée est disponible. Choisissez les asset_candidates de chaque image visuelle à partir de capture/extracted/asset-descriptions.md (l'inventaire canonique) — ne parcourez pas les capture/assets/ bruts. Ne demandez pas à l'utilisateur de choisir des actifs à moins que cet inventaire ne soit manquant ou inutilisable. Utilisez les champs exacts requis à partir des références du storyboard et du script.
Après la rédaction, montrez un résumé image par image. Dans ce même message, demandez deux choses à l'utilisateur : (a) d'approuver ou de demander des modifications, et (b) s'il souhaite un aperçu en direct de l'échafaudage du storyboard (npx hyperframes preview) — ouvrez-le seulement sur un oui. Itérez jusqu'à approbation et reportez le choix de l'aperçu à l'Étape 6.
Porte : STORYBOARD.md existe, chaque image visuelle a des asset_candidates, SCRIPT.md existe lorsque la narration est nécessaire, et l'utilisateur a approuvé le plan image par image.
Étape 3.1 : Audio
Objectif : Générer la narration, les timings des mots, la musique et les métadonnées audio à partir du script approuvé.
Commencez l'audio après l'approbation de l'Étape 3. Exécutez-le en arrière-plan, puis continuez à l'Étape 4.
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json &
Le script audio gère la narration, les timings des mots, la recherche de BGM dans la bibliothèque musicale de HeyGen et les métadonnées de timing. L'ambiance de la BGM provient du champ music: du storyboard. Cela utilise l'API Audio HeyGen pour la récupération, pas la génération, et utilise la même information d'identification ~/.heygen que le TTS. Pour les détails du fournisseur, lisez ../hyperframes-media/references/tts.md.
S'il n'y a pas de narration et pas de SCRIPT.md, sautez la génération vocale. La BGM peut toujours s'exécuter si le storyboard a une ambiance musicale.
Porte : le travail audio a démarré, ou le projet est marqué comme silencieux.
Étape 4 : Conception Visuelle des Images
Objectif : Ajouter la direction visuelle, l'intention de mise en page et les choix de mouvement à chaque image du storyboard.
Modifiez STORYBOARD.md sur place. Ne créez pas un autre storyboard. Utilisez frame.md comme source de vérité pour la couleur, la typographie, la sensation de mise en page et le style.
Lisez references/visual-design.md, ../hyperframes-animation/blueprints-index.md, references/motion-language.md et ../hyperframes-animation/rules-index.md. Utilisez visual-design.md pour la méthode (la séquence de plans chronométrés, le vocabulaire de mise en page en ligne et le bloc ## Video direction requis). Utilisez ../hyperframes-animation/blueprints-index.md pour choisir la forme de plan de chaque image. Utilisez motion-language.md (le vocabulaire du mouvement + la doctrine du mouvement) et ../hyperframes-animation/rules-index.md (noms de règles valides) pour le mouvement — n'inventez pas de noms de mouvement.
Pour chaque image visuelle, écrivez une séquence de plans chronométrés dans STORYBOARD.md selon la méthode de visual-design.md : choisissez le plan directeur de l'image (ou composez), instanciez-le avec le contenu de CE produit, et cadencez la révélation de chaque Scène sur la voix off afin que l'image se développe sur toute sa durée au lieu de se charger en front puis de se figer. Énoncez la disposition et le mouvement en ligne par Scène (vocabulaires dans visual-design.md et motion-language.md). Ajoutez un bloc ## Video direction à l'échelle de la vidéo.
Ne modifiez pas l'histoire, le script, les choix d'actifs, asset_candidates, transition_in ou le matériel source capturé. N'écrivez pas de HTML à cette étape.
Organisez les actifs nommés après que la conception visuelle est verrouillée :
node <SKILL_DIR>/scripts/stage-assets.mjs --storyboard ./STORYBOARD.md --hyperframes .
Porte : chaque image visuelle a une séquence de plans chronométrés dont les révélations sont cadencées sur la voix off (pas de chargement en front) ; ## Video direction existe ; assets/ contient les actifs nommés.
Étape 5 : Construction des Images
Objectif : Construire chaque image du storyboard comme une composition HTML et assembler la vidéo jouable.
Attendez que l'audio de l'Étape 3.1 soit terminé si l'audio a été démarré. Ensuite, synchronisez les durées et récupérez les SFX ; sautez les deux si le projet est silencieux.
node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md
node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .
La synchronisation des durées est mécanique : la durée vocale réelle l'emporte ; les images silencieuses conservent les estimations ; ne modifiez jamais manuellement les durées synchronisées.
Avant la répartition, lisez sub-agents/frame-worker.md et ../hyperframes-core/references/subagent-dispatch.md. Répartissez un sous-agent par image, en parallèle si possible ; sinon, exécutez les workers par vagues. Chaque worker reçoit exactement une image.
Le contexte de chaque worker doit inclure PROJECT_DIR, frame_id, la taille du canevas, le statut des sous-titres et la bande de réserve si les sous-titres sont activés, et RULES_DIR comme chemin absolu vers les ../hyperframes-animation/rules/ de cette compétence. Chaque worker lit frame.md, son propre bloc ## Frame N de STORYBOARD.md, la recette de règle locale (../hyperframes-animation/rules/<id>.md) pour chaque mouvement cité, et le modèle de plan directeur de l'image (../hyperframes-animation/blueprints/<id>.md). Chaque worker écrit seulement compositions/frames/NN-*.html. Les workers ne doivent jamais modifier STORYBOARD.md.
Au retour de chaque worker, l'orchestrateur marque cette image comme animated dans STORYBOARD.md.
Une fois les timings audio existants, construisez les sous-titres en arrière-plan et assemblez l'index :
node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &
node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .
captions.mjs utilise le .hyperframes/caption-skin.html du projet (copié à l'Étape 2) comme apparence des sous-titres, injectant les jetons de marque de frame.md ; en l'absence de skin, il rend la pastille par défaut intégrée. captions: skipped (<raison>) est valide. Continuez sans sous-titres lorsqu'ils sont explicitement ignorés.
Porte : chaque image est marquée animated, index.html existe, et les sous-titres sont construits ou explicitement ignorés.
Étape 6 : Finalisation
Objectif : Vérifier la vidéo assemblée, obtenir l'approbation de l'utilisateur et effectuer le rendu du MP4 final.
Injectez les transitions, exécutez les vérifications, faites une pause pour la révision, puis effectuez le rendu.
node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
npx hyperframes snapshot --at <points-milieu-images>
snapshot assemble les images capturées en une seule planche contact (snapshots/contact-sheet.jpg). Jetez-y un œil ; si rien n'est visiblement cassé, passez à autre chose — ne vous attardez pas ici.
Si une commande échoue, affichez stderr et arrêtez-vous — n'empilez pas les commandes de récupération. Corrigez-le vous-même : la modification sûre la moins coûteuse dans compositions/frames/NN-*.html, puis réexécutez la vérification ayant échoué.
Après le succès des vérifications, faites une pause pour la révision utilisateur. La vidéo est assemblée, visualisable et modifiable dans Studio. Gérez l'aperçu une seule fois entre l'Étape 3 et l'Étape 6 : ouvrez-le si l'utilisateur l'a demandé plus tôt, proposez-le s'il l'a refusé plus tôt, et ne demandez pas à nouveau s'il révise déjà dans Studio.
Aperçu : npx hyperframes preview
REND