Communitygithub.com

vidéo-générale

Workflow hyperframes pour la création et l'édition de vidéos, gérant le montage, les assets, les transitions, le storyboard et la collaboration.

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

Ce skill `general-video` est un workflow hyperframes complet dédié à la production vidéo. Il orchestre l'ensemble du pipeline : depuis l'ingestion des assets (médias et Figma) en passant par l'état initial du projet, l'interprétation du mode de travail (automatique ou compagnon), jusqu'à la construction des scènes et la validation finale. Le skill impose des points de contrôle documentaires (lecture obligatoire de références avant chaque étape) et une structure de planification rigoureuse, notamment pour les projets multi-scènes. En mode `companion`, il pousse à une direction créative ambitieuse (le « plafond » de la qualité) tout en restant collaboratif. Il est basé sur l'écosystème hyperframes et nécessite que les adaptateurs transversaux (media-use, figma) soient appliqués en premier.

Compatible avec~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/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

Vidéo générale

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

npx hyperframes skills update general-video

Un no-op réussi signifie que le skill 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ésolution, adoption, réutilisation) 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édia supportés avec du 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 règle dans ../hyperframes-core/references/brief-contract.md : en mode collaboratif, attendez la connexion ou un choix explicite hors ligne ; en mode autonome, indiquez l'état et continuez 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 règle d'authentification.
  • Figma : Si une entrée est une URL figma.com, exécutez /figma en premier. Construisez à partir de ses actifs exportés, jetons, composants ou trames de storyboard. N'utilisez pas d'appels bruts 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
Modification spécifiqueEffectuez la modification, préservez les décisions de projet existantes, puis relancez les vérifications affecté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.
Nouvelle créationExé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 d'après le brief et créez la structure 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-core/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 de valeurs par défaut inférées. Ici <MEDIA_DIR> est le répertoire du skill /media-use installé 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 pas à nouveau.

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

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

ChampSignificationEffet
flowQui piloteautomation : choisissez et exécutez la route. companion : co-créez en conversation.
storyboardSi le tableau est une surface de revueyes : exécutez la revue du plan et de l'esquisse. no : construisez sans le tableau.
mode dérivéComment se comportent les points de contrôleSuivez le contrat du brief. Ne demandez jamais à l'utilisateur de nommer un mode.

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

  • Pour flow: automation, choisissez la route et énoncez-la en une ligne dans la première mise à jour de progression.
  • Pour une modification spécifique, effectuez la modification sans inventer de nouvelle route.

Pour une coupe franche, un rognage, une jonction 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 avec data-start. L'audio créé séparément suit les mêmes plages et le même timing sur des éléments <audio> correspondants. /hyperframes-core gère 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 depuis ../hyperframes-core/references/creator-editing-recipes.md.

Flux compagnon

Lorsque flow: companion :

  • Lisez BRIEF.md et rapprochez les ## Assets et ## Customizations acceptés avec les artefacts du projet. Terminez le travail accepté qui est encore en attente ; laissez le travail terminé tranquille ; ne proposez plus une capacité acceptée comme si elle était nouvelle.
  • Arrivez en tant que réalisateur, pas en tant que prestataire. Un utilisateur qui a choisi le mode compagnon 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 design, le traitement de mouvement de chaque scène cité par son nom (§ 5 discipline de plan), les transitions, l'identité audio — musique et marque sonore, ou silence délibéré — le matériel de l'utilisateur placé, et 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) en les nommant. 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 de la décoration. Le savoir-faire monte 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 canal de mise à niveau de chaque passe : 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 stat de la scène 3 veut le traitement de compteur »). Lisez-le avant d'offrir ; 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 correspondante du corps de BRIEF.md immédiatement. Réécrivez un champ de métadonnées et enregistrez la préférence confirmée uniquement lorsque l'utilisateur la modifie explicitement.
  • Conservez les mêmes points de contrôle de storyboard, de validation, d'aperçu final et d'approbation du rendu. Le mode compagnon 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 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 non triviale ou traitement visuel/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-core/references/storyboard-format.md et ../hyperframes-core/references/review-loop.md
Tout actif ou opération média, incluant narration, BGM, SFX, sous-titres, étalonnage ou transformations/media-use ; pour la lecture et le placement du framework, lisez également /hyperframes-core → references/variables-and-media.md
Assemblage multi-scènes../hyperframes-core/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 la totalité de ../hyperframes/references/capability-menu.md — le traitement plafond est conçu à partir de ceux-ci, pas rappelé de mémoire
Une offre de capacité compagnon, capture, grille de temps, vidéo générative, carte, publication ou capacité multi-workflow../hyperframes/references/capability-menu.md
Un cahier des charges design existe, avant l'approbation finale/hyperframes-creative → references/design-adherence.md

Ne remplacez pas ces lectures par la mémoire. La divulgation progressive économise du contexte uniquement lorsque la référence correspondante est réellement chargée.

5. Exécuter la composition

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

  1. Plan. É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 narratifs, references/beat-direction.md pour le rythme, et /hyperframes-core → references/composition-patterns.md pour la structure. Pour un brief multi-scènes ouvert, développez l'invite via /hyperframes-creative → references/prompt-expansion.md. Un plan multi-scènes cite la forme de chaque scène : un identifiant de plan depuis /hyperframes-animation → blueprints-index.md lorsqu'il en correspond un, 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. Un plan multi-scènes est également enregistré comme artefact de répartition : un bloc ## Frame N par scène dans STORYBOARD.md — status: outline, un src: déclaré, la citation du plan/règle et le texte de la pulsation — même lorsque storyboard: no. Le bloc est l'unité de répartition ; le tableau est uniquement la surface de revue.

  2. Réviser le plan lorsque demandé. Pour storyboard: yes, exécutez la boucle de revue partagée sur ces blocs. Pour storyboard: no, continuez sans ouvrir le tableau. Lorsqu'une pause de plan se produit quand même, intégrez la délégation de sous-agent (nécessaire pour codex à l'étape 4 pour la répartition) dans cette pause plutôt que de vous arrêter à nouveau plus tard.

  3. Résoudre les dépendances. Installez les blocs de registre avant le travail en parallèle. Préparez les actifs utilisateur, adoptez les médias existants et résolvez uniquement ce que le brief exige. Démarrez l'audio tôt lorsque ses timings déterminent la durée.

  4. Construire les scènes. Pour une pièce courte à scène unique, implémentez la scène à son moment le plus visible avant d'ajouter du mouvement (le wireframe confirmé, lorsqu'il est présent, est cet état final et ne doit pas être redessiné), puis animez à partir de son plan ou de ses règles citées — lisez le corps complet de la recette (/hyperframes-animation → blueprints/<id>.md, rules/<id>.md) avant d'écrire le mouvement.

    La répartition n'est rentable qu'à l'échelle. L'écriture de paquets et le réchauffement de nouveaux contextes de travail coûtent des minutes et des jetons réels : un film d'environ 6 courtes scènes se construit PLUS VITE en ligne, dans ce contexte, scène après scène (mesuré : 5 courtes scènes ≈ 9...

Individual skills in this repo

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

embedded-captions

>

faceless-explainer

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.

figma

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.

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

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.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

Skills associés