Communitygithub.com

faceless-explainer

Transformez du texte brut — article, notes, sujet, résumé — en vidéo explicative sans visage : pas de site ni d'images réelles, les visuels sont inventés scène par scène (typographie, graphismes abstraits, diagrammes, dataviz).

Qu'est-ce que faceless-explainer ?

Cette compétence vous permet de transformer n'importe quel texte en une vidéo explicative animée, sans avoir besoin de captures d'écran ou d'actifs réels. Elle est idéale pour des sujets comme des explications de concepts, des démonstrations pratiques, des tutoriels ou des listicles. La compétence fonctionne avec HyperFrames : elle orchestre la création d'un storyboard, la conception visuelle, la génération audio, et le rendu final. Les visuels sont créés via des presets de design, des schémas abstraits et des animations, le tout sans aucune image ou vidéo préexistante. Le flux de travail est divisé en étapes claires, de la configuration au rendu, et inclut des vérifications (gates) pour garantir la qualité à chaque phase.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/faceless-explainer

Demander à votre IA préférée

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

Documentation

Avant tout, gardez cette compétence à jour — exécutez silencieusement, sans demander : npx hyperframes skills update faceless-explainer. Une opération rapide sans effet si tout est à jour ; sinon elle rafraîchit cette compétence ainsi que les compétences de base dont elle dépend avant que vous ne les utilisiez.

media-use : Avant de sourcer l'audio/images/logos, appelez /media-use pour résoudre la BGM/SFX/images du catalogue HeyGen et les logos de marque de leurs sources officielles. Exécutez --adopt d'abord pour enregistrer les actifs existants. Voir la compétence /media-use.

Faceless Explainer vers HyperFrames

Utilisez cette compétence pour transformer un corps de texte en vidéo explicative : choisissez un système de design, planifiez une histoire pédagogique, et construisez-la image par image dans HyperFrames. Sans visage signifie que chaque visuel est inventé en aval — il n'y a pas d'étape de capture et aucun inventaire d'actifs réel.

La porte d'entrée est /hyperframes. Vous êtes l'orchestrateur. Exécutez chaque étape, vérifiez sa porte, et continuez seulement ensuite. Cette compétence est destinée à expliquer un sujet à partir d'un texte, sans produit ni site à capturer. Toute autre intention, un simple « faire une vidéo », ou toute incertitude → lisez /hyperframes d'abord — la couche d'intention possède chaque décision de chemin, et une création fraîche arrivant ici sans BRIEF.md passe de toute façon par elle (règle d'ouverture de la configuration).

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 porte utilisateur sont les étapes 0, 3 et 6. Lisez ../hyperframes-core/references/brief-contract.md avant l'étape 0 — elle définit les types de portes et comment flow/storyboard du BRIEF.md dérivent le mode qui régit les portes des étapes 3/4/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 design ou de mouvement ici ; elles vivent dans le sous-agent frame-worker, les ../hyperframes-animation/rules/ et ../hyperframes-animation/blueprints/ locales de cette compétence, et hyperframes-creative.

Workflow : Étape 0 configuration → hyperframes.json ; Étape 1 brief → capture/extracted/ ; É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 design visuel → STORYBOARD.md enrichi ; Étape 5 images → compositions/frames/NN-*.html et index.html ; Étape 6 rendu final → renders/video.mp4.


Étape 0 : Configuration

Objectif : Entrer avec un brief confirmé, créer le projet HyperFrames, et rendre le brief durable.

Le brief est confirmé par la couche d'intention, pas par des questions posées ici. Règle d'ouverture, dans l'ordre : (1) BRIEF.md existe → lisez-le et ne posez aucune question — le brief est réglé, et son flow/storyboard dérivent le mode (brief contract § 1). (2) Pas de BRIEF.md mais le projet existe (hyperframes.json / STORYBOARD.md sur le disque) → reprenez depuis le frontmatter du storyboard et les préférences enregistrées ; ne réinterrogez jamais un projet à moitié construit. (3) Ni l'un ni l'autre — une demande de création fraîche arrivée ici directement → lisez /hyperframes et exécutez sa couche d'intention (references/intent-interview.md) : elle vérifie les recettes et les valeurs par défaut mémorisées, mène les questions de ce chemin (../hyperframes/references/routes/faceless-explainer.md), et remet le brief verrouillé. Les demandes de modification sautent tout cela — allez faire la modification.

Initialisez uniquement si hyperframes.json est manquant. Nommez <projet> à partir du sujet en kebab-case, par exemple compound-interest-explained ; n'utilisez jamais le nom de l'espace de travail ou un horodatage.

npx hyperframes init "videos/<projet>" --non-interactive --example=blank --skill=faceless-explainer — init vérifie les compétences installées par rapport aux dernières sur GitHub et met à jour l'ensemble global si certaines sont obsolètes.

Après l'initialisation, définissez <PROJECT_ROOT> comme videos/<projet> et exécutez chaque commande de chemin relatif subséquente avec ce répertoire comme répertoire de travail. Dans les commandes ci-dessous, . signifie <PROJECT_ROOT> ; n'écrivez jamais .media, capture ou les fichiers de sortie dans le répertoire de l'appelant.

Écrivez BRIEF.md immédiatement après l'initialisation (jamais avant — init refuse un répertoire non vide) : le brief verrouillé de la couche d'intention, forme selon ../hyperframes-core/references/brief-format.md. Résolvez <MEDIA_DIR> en tant que répertoire de compétence /media-use installé. Ensuite, enregistrez chaque réponse soutenue par une préférence avec node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . (brief-format.md nomme le sous-ensemble). Si la couche d'intention a adopté une recette, exécutez node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <nom> ; elle copie son frame.md dans le projet (l'étape 2 est alors ignorée) et renvoie les squelettes à partir desquels l'étape 3 est rédigée. Une recette remplit les réponses, pas les approbations ; les portes de révision s'exécutent toujours.

Affichez l'état de connexion avant de passer la configuration — exécutez npx hyperframes auth status et relayez sa sortie textuellement. Il signale si la voix/BGM utilisera HeyGen ou les moteurs locaux et, si vous êtes déconnecté, comment vous connecter. Appliquez une branche :

  • Collaboratif : attendez que l'utilisateur se connecte ou choisisse explicitement offline / go.
  • Autonome : indiquez l'état et continuez via les moteurs locaux disponibles.

N'omettez pas silencieusement une capacité requise lorsqu'aucun fournisseur hors ligne n'existe ; exposez le blocage. N'intégrez pas cette décision dans une autre question et n'écrivez pas de clés dans un .env par dépôt. Propriété de l'authentification et solutions de repli hors ligne : /media-use references/setup-providers.md § Fournisseurs.

Porte : hyperframes.json et BRIEF.md existent ; les réponses soutenues par des préférences ont été enregistrées (brief contract § 2) ; l'état de connexion a été affiché (connecté, ou continuant hors ligne).


Étape 1 : Brief (pas de capture)

Objectif : Intégrer le texte de l'utilisateur dans le projet comme source d'information. Il n'y a pas de capture de site web et pas d'actifs réels — il s'agit d'un explicateur sans visage.

Enregistrez l'intégralité de l'entrée de l'utilisateur textuellement, puis créez le paquet de capture synthétique à la main :

  • capture/extracted/visible-text.txt — l'article / notes / sujet / brief complet, textuellement. C'est la source de l'information, pas un modèle d'histoire (l'étape 3 le remodèle).
  • capture/extracted/tokens.json — { "title": "", "description": "", "colors": [], "fonts": [] }. Remplissez title/description à partir du brief. Laissez colors/fonts vides sauf si l'utilisateur a explicitement donné des couleurs de marque ou des polices — alors ajoutez-les (le préréglage de design fournit une palette complète de toute façon).

Si l'utilisateur a collé un script ou souhaite que son texte soit conservé, enregistrez-le textuellement comme user_script.txt ; VO_MODE (textuellement ou restructuré) provient de BRIEF.md — la couche d'intention le demande quand un script arrive. Demandez une fois ici seulement si le brief manque, et stockez la réponse pour l'étape 3.

N'exécutez pas npx hyperframes capture (il n'y a pas d'URL). Ne créez pas asset-descriptions.md et ne peuplez pas capture/assets/ — les visuels sans visage sont inventés dans les étapes 4-5, pas capturés. La seule exception : si l'utilisateur a fourni une image réelle, placez-la sous public/<nom_de_base> et notez-la pour l'étape 3.

Porte : capture/extracted/visible-text.txt et capture/extracted/tokens.json existent ; vous pouvez énoncer le sujet de l'explication et son public en une phrase claire.


Étape 2 : Système de design

Objectif : Choisir un préréglage d'image livré ; un script le transforme en frame.md + skin de légende de cette vidéo.

Lorsque BRIEF.md nomme un style_preset — l'utilisateur l'a choisi à l'œil parmi les présentations de la couche d'intention — utilisez-le ; l'appel de jugement vous appartient uniquement lorsque le brief est silencieux. Ensuite, vous faites le seul appel — quel préréglage : lisez ../hyperframes-creative/references/design-spec.md et parcourez ../hyperframes-creative/frame-presets/ ; choisissez le préréglage dont l'apparence correspond le mieux au sujet, au ton et au public. 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 remixe avec les jetons de marque dans capture/extracted/tokens.json (couleurs de marque mappées sur les touches de couleur du préréglage par rôle ; les polices d'affichage + corps du préréglage échangées contre celles de la marque), copie le skin de légende du préréglage vers .hyperframes/caption-skin.html, et s'auto-valide (sortie 1 en cas de mappage cassé). Continuez dès qu'il sort en 0 — aucune modification manuelle de la spécification.

Un explicateur sans visage n'a généralement pas de couleurs/polices de marque (couleurs/polices de tokens.json vides) → le script conserve la palette du préréglage, un design complet et livrable. Uniquement lorsque l'utilisateur a nommé des couleurs/polices de marque, ajoutez-les au tokens.json avant d'exécuter, et ajustez frame.md à la main après seulement si un mappage le nécessite vraiment.

Porte : build-frame.mjs est sorti en 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 de skin de légende ; le préréglage choisi a été enregistré comme préférence (--key style_preset --workflow <ce workflow>, brief contract § 2).


Étape 3 : Storyboard et script

Objectif : Transformer le texte en un plan d'enseignement image par image approuvé.

Lisez ../hyperframes-creative/references/story-spine.md (langage d'accroche, valeur avant preuve, storyboard comme proposition, visuels traçables à la source), 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. Définissez la duration: du frontmatter à partir de la length du brief — une attente approximative ; l'assemblage indique où la coupe atterrit par rapport à elle.

Utilisez story-design.md pour la structure de l'explicateur (concept / tutoriel / listicle / histoire), la stratégie d'accroche, les techniques de clarté, les beats émotionnels, le mappage type-énum, et VO_MODE. La séquence de la vidéo provient de la conception narrative, pas de l'ordre des paragraphes du texte d'entrée — réorganisez, fusionnez, omettez, compressez. En tant que guide souple, consultez le menu rôle→blueprint dans ../hyperframes-animation/blueprints-index.md : pour chaque beat, écrivez la voix off dans la forme que son blueprint candidat implique et étiquetez ce candidat blueprint: id lorsque cela correspond. La vérité pédagogique décide toujours quels beats existent — ne forcez jamais un beat à correspondre à un blueprint, et n'inventez jamais un beat simplement parce qu'une forme éprouvée est disponible. Les visuels sans visage sont inventés en aval, donc les images ne portent pas d'inventaire d'actifs : laissez asset_candidates vide sauf si l'utilisateur a fourni une image réelle public/<nom_de_base>. Utilisez les champs obligatoires exacts des références de storyboard et de script.

Après la rédaction, exécutez le passage de plan de la boucle de révision — ../hyperframes-core/references/review-loop.md § 1 : ouvrez le tableau (ne demandez pas si), présentez le plan comme une proposition, et posez les deux questions — approuver ou modifier, et croquis d'abord (recommandé) ou sauter. Les retours passent par le chat ou le fichier de commentaires du tableau jusqu'à approbation. C'est une porte de point de contrôle (brief contract § 1) : en mode autonome, il n'y a pas de tableau et rien à demander — publiez le même résumé comme avertissement et continuez ; les croquis se fondent dans la construction, et la seule question d'aperçu vient à l'étape 6.

Porte : STORYBOARD.md existe, chaque image a les champs narratifs requis, SCRIPT.md existe lorsque la narration est nécessaire, et l'utilisateur a approuvé le plan image par image (autonome : le résumé a été publié comme avertissement).


É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. (L'état de connexion a déjà été affiché à l'étape 0 ; le moteur recule automatiquement.)

Choisissez la voix de narration à partir de la demande de l'utilisateur avant d'invoquer. Si la demande a nommé une voix, un genre ou un ton, choisissez un identifiant de voix correspondant et passez-le avec --voice <id>. La valeur par défaut du pipeline est sinon Marcia (féminine) sur HeyGen / am_michael sur Kokoro — donc une demande comme « une voix masculine » est ignorée silencieusement à moins que vous ne passiez le drapeau. Les identifiants de voix sont spécifiques au fournisseur ; résolvez par rapport au fournisseur que l'état de connexion de l'étape 0 a sélectionné : HeyGen (connecté) via node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list (ou GET /v3/voices?engine=starfish) ; Kokoro (hors ligne) via le tableau des voix dans <MEDIA_DIR>/audio/references/tts.md (préfixes am_/bm_ masculin, af_/bf_ féminin). Lorsque l'utilisateur n'exprime aucune préférence, revenez à la voix mémorisée (brief contract § 2) avant la valeur par défaut du pipeline, et dites laquelle vous avez utilisée ; omettez --voice uniquement lorsque ni l'un ni l'autre n'en nomme une. Lorsque l'utilisateur a explicitement choisi une voix pour cette exécution, enregistrez-la (prefs.mjs record --key voice).

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &

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 de HeyGen pour la récupération, pas la génération, et la même information d'identification ~/.heygen que pour la TTS. Pour les détails du fournisseur, lisez ../media-use/audio/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.

Le marqueur entièrement silencieux canonique (partagé entre les workflows qui réutilisent ce modèle audio) : music: none dans le bloc YAML supérieur de STORYBOARD.md et pas de SCRIPT.md. Cette combinaison marque le projet silencieux — pas de narration, pas de BGM, pas de SFX. audio.mjs le reconnaît et ne génère rien (il supprime tout audio_meta.json obsolète ; un audio_meta.json absent est ce que l'assemblage traite comme silencieux), donc cette étape est un saut propre. music: none avec narration conserve la TTS et désactive uniquement la BGM. Utilisez exactement cette orthographe — n'improvisez pas d'autres marqueurs.

Porte : le travail audio a commencé, ou le projet est marqué silencieux (music: none + pas de SCRIPT.md).


É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.

Esquissez d'abord le tableau (collaboratif uniquement). Dès que le plan est approuvé, exécutez la passe d'esquisse — ../hyperframes-core/references/review-loop.md § 2 (n'attendez pas l'étape 3.1 ; les esquisses n'utilisent pas les timings) :

… [tronqué pour la traduction]

Individual skills in this repo

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

embedded-captions

>

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.

general-video

>

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