HyperFrames — commencez ici
Ce skill est un routeur local pour le framework vidéo basé sur HTML HyperFrames,
reflété depuis heygen-com/hyperframes.
Les skills de domaine reflétés se trouvent dans les sous-répertoires de ce dossier et sont
chargés à la demande par leur nom. Selon l'intention de l'utilisateur, lisez le SKILL.md
du sous-skill correspondant avant d'exécuter.
Les guides d'agent autoritaires de l'amont sont reflétés aux côtés de ce routeur
sous les noms UPSTREAM-CLAUDE.md (catalogue complet des skills, installation, maintenance) et
UPSTREAM-AGENTS.md (liste des workflows) — consultez-les pour les descriptions canoniques
des skills amont et le workflow npx skills add / npx hyperframes.
HyperFrames effectue le rendu vidéo à partir de 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 en navigation, et dont la lecture multimédia est gérée par le framework. Le
contrat d'édition complet se trouve dans hyperframes-core/ ; lisez-le avant d'écrire du
HTML de composition.
Index des sous-skills
| Sous-skill | Répertoire | Utilisation quand |
|---|---|---|
| Contrat de composition | hyperframes-core/ | Écrire/éditer une composition HTML — timing data-*, clips, pistes, sous-compositions, variables. Lire avant d'écrire du HTML de composition. |
| Boucle de dev CLI | hyperframes-cli/ | Exécuter npx hyperframes init, add, lint, check, snapshot, preview, render, publish, doctor, rendu cloud/lambda, ou dépanner l'environnement de build/rendu. |
| Animation | hyperframes-animation/ | Règles de mouvement atomiques, plans de scène multi-phases, transitions de scène, techniques de motion-design, et les adaptateurs runtime (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
| Keyframes | hyperframes-keyframes/ | Keyframes 2D/3D résistants à la navigation, timelines GSAP, keyframes CSS, Anime.js, WAAPI, FLIP, chemins, masques, morphing/dessin SVG, texte, profondeur 3D, plus diagnostics hyperframes keyframes. |
| Direction créative | hyperframes-creative/ | Direction créative non-animation : frame.md/design.md, palettes, typographie, narration, planification des beats, audio-réactif. |
| Médias | media-use/ | Résoudre/générer BGM, SFX, image, icône, logo de marque, voix, étalonnage couleur, LUT ; voix off TTS, transcription, suppression d'arrière-plan, sous-titres ; réutilisation inter-projets. |
| Blocs du registre | hyperframes-registry/ | Installer et connecter des blocs/composants du registre (hyperframes add). |
| Import Figma | figma/ | Importer du contenu Figma — assets, tokens, composants, storyboards → reconstruction animée. |
Workflows (livrables de bout en bout)
| Workflow | Répertoire | Utilisation quand |
|---|---|---|
| Vidéo générale | general-video/ | Workflow par défaut pour éditer/créer toute composition personnalisée, de toute durée/format — pièces longues/multi-scènes, bandes de marque et sizzle reels. |
| Motion graphics | motion-graphics/ | Motion graphic court et orienté design où le mouvement EST le message — typographie cinétique, compteur de statistiques, hit de données/chart, sting logo, lower-third. |
| Diaporama / présentation | slideshow/ | Présentation, pitch deck, ou diaporama interactif avec diapositives discrètes, révélations de fragments, embranchements, navigation par hotspots. |
| Lancement produit | product-launch-video/ | Transformer une URL produit/marketing, un script collé ou un brief en vidéo de lancement / promotion. |
| PR vers vidéo | pr-to-video/ | Transformer une PR GitHub (URL, owner/repo#N, ou "cette PR") en vidéo explicative de changement de code. |
| Musique vers vidéo | music-to-video/ | Transformer un morceau de musique en vidéo synchronisée au beat — vidéo lyrique, diaporama ou visualisation cinétique. |
| Explication sans visage | faceless-explainer/ | Transformer un texte arbitraire (article, notes, sujet, brief) en vidéo explicative sans visage avec visuels inventés. |
| Sous-titres incrustés | embedded-captions/ | Ajouter des sous-titres conçus à une vidéo de personne parlante — identités visuelles derrière les moteurs colonnes/incrustés. |
| Re-cut personne parlante | talking-head-recut/ | Empaqueter une vidéo existante de personne parlante/interview/podcast avec des cartes graphiques superposées et minutées — titres, lower-thirds, appels de données, citations. |
| Portage Remotion | remotion-to-hyperframes/ | Porter une composition Remotion (React) existante vers HyperFrames HTML. Utiliser UNIQUEMENT sur demande explicite de portage/conversion/migration d'une source Remotion. |
Règles de routage
- Pour toute demande "fais-moi une vidéo / animation / motion graphic", choisissez un
workflow dans le deuxième tableau ci-dessus. Si aucun ne correspond, revenez à
general-video. - Le workflow choisi fait appel aux skills de domaine (premier tableau) en cours de route — ils ne prennent jamais en charge la tâche de bout en bout eux-mêmes.
- Le contrat d'édition d'abord : avant d'écrire du HTML de composition, lisez
hyperframes-core/. - Tout passe par
npx hyperframessauf si les instructions du projet précisent un wrapper local — obéissez exactement au wrapper local. Nécessite Node.js >= 22 et FFmpeg.
Synchronisation
Ces skills sont reflétés depuis l'amont. Pour vérifier ou récupérer les mises à jour :
bash hyperframes/scripts/sync-hyperframes.sh --check # simulation
bash hyperframes/scripts/sync-hyperframes.sh # synchronisation avec sauvegarde
Voir SYNC.md pour la source amont, le dernier commit synchronisé et la stratégie de synchronisation.