Installations de plugins : Avant les commandes de configuration ou de fraîcheur, suivez les règles d'exécution des plugins lorsque ce skill se trouve à l'intérieur d'un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
Point d'entrée HyperFrames
HyperFrames effectue le rendu de vidéo à partir d'HTML — une composition est un fichier HTML dont le DOM déclare le timing avec des attributs data-*, dont le runtime d'animation est accessible par recherche, et dont la lecture multimédia est gérée par le framework. Le contrat complet de création se trouve dans /hyperframes-core ; lisez-le avant d'écrire du HTML de composition. Les contrats de brief, storyboard, révision, production, envoi et frame-worker se trouvent dans les references/ de ce skill.
1. Démarrer à partir de l'état du projet
Appliquez la première ligne correspondante ; n'évaluez pas les lignes d'état inférieures :
| État | Action |
|---|---|
| Port explicite d'une source Remotion existante vers HyperFrames | Lisez references/routes/remotion-to-hyperframes.md, puis acheminez directement vers ce workflow. Ignorez la couche d'intention. |
| Opération spécifique sur un projet HyperFrames existant : inspecter, diagnostiquer, valider, prévisualiser, rendre, publier ou effectuer un rendu par lots | Effectuez uniquement cette opération. Ignorez le routage et la couche d'intention ; chargez /hyperframes-cli et les compétences de domaine nécessaires. |
| Une question, une mise en attente, une idée sans changement concret, ou une note ressentie sur un film construit, dans un projet existant | Suivez /hyperframes-studio § 0. |
| Un nouveau film demandé à l'intérieur d'un projet existant | Suivez /hyperframes-studio § 5. |
| Modification spécifique d'un projet existant | Effectuez la modification. N'exécutez pas la couche d'intention. Pour connaître ce qui se trouve sur la timeline d'un projet (pistes, clips, débuts, fins, ce qui est lu), exécutez npx hyperframes timeline [--json] au lieu de lire index.html et chaque fichier de sous-composition. |
BRIEF.md existe | Lisez workflow et flow. Exécutez ce workflow ; flow: companion s'exécute toujours dans /general-video. Ne posez aucune question sur le brief. |
Pas de brief, mais hyperframes.json ou STORYBOARD.md existe | Reprenez à partir des fichiers du projet et des préférences enregistrées. Déduisez le workflow propriétaire à partir des artefacts existants. S'il ne peut pas être déterminé de manière unique, posez une seule question de routage ; n'exécutez pas l'entretien d'intention. |
| Nouvelle création | Exécutez la couche d'intention — references/intent-interview.md — puis acheminez une fois en utilisant le tableau du § 2. |
Lorsque vous modifiez un projet existant, encadrez vos modifications avec l'historique du projet (/hyperframes-cli, Historique du projet dans votre tour).
Si une nouvelle demande n'identifie pas le sujet ou l'entrée, demandez de quoi parle la vidéo avant d'acheminer. Vérifiez les préférences et les recettes avant de demander quoi que ce soit (references/intent-interview.md, étape 1). Une entrée figma.com ou une recette nommée modifie la prise en charge, pas le routage — la section "Adapter les entrées orthogonales" de l'entretien gère les deux.
Maintenir le CLI du projet à jour
Un projet scaffoldé épingle hyperframes@<version> dans ses scripts package.json afin que les rendus restent reproductibles ; l'épingle n'avance jamais d'elle-même, et une exécution épinglée d'un CLI plus ancien n'affiche aucun avertissement à ce sujet. Lors de la reprise d'un projet dont les scripts portent une épingle, sondez une fois avant la première commande affectant le rendu :
npx hyperframes@latest upgrade --project . --check
La sonde est en lecture seule et signale l'épingle par rapport à la dernière version ; conservez le . explicite — sur les anciennes versions du CLI, un --project nu suivi d'un autre flag consomme ce flag comme valeur de répertoire. Lorsqu'elle signale que le projet est en retard — ou que toute sortie CLI le montre déjà (l'avis stderr This project pins hyperframes@… (latest …), ou _meta.updateAvailable: true dans un résultat --json d'un script épinglé) — appliquez avec npx hyperframes@latest upgrade --project ., puis vérifiez avec npx hyperframes check. Une vérification réussie confirme que les compositions du projet sont toujours valides sur la nouvelle version — pas que la sortie rendue est identique trame par trame à l'ancienne épingle — donc une mise à jour réussie n'est jamais silencieuse : nommez l'ancienne et la nouvelle version dans le résumé de l'exécution. Un projet sans composition encore n'a pas besoin de vérification. Si la vérification échoue, annulez la modification de package.json, continuez sur la version épinglée, et indiquez sur quelle version le projet reste et pourquoi. Agissez sur le signal plutôt que de le transmettre à l'utilisateur ; ne laissez jamais une épingle mise à jour non vérifiée.
2. Acheminer une nouvelle création
Utilisez la première ligne correspondante. Faites correspondre le livrable demandé, pas un mot ou un type de fichier mentionné en passant.
| Priorité | Demande | Workflow |
|---|---|---|
| 1 | Porter explicitement une source Remotion existante | /remotion-to-hyperframes |
| 2 | Créer une présentation, un pitch deck ou un deck interactif navigable | /slideshow |
| 3 | Ajouter des sous-titres ou légendes simples à des séquences existantes de tête parlante sans les modifier | /embedded-captions |
| 4 | Ajouter des superpositions graphiques conçues à des séquences existantes de tête parlante, interview ou podcast sans modifier les séquences | /talking-head-recut |
| 5 | Construire une vidéo synchronisée sur le rythme à partir d'une piste musicale, sans narration ni capture de site web | /music-to-video |
| 6 | Créer une unité explicitement courte, non narrée, axée sur le mouvement, généralement de moins de 10s | /motion-graphics |
| 7 | Expliquer une pull request GitHub ou un changement de code à partir d'une référence PR | /pr-to-video |
| 8 | Commercialiser ou présenter un site web, un site produit, une application ou une entreprise à partir d'une URL ou d'un brief spécifique au site | /product-launch-video |
| 9 | Expliquer un sujet, un article ou des notes avec des visuels inventés et sans capture de produit ou de site | /faceless-explainer |
| 10 | Toute autre vidéo ou composition personnalisée | /general-video |
Avant de finaliser le routage, lisez references/routes/<workflow>.md — un petit fichier par route : le contrat canonique entrée/sortie/déclencheur (disponible avant que les compétences de workflow installées paresseusement ne soient présentes) plus l'entrée d'entretien de cette route. Si le candidat ne satisfait pas son contrat, continuez le routage au lieu de forcer la correspondance. Lisez uniquement le fichier de la route correspondante.
Résoudre les ambiguïtés courantes
- Un titre animé court, un sting de logo, un hit de statistique, un hit de graphique, un hit de carte, ou un tiers inférieur autonome est
/motion-graphicslorsqu'il n'est pas narré et que le mouvement est le message. Une carte de titre statique, une séquence narrée, un montage plus long ou une boucle personnalisée est/general-video. - Un graphique animé explicitement court peut utiliser une URL, un tweet, un article ou une capture d'écran comme matériel source. Une demande générique "faire une vidéo à partir de ce site" est
/product-launch-video. - Des séquences existantes avec des légendes sont acheminées vers
/embedded-captions; des séquences avec des fiches d'information conçues sont acheminées vers/talking-head-recut. Le re-timing, le réordonnancement, le recoloriage, le recadrage ou le remixage de séquences est une modification personnalisée et tombe dans/general-video. - Un fichier musical sélectionne
/music-to-videouniquement lorsque sa grille de rythme pilote la pièce. La musique utilisée comme fond sonore ne remplace pas la route correspondant au sujet. - "Je veux un storyboard" modifie le processus de révision, pas le workflow. Sans autre signal de routage, utilisez
/general-video. Unstoryboard.htmlesquissé confirmé peut lui-même être le livrable demandé ; la boucle de révision définit ce point d'arrêt. - Les workflows narratifs spécialisés prennent en charge jusqu'à environ 3 minutes et sont les plus efficaces autour de 30 à 90 secondes. Acheminez une pièce clairement plus longue vers
/general-video. La longueur ne remplace jamais un port, un deck, une légende, une superposition ou un livrable piloté par la musique explicite.
3. Acheminer une fois, puis laisser
Pour une nouvelle création, la couche d'intention (references/intent-interview.md) exécute la conversation complète — mémoire, triage, tour de pitch, indispensables, structure de l'exécution, transfert — et se termine en écrivant BRIEF.md. Le brief est le seul artefact de routage que le workflow lit ; rien par la suite ne rouvre ce skill ou l'entretien. Répondez à chaque question ultérieure "qu'est-ce que la route exigeait ?" à partir de BRIEF.md.
4. Installer et entrer dans le workflow
Avant de lire le workflow sélectionné, installez-le ou rafraîchissez-le ainsi que les compétences de domaine de base :
npx hyperframes skills update <nom-du-workflow>
Utilisez le nom nu sans /. Si la commande échoue, remontez l'erreur ; ne reconstruisez pas le workflow de mémoire. Tout le reste concernant l'installation — la division cœur vs. paresseux, ce que init rafraîchit, le diagnostic, le choix de ne pas utiliser CI, et le fallback sans CLI — se trouve dans references/skill-lifecycle.md.
5. Charger les compétences de domaine à la demande
| Besoin | Compétence |
|---|---|
| Structure de composition, attributs de timing, pistes, variables, déterminisme | /hyperframes-core |
| Règles de mouvement, plans de scène, transitions, adaptateurs d'exécution | /hyperframes-animation |
GSAP, CSS, Anime.js, WAAPI, FLIP, chemins, masques, SVG, images clés 3D, ou diagnostics hyperframes keyframes sécurisés par recherche | /hyperframes-keyframes |
| Spécifications de conception, concept, palette, typographie, narration, planification du rythme | /hyperframes-creative |
| Images, icônes, logos, audio, légendes, grades, LUT, médias réutilisables | /media-use |
| Découpage de voix off, chaînes d'effets audio, enveloppes d'automatisation, ou une chaîne/fader sur plusieurs pistes (bus de sous-mixage) | /hyperframes-audio |
| Init, lint, vérification, instantanés, comparaison, rendu par lots, Studio, rendu, publication ou diagnostics | /hyperframes-cli |
| Blocs et composants du registre | /hyperframes-registry |
| Un look, effet, traitement ou transition nommé — lignes de balayage CRT, glitch, grain de film, balayage chatoyant, explosion de confettis — AVANT de le construire à la main | /hyperframes-registry |
| Actifs, jetons, composants ou images de storyboard Figma en tant que mouvement reconstruit | /figma |
Les phrases d'édition de créateur sont des demandes cross-domaine. Chargez chaque compétence nommée dans la ligne correspondante :
| Demande du créateur | Domaines requis |
|---|---|
| "couper ces séquences", coupe franche, rogner, épisser, réordonner ou utiliser une plage source | /hyperframes-cli, /hyperframes-core, /media-use |