Communitygithub.com

général-vidéo

Compétence de production vidéo guidée par un brief, utilisant des storyboards, le mode autonome ou collaboratif, et une palette créative déterministe.

Qu'est-ce que général-vidéo ?

Cette compétence est conçue pour les agents IA et les développeurs qui créent des projets vidéo avec Hyperframes. Elle fournit un flux de travail structuré qui commence par un brief ou une URL Figma, s'adapte aux fichiers de projet existants et guide l'utilisateur à travers les phases de planification, de composition et de rendu. La compétence prend en charge à la fois les flux de travail autonomes (`flow: automation`) et collaboratifs (`flow: companion`). En mode collaboratif, l'agent agit en tant que directeur créatif, proposant un « traitement plafond » ambitieux que l'utilisateur peut ensuite ajuster. L'outil met l'accent sur la réutilisation des actifs médiatiques, des recettes et de la terminologie canonique pour garantir des résultats cohérents et de haute qualité. Il intègre la recherche dans un catalogue distant pour les blocs et composants d'effets visuels, évitant ainsi les implémentations improvisées. Les vérifications obligatoires, comme les préparations pour les actifs médiatiques et Figma, sont appliquées par la compétence, tout comme les différentes dépendances de connaissances qui doivent être chargées avant chaque étape critique.

Compatible avec~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/general-video

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Général vidéo

Avant de vous fier à ce workflow, exécutez :

npx hyperframes skills update general-video

Un no-op réussi signifie que la compétence est à jour. Signalez un échec de mise à jour au lieu de continuer de mémoire.

1. Appliquer les adaptateurs source transversaux

  • Média : Pour tout besoin audio, image, icône, logo, voix, étalonnage, LUT, traitement/effet, sous-titre ou opération média, chargez /media-use et suivez ../media-use/references/resolve.md (résoudre, adopter, réutiliser) et ../media-use/references/setup-providers.md (fournisseurs, authentification). Les retours vagues sur les séquences et les styles nommés utilisent ../media-use/references/media-treatments.md avant l'édition ; n'improvisez pas d'effets médias pris en charge avec CSS/SVG/opacité. Avant la première action authentifiée d'un fournisseur, exécutez npx hyperframes auth status et retransmettez sa sortie textuellement. Si déconnecté, appliquez la barrière dans ../hyperframes/references/brief-contract.md : le mode collaboratif attend la connexion ou un choix explicite hors ligne ; le mode autonome indique l'état et continue via un fournisseur hors ligne disponible. Signalez un blocage lorsqu'aucun fournisseur hors ligne ne peut satisfaire une capacité requise. L'adoption locale seule ne nécessite pas de barrière d'authentification.
  • Figma : Si une entrée est une URL figma.com, exécutez /figma d'abord. Construisez à partir de ses actifs exportés, jetons, composants ou trames de storyboard. N'utilisez pas d'appels directs au connecteur Figma car ils contournent l'assainissement SVG, la provenance des médias et la liaison des jetons de marque.

Ces adaptateurs ne modifient pas le workflow sélectionné par /hyperframes.

2. Démarrer à partir de l'état du projet

Appliquez la première ligne correspondante ; n'évaluez pas les lignes d'état inférieures :

ÉtatAction
Édition spécifiqueEffectuez l'édition, préservez les décisions de projet existantes, puis relancez les vérifications concernées. Ne rouvrez pas la découverte.
BRIEF.md existeLisez-le. Si workflow nomme un autre workflow et que flow n'est pas companion, passez la main. Ne posez pas de questions sur le brief.
Pas de brief, mais hyperframes.json ou STORYBOARD.md existeReprenez à partir des fichiers et des préférences enregistrées. Remplissez BRIEF.md uniquement à partir de faits connus.
Création viergeExécutez /hyperframes et sa couche d'intention. Revenez ici uniquement pour workflow: general-video ou flow: companion.

Pour un nouveau projet, choisissez un nom de répertoire en kebab-case à partir du brief et créez l'ossature avant d'écrire le brief :

npx hyperframes init "videos/<projet>" --non-interactive --example=blank --skill=general-video

Ensuite, écrivez BRIEF.md à la racine du projet en utilisant ../hyperframes/references/brief-format.md. Dans un projet existant, la racine est le répertoire contenant hyperframes.json. Enregistrez uniquement les champs confirmés basés sur les préférences nommés par le format du brief, en utilisant node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT> ; n'enregistrez jamais les valeurs par défaut déduites. Ici <MEDIA_DIR> est le répertoire de la compétence /media-use installée et <PROJECT_ROOT> est le répertoire contenant hyperframes.json. Si la couche d'intention a adopté une recette, appliquez-la maintenant avec node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <nom> et ne demandez plus.

3. Interpréter la forme de l'exécution

Utilisez uniquement les termes canoniques de ../hyperframes/references/brief-contract.md :

ChampSignificationEffet
flowQui piloteautomation : choisissez et exécutez le parcours. companion : co-créez en conversation.
storyboardPlanifier, esquisser et réviser avant la constructionyes : exécutez le plan et la révision de l'esquisse (storyboard.html). no : construisez sans.
mode dérivéComment les barrières de point de contrôle se comportentSuivez le contrat du brief. Ne demandez jamais à l'utilisateur de nommer un mode.

N'inventez pas de synonymes pour ces états. Un signal « construisez simplement » en cours est géré par la couche d'intention et arrive comme flow: automation, storyboard: no.

  • Pour flow: automation, choisissez le parcours et énoncez-le en une ligne dans la première mise à jour de progression.
  • Pour une édition spécifique, effectuez l'édition sans inventer un nouveau parcours.

Pour une coupe franche, un trim, une épissure ou un réordonnancement de séquences existantes, dupliquez la même source vidéo en plusieurs éléments de clip. Sur chaque copie, définissez la plage source avec data-media-start plus data-duration, puis définissez le placement/l'ordre créé avec data-start. L'audio créé séparément suit les plages de clip et le timing identiques sur les éléments <audio> correspondants. /hyperframes-core possède cette édition temporelle ; utilisez /hyperframes-keyframes uniquement pour l'animation de propriétés visuelles telles que le zoom, le punch, le panoramique, le recadrage, le masque ou clip-path sur un wrapper interne. Copiez les contrats complets de ../hyperframes-core/references/creator-editing-recipes.md.

Flux collaboratif

Lorsque flow: companion :

  • Lisez BRIEF.md et réconciliez les ## Ressources et ## Personnalisations acceptées avec les artefacts du projet. Terminez le travail accepté qui est encore en attente ; laissez le travail terminé tranquille ; ne proposez pas à nouveau une capacité acceptée comme si elle était nouvelle.
  • Arrivez en tant que réalisateur, pas en tant que sous-traitant. Un utilisateur qui a choisi le mode collaboratif a choisi l'implication et la qualité ; la réponse honnête est la meilleure version que vous puissiez concevoir, pas la plus petite que vous puissiez défendre. Le premier plan est le traitement plafond : l'arc narratif (empruntez la lentille de genre la plus proche — menu § Lentilles de genre), le cahier des charges, le traitement du mouvement de chaque scène cité par son nom (§ 5 de la discipline du plan), les transitions, l'identité audio — musique et marques sonores, ou silence délibéré — le matériel de l'utilisateur placé, ainsi qu'une ouverture et une fermeture conçues. Dites ce que chaque couche ajoute en une ligne ; signalez les plus coûteuses (temps de rendu, connexion, facturation) au moment de les nommer. L'utilisateur réduit un traitement ; il ne devrait jamais avoir à en assembler un approbation par approbation.
  • Le plafond appartient au concept, pas à la boîte à outils. Chaque couche doit servir le message du brief — un traitement qui habillerait n'importe quelle vidéo de la même manière est une décoration. L'artisanat s'élève jusqu'au plafond ; le contenu ne dépasse jamais ce qui a été demandé (§ 6).
  • Entre les points de contrôle, ../hyperframes/references/capability-menu.md fonctionne dans les deux sens. En tant que liste de déclencheurs : proposez une capacité pertinente lorsque l'utilisateur mentionne son entrée ou que la construction atteint son besoin. En tant que voie de mise à niveau de chaque passage : un point de contrôle de plan, d'esquisse ou de construction peut porter une ou deux offres tracées pointant vers le matériel que l'utilisateur regarde (« la statistique de la scène 3 veut le traitement de comptage »). Lisez-le avant de proposer ; ne déversez jamais le catalogue complet.
  • Après que l'utilisateur a accepté une capacité, produisez son artefact et enregistrez la décision dans la section de corps correspondante de BRIEF.md immédiatement. Ne réécrivez un champ de préface et n'enregistrez la préférence confirmée que lorsque l'utilisateur la modifie explicitement.
  • Gardez les mêmes barrières de storyboard, de validation, d'aperçu final et d'approbation du rendu. Le mode collaboratif change qui dirige, pas ce que la qualité exige.

4. Charger les connaissances requises avant chaque étape

Ces lectures sont obligatoires lorsque leur condition correspond :

ConditionLire avant d'agir
Tout code HTML de composition ou mise en page de scène/hyperframes-core ; utilisez references/determinism-rules.md pour son contrat de mise en page
Toute création ou traitement visuel non trivial/hyperframes-creative → references/house-style.md et references/video-composition.md
Tout mouvement, animation ou transition de scène/hyperframes-animation ; suivez son routage vers les règles, adaptateurs, plans ou références de transition correspondants
storyboard: yes../hyperframes/references/storyboard-format.md et ../hyperframes/references/review-loop.md
Tout actif ou opération média, y compris narration, BGM, SFX, sous-titres, étalonnage ou transformations/media-use ; pour la lecture et le placement du cadre, lisez également /hyperframes-core → references/variables-and-media.md
Assemblage multi-scène../hyperframes/references/production-loop.md
flow: companion, avant le premier plan/hyperframes-creative → references/story-spine.md et references/house-style.md ; la lentille de genre la plus proche et l'ensemble du ../hyperframes/references/capability-menu.md — le traitement plafond est conçu à partir de ceux-ci, pas rappelé
Une offre de capacité en mode collaboratif, capture, grille de temps, vidéo générative, carte, publication ou capacité inter-workflow../hyperframes/references/capability-menu.md
Un cahier des charges existe, avant l'approbation finale/hyperframes-creative → references/design-adherence.md

Ne remplacez pas ces lectures par le souvenir. La divulgation progressive n'économise le contexte que lorsque la référence correspondante est effectivement chargée.

5. Exécuter la composition

Utilisez cet ordre de dépendances. Sautez une étape uniquement lorsque son entrée est absente.

  1. Planifier. Énoncez l'arc du spectateur, la structure, le rythme et le moteur de durée. Utilisez un fichier pour une courte scène unique ; utilisez des sous-compositions pour trois coupes de scène franches ou plus ou toute scène réutilisée. Lisez /hyperframes-creative → references/story-spine.md pour les arcs narrés, references/beat-direction.md pour le rythme, et /hyperframes-core → references/composition-patterns.md pour la structure. Pour un brief multi-scène ouvert, développez l'invite via /hyperframes-creative → references/prompt-expansion.md. Un plan multi-scène cite la forme de chaque scène : un identifiant de plan depuis /hyperframes-animation → blueprints-index.md lorsqu'il correspond, ou les règles nommées qu'il compose depuis rules-index.md lorsqu'aucun ne correspond — les noms de mouvement proviennent de ces index, jamais inventés. La vérité de l'histoire décide quelles scènes existent ; la citation les habille. Recherchez dans le catalogue en direct avant de planifier la construction vous-même d'un look nommé : pour chaque look, effet, traitement ou transition que le brief nomme — « lignes de balayage CRT », « glitch », « grain de film », « balayage chatoyant », « explosion de confettis » — exécutez npx hyperframes catalog --query "<le look, en anglais simple" --json et lisez les meilleurs résultats avant que le plan ne nomme comment ce look est construit. La recherche n'a besoin de rien d'installé : aucun projet, aucun add préalable, aucun compte. Elle classe l'ensemble du registre hébergé (~400 blocs et composants) depuis n'importe quel répertoire, donc elle s'applique également à un look que l'utilisateur demande en cours de construction. Les blocs que le plan nomme sont installés à l'étape 3 ; réalisez un look à la main uniquement après qu'une recherche n'a rien trouvé qui corresponde. Un plan multi-scène est également enregistré comme artefact de répartition : un bloc ## Image N par scène dans STORYBOARD.md — status: outline, un src: déclaré, la citation du plan/règle, et le texte du temps — même lorsque storyboard: no. Le bloc est l'unité de répartition ; la feuille de storyboard n'est que la surface de révision.
  2. Réviser le plan lorsque demandé. Pour storyboard: yes, exécutez la boucle de révision partagée sur ces blocs. Pour storyboard: no, continuez sans pause de plan ni feuille d'esquisse. Lorsqu'une pause de plan se produit quand même, intégrez l'autorisation de délégation de sous-agent (nécessaire pour codex pour l'étape 4 de la répartition) dans cette pause plutôt que de s'arrêter à nouveau plus tard.
  3. Résoudre les dépendances. Installez les blocs du registre avant le travail parallèle. Stadez les actifs utilisateur, adoptez les actifs existants, et vérifiez que chaque source de média a une résolution documentée. Pour chaque bloc de registre cité par le plan, exécutez la commande d'installation exacte qui a été retournée par les résultats de la recherche npx hyperframes catalog.

…

[Le reste du contenu a été tronqué pour la traduction]

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Skills associés