Communitygithub.com

Editing Master

Créez une vidéo produit captivante étape par étape (tutoriel, démo, teaser de lancement, vidéo explicative) avec Claude Code et HyperFrames, à partir d'un code source, d'un lien vers une application ou un site en ligne, de captures d'écran, d'un enregistrement d'écran ou d'une simple description.

Qu'est-ce que Editing Master ?

Editing Master est une compétence IA conçue pour aider les utilisateurs à créer des vidéos produit courtes et dynamiques, qu'il s'agisse de démos, de teasers de lancement ou de vidéos explicatives. Elle fonctionne principalement avec HyperFrames, mais propose également d'autres moteurs vidéo comme onetake, Collage B-roll, Clawd Animation, Manim, Remotion, etc. L'utilisateur peut démarrer à partir d'un code source, d'un lien vers une application en direct, de captures d'écran, d'un enregistrement d'écran ou d'une simple description. La compétence adopte une approche centrée sur l'utilisateur : rien n'est rendu sans son approbation. Elle propose deux modes : un mode rapide (3 arrêts avant le rendu) et un mode pas à pas (environ 11 arrêts). À chaque étape, l'utilisateur peut choisir la voix, la musique, les effets sonores et le script, et approuver un aperçu avant le rendu final. Editing Master est idéal pour les développeurs, les marketeurs ou toute personne souhaitant transformer rapidement un produit en une vidéo professionnelle et engageante.

Compatible avec✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Maher-bouchrara/Editing-Master-skill/tree/main/skills/editing-master

Demander à votre IA préférée

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

Documentation

Que fait Editing Master ?

Transformez un produit en une vidéo courte et vivante. L'utilisateur donne une ligne directrice (« comment l'utiliser, 2 minutes ») et tout ce qu'il a sur le produit ; vous demandez, il choisit, vous construisez, il approuve, vous rendez.

Ce que l'utilisateur peut fournir comme point de départ (un seul suffit ; plus c'est mieux) :

SourceComment l'utiliser
Un code source (le dossier actuel ou un chemin)Lisez le code source de l'interface utilisateur et reconstruisez les écrans réels.
Un lien vers l'application ou le site en directnpx hyperframes capture <url> --json pour obtenir des captures d'écran, les couleurs, les polices et le texte ; reconstruisez les écrans à partir de ces éléments. Demandez un identifiant de test si les pages sont derrière une connexion ; n'utilisez jamais de véritables identifiants.
Captures d'écran ou enregistrement d'écranReconstruisez chaque écran à partir des images ; utilisez les clips de l'enregistrement comme images de coupe dans un appareil encadré.
Seulement une descriptionConcevez des écrans propres et plausibles dans les couleurs de la marque à partir de la description, et mentionnez-le dans le script.

Outils. Par défaut, construisez avec les compétences HyperFrames (hyperframes, hyperframes-cli, hyperframes-registry) et utilisez media-use pour la voix, la musique et les effets sonores. S'ils sont manquants, indiquez à l'utilisateur les commandes d'installation (voir README) et arrêtez-vous. Dites en une ligne quelles compétences vous allez utiliser avant de commencer.

Starter. starter/ est un projet HyperFrames fonctionnel avec les éléments de base ci-dessous (écrans d'un mot, carte de chapitre, mise au point de la caméra avec clic de souris, transitions, outro). Copiez-le dans un nouveau dossier video/ et adaptez-le ; ne partez pas d'une page blanche.

Moteur. Tout ce que cette compétence construit (écrans d'un mot, cartes d'accroche et de chapitre, caméra, curseur, starter) est HyperFrames, et HyperFrames est le moteur par défaut. D'autres compétences vidéo produisent d'autres types de vidéos (caméra plan-séquence, collage de papier, aquarelle, dessins animés 2D, tableaux blancs animés, animations mathématiques, graphiques animés React, montages d'images d'archives, animations d'applications, courts métrages extraits de longs enregistrements) ; chacune a son propre flux de travail. Voir references/video-skills.md et l'étape 2.

La règle d'or : rien sans l'utilisateur

Tout ce qui sera entendu ou vu dans la vidéo (voix, musique, effets sonores, script, apparence) est montré ou joué à l'utilisateur avant que la vidéo ne soit finale, et rien n'est rendu avant que l'utilisateur n'ait approuvé l'aperçu. La fréquence à laquelle vous vous arrêtez pour demander dépend du mode choisi par l'utilisateur : rapide ou pas à pas.

Deux modes : rapide ou pas à pas

Le travail machine est rapide (≈ 1 min pour vocaliser un script de 2 minutes, ≈ 1 min pour trouver la musique, ≈ 3 min pour rendre une vidéo de 2 minutes). Ce qui ralentit une vidéo, c'est le nombre de fois où l'utilisateur doit s'arrêter et répondre. Dans votre premier message, proposez les deux modes et recommandez le mode rapide :

Rapide (recommandé)Pas à pas
Arrêts avant le rendu3, puis « rendre »environ 11, un par étape
Questionstoutes dans un seul message, chacune avec une valeur par défautune étape à la fois
Échantillonsvoix, musique, mixage et effets dans un seul pack d'écoutevoix, musique, effets en sessions séparées
Idéal pourla plupart des vidéos, les utilisateurs qui font confiance aux valeurs par défautles utilisateurs qui veulent contrôler chaque détail

L'utilisateur peut changer de mode à tout moment (« ralentir », « accélérer »).

Mode rapide : trois arrêts, puis rendu

Les étapes 1 à 11 ci-dessous expliquent toujours comment faire chaque partie ; le mode rapide les regroupe en trois arrêts et effectue le travail machine entre les deux sans demander.

Arrêt 1 · Le plan (un message, étapes 1 à 3). Posez les questions brèves (étape 1), affichez le menu des compétences vidéo avec votre recommandation (étape 2), et posez les questions de style avec votre réponse recommandée pour chacune (étape 3, sons des mots et des transitions et sous-titres inclus). Terminez par : « Répondez ce que vous voulez modifier, ou dites utilise tes choix. » Une réponse règle tout. Répétez le plan final en quelques lignes, avec le temps total jusqu'à l'aperçu, et continuez sans autre arrêt.

Entre les arrêts 1 et 2, sans demander : étudiez le produit (étape 7), écrivez le script (étape 8) et préparez le pack d'écoute : la ligne d'accroche en 3 voix, des échantillons de 15 à 20 s de 3 pistes musicales, un mix voix + musique au niveau prévu en utilisant votre voix et piste recommandées, la bande d'effets sonores, et une démo de 5 à 10 s d'un écran d'un mot vocalisé mot par mot avec les sons de mots (étapes 4 à 6). Dites combien de temps cela prend avant de commencer (généralement quelques minutes), et exécutez le travail de voix et de musique en parallèle avec l'étude.

Arrêt 2 · Script, écrans et sons (un message). Envoyez le tableau du script, la liste des étapes que la vidéo montre avec un écran reconstruit (un instantané), et le pack d'écoute, avec votre voix, piste et effets recommandés marqués. Demandez une réponse : « Approuve le script et les écrans, et choisis une voix, une piste et les effets (ou dis utilise tes choix). »

Entre les arrêts 2 et 3, sans demander : vocalisez le script approuvé, transcrivez-le, construisez l'aperçu (étape 9) et vérifiez-le.

Arrêt 3 · Aperçu. Envoyez le lien de l'aperçu avec des horodatages. La narration complète, la musique et les effets sont entendus ici pour la première fois ensemble. Appliquez les modifications et renvoyez-le jusqu'à ce que l'utilisateur l'approuve. Les tours d'aperçu ne sont pas comptés comme des arrêts supplémentaires.

Rendu uniquement lorsque l'utilisateur dit « rendre » (étape 10), puis passez la main (étape 11).

Si l'utilisateur dit « fais-le » en mode rapide, utilisez vos choix recommandés aux arrêts 1 et 2, envoyez quand même le script, les écrans et le pack d'écoute pour qu'il puisse écouter, et continuez à construire l'aperçu sans attendre. L'arrêt 3 n'est jamais sauté : pas de rendu sans aperçu approuvé.

Mode pas à pas

Parcourez les étapes 1 à 11 une par une. Chaque étape : dites combien de temps elle prendra, faites-la, montrez le résultat, demandez « OK pour continuer ? », attendez. N'enchaînez jamais deux étapes sans l'accord de l'utilisateur ; si l'utilisateur dit « fais-le », proposez plutôt de passer en mode rapide.

Dans les deux modes

Commencez par informer l'utilisateur des arrêts et des temps approximatifs (voir « Budget temps »). Avant toute attente de plus de quelques secondes, dites combien de temps cela prendra. Utilisez les temps mesurés dans « Budget temps » ; lorsqu'il n'y a pas de nombre mesuré, dites-le (« plusieurs minutes sur un CPU ») au lieu d'en inventer un.

Les étapes

1 · Quelle vidéo voulez-vous ? (toujours demander d'abord)

Même si l'utilisateur a seulement dit « fais une vidéo », demandez, avec des exemples et une recommandation (en mode rapide, dans le même message que les étapes 2 et 3, avec la question sur le mode) :

  • À quoi sert-elle ? (comment l'utiliser, ce qu'elle fait, un teaser de lancement, une visite guidée des fonctionnalités, une publicité…)
  • Qui la regarde ? (nouveaux utilisateurs, clients, investisseurs, une équipe…)
  • Durée et format : 30 s / 60 s / 2 min ; 16:9 ou 9:16 vertical.
  • Le seul message dont ils doivent se souvenir.
  • Qu'avez-vous sur le produit : un code source, un lien, des captures d'écran, un enregistrement, ou seulement une description ? (Passer si c'est évident, par exemple si vous êtes dans son dépôt.)

Pas à pas : répétez les consignes en trois lignes et attendez « oui ».

2 · Quelle compétence vidéo ? (en recommander une, puis demander)

Lisez references/video-skills.md, puis montrez à l'utilisateur son menu sous forme d'un tableau : le nom de chaque compétence, à quoi ressemble la vidéo, à quoi elle sert le mieux, combien de temps elle prend et combien elle coûte, en termes compréhensibles par un novice. Regroupez-le en « construire une vidéo à partir de zéro » (HyperFrames, onetake, Collage B-roll, Clawd Animation, Lemo Opuscar, explainroo, compétences iart explainer, Manim, Remotion, Animate, Guizang product video, OpenMontage, Lottie) et « éditer une vidéo que vous avez déjà » (Clipify, Cut Video).

Ensuite, recommandez une pour ce projet à partir du tableau « Laquelle pour quel projet ? », en une ou deux lignes : pourquoi elle correspond aux consignes, son coût et sa licence, son temps. Citez une deuxième option proche s'il y en a une. Signalez les licences qui comptent pour les vidéos d'entreprise (onetake, Remotion, compétences AGPL) et tout ce qui nécessite une clé payante, un GPU ou macOS.

Dites que les éléments de base de cette compétence et le starter sont HyperFrames ; avec un autre moteur, suivez le flux de travail de cette autre compétence, et conservez le mode et les règles de cette compétence (rapide ou pas à pas, laisser l'utilisateur tout entendre, aperçu avant rendu). Si la compétence choisie n'est pas installée, donnez sa commande d'installation et attendez.

3 · Questions de style (un message, options + recommandation pour chacune)

  1. Présentateur : aucun, le logo qui pulse avec la voix dans un cadre aux coins arrondis (gratuit), ou un avatar parlant (payant).
  2. Curseur et sons de clic à chaque action ? (recommander oui)
  3. Caméra : zooms légers/moyens/forts (recommander moyen).
  4. Texte cinétique : écrans d'un mot pour l'accroche, cartes de chapitre, une carte d'accroche « c'est la partie la plus facile » ? Quels moments ? (Montrer des exemples de docs/img ou les décrire.)
  5. Sons sur les écrans d'un mot et les transitions : un son court sur chaque mot lorsqu'il apparaît (pop, hit, tick, snap, un boom sur le mot clé, un riser avant une révélation, ou rien) ? Le même son sur chaque mot, ou un son différent sur le mot clé ? Un son à chaque transition (swoosh, whoosh, impact) ? Recommander par exemple « pop sur chaque mot, hit sur le mot clé, swoosh sur les transitions de chapitre ». La voix dit chaque mot d'un écran d'un mot séparément, accentué, dans le ton de l'écran. Voir references/music-sfx-subtitles.md.
  6. Sous-titres : aucun, incrustés dans la vidéo, ou fichiers de sous-titres séparés ? Ensuite, quelles langues ?
    • Incrustés : toujours visibles, sur toutes les plateformes et avec le son désactivé (flux sociaux, publicités), mais une seule langue et un changement signifie un nouveau rendu.
    • Fichiers séparés : .srt (lecteurs, YouTube, LinkedIn) et/ou .vtt (lecteurs web), un par langue, modifiables à la main, les spectateurs les activent/désactivent ; une plateforme ou un lecteur qui les ignore n'en montre aucun.
    • Recommander l'incrustation pour les courts clips sociaux qui se lancent en muet, les fichiers séparés pour les tutoriels et tout ce qui est en plusieurs langues. Les deux est bien (incruster la langue principale, fournir les fichiers pour toutes).
  7. Marque : lisez les couleurs, le logo et les polices à partir de la source ; ne demandez que ce qui manque, et montrez la palette que vous utiliserez.

4 · Voix : écouter, puis choisir

Dites d'abord le temps : les voix gratuites Kokoro prennent ≈ 5 s par ligne (principalement le chargement du modèle) et ≈ 1 min pour un script complet de 2 minutes ; les voix payantes sont rapides mais nécessitent un compte et une clé API.

  1. Proposez les outils : gratuits sur cette machine (Kokoro, npx hyperframes tts, sans compte) ou payants (HeyGen, ElevenLabs : dites ce que chacun nécessite et coûte).
  2. Vocalisez la même ligne d'accroche avec 3 voix (par exemple, homme américain énergique, femme américaine chaleureuse, homme britannique calme) et envoyez les fichiers pour que l'utilisateur puisse écouter.
  3. Attendez le choix. Proposez plus d'échantillons ou une autre vitesse si aucun ne convient.

5 · Musique : écouter, puis choisir

Dites d'abord le temps : une piste CC gratuite prend ≈ 1 min à trouver et télécharger, plus quelques secondes par extrait d'échantillon ; générer de la musique localement (MusicGen) est gratuit mais lent sur un CPU, plusieurs minutes par clip ; un catalogue payant (musique HeyGen) est instantané mais nécessite un compte.

  1. Trouvez 3 pistes candidates qui correspondent à l'ambiance (pistes CC gratuites d'abord ; dites la licence et si une ligne de crédit est nécessaire).
  2. Extrayez un échantillon de 15 à 20 s de chacune, à partir de la partie que vous utiliseriez, et envoyez-les.
  3. Attendez le choix (ou « pas de musique »). Ensuite, dites le niveau que vous utiliserez (≈ 16 % en dessous de la voix) et envoyez un mix de 15 s voix + musique pour que l'équilibre puisse être entendu.

6 · Effets sonores : écouter, puis confirmer

Envoyez les sons de clic, pop, whoosh et de frappe que vous prévoyez d'utiliser (un fichier court pour chacun, ou un seul fichier avec tous à la suite), plus les sons de mots et les sons de transitions choisis à l'étape 3. Ensuite, envoyez une démo de 5 à 10 s d'un écran d'un mot : chaque mot vocalisé individuellement avec son son correspondant, afin que la voix et les sons soient entendus ensemble. Demandez : conserver, modifier (mot par mot s'ils le souhaitent), ou pas d'effets.

7 · Étudier le produit

À partir de ce que l'utilisateur vous a donné, listez les 5 à 8 choses qu'un utilisateur fait réellement, dans l'ordre :

  • Code source : lisez le README, le code source de l'interface utilisateur (balisage, jetons CSS, texte, icônes) et les éléments de la marque ; reconstruisez l'interface réelle à partir de son code source.
  • Lien : capturez les pages importantes (npx hyperframes capture <url> --json), parcourez le flux principal dans un navigateur si nécessaire, et reconstruisez les écrans à partir des captures (mêmes étiquettes, couleurs, rayons, espacements). N'enregistrez pas un site en direct dans la vidéo sauf si l'utilisateur le demande.
  • Captures d'écran/enregistrement : reconstruisez chaque écran à partir des images ; conservez les clips de l'enregistrement comme images de coupe dans un cadre d'appareil.
  • Description uniquement : concevez les écrans à partir de la description et de la marque ; gardez-les simples et marquez-les comme illustratifs dans le script.

N'inventez jamais de fonctionnalités que le produit ne possède pas. Les noms inconnus ou privés deviennent neutres (« Modèle A, B, C ») ; les exemples de secrets sont manifestement faux et divisés dans le code source (ghp_<i></i>…). Si l'apparence n'est pas claire, demandez une capture d'écran au lieu de deviner.

Montrez à l'utilisateur la liste des étapes que vous allez montrer dans la vidéo, et un écran reconstruit (un instantané), et demandez : « Est-ce que ça ressemble à ça, et ce sont les bonnes étapes ? » Attendez.

8 · Script (attendre « approuvé »)

Un tableau de scènes : temps · à l'écran · voix off · effet (écran d'un mot, zoom, carte d'accroche…) · son (par mot sur les écrans d'un mot, par transition). Écrivez les lignes d'un mot avec des points entre les mots (« Coller. Masquer. Envoyer. ») afin que la voix accentue chaque mot. Règles dans references/kinetic-type-and-hooks.md (accroche en 5 s, une idée par scène, 15 à 20 mots par scène, chaque phrase montrée à l'écran, une réinitialisation de l'attention toutes les 20 à 30 s). Envoyez-le et attendez « approuvé » ; modifiez-le aussi souvent que demandé. Vocalisez les lignes uniquement après approbation (≈ 1 min pour un script de 2 minutes avec Kokoro ; dites-le), puis envoyez la narration complète à écouter et demandez avant de construire dessus.

9 · Construire l'aperçu

  • Voix : un fichier par ligne ; transcrivez la narration complète (npx hyperframes transcribe, ≈ 20 s pour un film de 4 minutes) pour les temps des mots. Chaque action atterrit sur son mot (temps du mot + 0,2 s).
  • Sous-titres comme choisi à l'étape 3 : légendes incrustées comme une couche HyperFrames (visibles dans l'aperçu), ou fichiers SRT/VTT à partir de la transcription. Voir references/music-sfx-subtitles.md.
  • Caméra, transitions, curseur : references/transitions-and-camera.md.
  • Rythme et temps de lecture : references/pacing-and-voice.md.
  • Musique, effets, sous-titres, couverture : references/music-sfx-subtitles.md.
  • Vérification : npx hyperframes check, puis npx hyperframes snapshot --at … à chaque étape et coupure ; regardez les images et corrigez les chevauchements

…

[tronqué pour la traduction]

Skills associés