demo-video
Vous avez besoin d'une vidéo finie et conçue d'une application. Ce skill est le pipeline éprouvé, clé en main. Il s'appuie sur HyperFrames (HTML→vidéo) mais ajoute les parties qui sont douloureuses à redécouvrir : comment enregistrer l'application vous-même, les solutions de contournement ffmpeg de cette machine, les recettes de montage exactes, le système de design de marque et les pièges qui font perdre des heures.
Rien ici n'est de marque. L'apparence est un design avec des jetons échangeables ; la marque sous laquelle une vidéo est réalisée est une étape, pas une hypothèse — voir Phase 0B.
🚦 Les phases sont regroupées par sujet, pas par ordre de travail
Lisez ceci avant de suivre quoi que ce soit ci-dessous dans l'ordre. Les mécanismes de capture sont documentés en premier parce qu'ils vont ensemble, mais la capture n'est pas la première chose à faire :
Le concept vient en premier : à quoi ça sert ? → l'arc → PLAN.md (+ SCRIPT.md) → APPROUVÉ
(c'est le skill `video-plan`, pas celui-ci) │
│
↓ ce n'est maintenant que les séquences existent ──────────────────────────────────────┘
Phase 0 environnement → 0B marque → 1A capture / 1B ingestion → 3 préparation → 4 composition
→ 5 vérification → 6 rendu
Tourner d'abord semble plus rapide mais ne l'est pas : l'arc est ce qui change lors de la révision, et chaque scène capturée par rapport à un arc non convenu est re-capturée. Les phases 0 et 0B sont les deux choses que vous pouvez exécuter tôt — elles installent les outils et déterminent la palette. Tout dans la phase 1 attend un plan approuvé.
🚀 Essayer — le chemin rapide
🚨 L'appelant choisit ce mode. Vous ne le faites jamais. Vous pouvez l'OFFRIR, en une question. Vous ne pouvez pas le conclure des circonstances, et en particulier, ce ne sont pas un consentement :
- ils ont attaché ou décompressé le package du skill — c'est ainsi que quelqu'un installe un outil, pas une déclaration sur ce qu'il veut fabriquer avec ;
- la demande semble exploratoire, ou est venue sans brief ;
- c'est la première chose qu'ils ont demandée ;
- vous trouveriez le chemin rapide plus pratique.
Quelqu'un qui dit "fais-moi une vidéo de example.com" a demandé une vidéo de example.com. Décider à sa place qu'il voulait vraiment un jetable lui donne un brouillon 1080p silencieux et sans marque alors qu'il s'attendait à une pièce finie — et les parties que vous avez ignorées (l'arc, les mots, la marque) sont exactement celles qui ne peuvent pas être rétrofitées après.
Quand ce n'est pas clair, demandez. "Est-ce un test rapide, ou une vidéo que vous allez réellement montrer à quelqu'un ?" Une ligne, et cela détermine dans lequel des deux modes vous êtes.
Les portes d'approbation ci-dessous existent parce qu'une vidéo que quelqu'un verra coûte cher à se tromper. Un test rapide n'est pas cela, et mettre un réviseur à travers une série de concepts pour savoir si la capture fonctionne, c'est ainsi qu'un bon outil est abandonné dans les dix premières minutes. Les deux échecs sont réels ; seul l'appelant sait lequel s'applique.
Le chemin rapide, une fois que l'appelant l'a choisi :
- Répétez-le — une phrase : "je prends cela comme un test rapide, donc je saute les phases d'approbation et la marque ; dites le mot pour le processus complet." Confirmer est mieux qu'annoncer : cela donne à un appelant qui est dans l'autre mode une dernière occasion bon marché de vous corriger.
- Un
PLAN.mdde deux lignes — l'arc en une phrase, trois ou quatre scènes. Pas deSCRIPT.md, pas de cycle de validation. - La palette neutre. Pas d'extraction de marque, pas de prévisualisation à approuver.
- Silencieux. Pas de narration, pas de clé ElevenLabs, pas de vérification de transcription.
- 1080p seulement. Pas de 4K, pas d'étape de publication.
- Interne seulement — il n'est pas montré à un client et ne va nulle part en public. S'il s'avère que quelqu'un veut le montrer, c'est une vidéo différente : exécutez-la correctement plutôt que de rétrofitter une approbation sur un brouillon.
Tout le reste de ce fichier s'applique toujours — le chemin de capture, la vérification, l'abandon pour consentement ambigu. Ce ne sont pas de la cérémonie ; ce sont ce qui empêche une vidéo cassée de sembler correcte.
🛑 La porte du concept
Ce skill ne commence pas à partir d'une demande. Il commence à partir d'un PLAN.md approuvé (plus un SCRIPT.md textuel pour tout ce qui est destiné au client). Le chemin rapide ci-dessus est la seule exception, et il n'est disponible que lorsque personne en dehors de la pièce ne verra le résultat.
S'il n'y en a pas, c'est le travail du skill video-plan, et cela prend un passage : à quoi sert la vidéo, démo vs guide, la langue, l'arc, la liste des scènes, le texte. Faites cela d'abord et revenez. Lire l'application pour écrire le plan est acceptable — l'enregistrer ne l'est pas.
Deux choses que vous devez faire indépendamment de qui a écrit le plan, et ce sont des questions, pas des annonces :
Demandez s'il faut analyser d'abord. "Dois-je regarder l'application et proposer quoi montrer, ou savez-vous déjà ?" Lire un produit correctement prend du temps réel, et l'appelant peut avoir un écran de départ différent ou une idée finie. Ne dépensez pas ses minutes sur votre hypothèse.
Faites approuver la liste des scènes avant de filmer. Pas le PLAN.md entier ré-approuvé — le plan est déjà approuvé — mais la liste concrète des plans que vous allez enregistrer : ces quatre scènes, dans cet ordre, mettant en lumière ces choses. Cela prend un message et c'est le dernier moment bon marché. Après la capture, changer l'ordre signifie re-tourner, car une scène coupée par rapport à un arc différent ne s'insère pas dans un montage existant.
Confirmez l'origine de la capture dans le chat. Quel environnement est enregistré, et donc quelle version du produit, est la décision de l'utilisateur et la cible bouge.
🚦 Première décision : d'où viennent les séquences ?
Si le sujet est une page web accessible → ENREGISTREZ-LA VOUS-MÊME. Ne demandez pas de screencast.
URL accessible ? ── oui ──┬── c'est la VÔTRE (ou celle de votre client, avec un brief)
│ │ └─▶ Phase 1A · capture (references/playwright-capture.md)
│ │
│ └── c'est le site web de QUELQU'UN D'AUTRE
│ └─▶ Phase 1A · capture, plus references/foreign-sites.md
│ (porte de permission, murs de consentement, en-têtes
│ collants, dérive des rectangles de chargement différé
│ — LISEZ-LE D'ABORD, les primitives de capture ne
│ sont pas sûres sur le DOM d'un étranger telles quelles)
non (application de bureau, Figma, outil natif, mobile,
ou l'utilisateur vous a déjà donné un .mov)
▼
Phase 1B · ingestion d'un screencast
Application personnelle et site tiers sont le même pipeline avec un passage de capture différent. La composition, le système de design, la couche de vérification et la voix off ne changent pas ; l'extraction de marque lit déjà tout site web en direct. Ce qui change, c'est que vous êtes public par défaut, ne pouvez pas initialiser l'état, ne devez rien écrire, et mesurez un DOM qui bouge sous vous. (Une capture authentifiée d'un tiers est possible et déconseillée : elle nécessite une approbation explicite par domaine, le bac à sable du navigateur activé, et le fichier de session détruit à la fin — references/foreign-sites.md §0.)
Ce n'est pas une préférence de style — le chemin de capture donne de meilleures séquences et environ la moitié du travail. Un screencast manuel vous oblige à rétro-concevoir la chronologie à partir des pixels, à chasser et couper les essais de l'auteur, à mesurer chaque projecteur à la main, à recadrer le chrome du navigateur et à auditer la confidentialité. Une capture scriptée n'a aucun de ces problèmes par construction, est sans chrome, vous permet de choisir la taille du texte et peut être réexécutée lorsque l'interface utilisateur change. Mesuré sur le même flux : 71s de screencast nécessitant un balayage dense des images versus une capture de 28s avec chaque temps source et rectangle d'élément fourni dans beats.json — et 1,5 fois la taille du texte dans l'image finale.
Même ainsi, si l'utilisateur a déjà enregistré quelque chose, regardez-le avant de capturer. Il encode son modèle de son propre produit — quelle fonctionnalité montrer, dans quel ordre, et quel est le point. Ce jugement éditorial est la seule chose que le chemin de capture ne vous donne pas gratuitement.
Lisez les références à la demande — ne les préchargez pas :
| Besoin | Lisez |
|---|---|
| sous quelle marque se trouve cette vidéo ? (jetons, logo, police — un site web fonctionne) | references/brand-style.md |
| pilotez et enregistrez l'application vous-même ; 2x ; curseur ; auth ; beats.json | references/playwright-capture.md |
| la cible est un site web que vous ne possédez PAS (porte de permission, murs de consentement, en-têtes collants, dérive des rectangles de chargement différé, médias en direct) | references/foreign-sites.md — lisez AVANT de capturer |
| exécution headless dans un conteneur ou CI (polices CJK/emoji manquantes, Chromium qui meurt à la première capture, "L'exécutable n'existe pas" juste après l'installation) | references/container-capture.md |
après avoir changé quoi que ce soit dans capture-lib.js | node <skill>/scripts/test-foreign-sites.mjs — fixtures locales, pas de réseau ; chaque cas est un défaut qui a été livré |
| le projecteur a encadré les mauvais pixels et les coordonnées étaient correctes | references/foreign-sites.md §4 — mesurez avec stableRect, pas boundingBox |
| re-capture dans une autre langue ; re-timing d'un montage existant sans reconstruire la chronologie | references/playwright-capture.md §9-10 |
| remis un .mov plein d'essais — sélectionnez et coupez les bonnes prises | references/multiple-takes.md |
| ffmpeg/CLI ne s'exécute pas, "0 Go libre", bunx, permissions | references/pitfalls.md §6 + exécutez scripts/setup-render-env.sh |
| **commandes exactes de coupe/recadrage/vitesse/image fixe/retrait d'images | references/ffmpeg-recipes.md |
| l'apparence : fenêtre, projecteur, cartes, fondus, arrêts sur image | references/design-system.md (+ assets/template.html) |
| construction d'un guide en deux parties (panneaux conceptuels, scènes d'action, chorégraphie) | references/guide-track-build.md |
| narration / voix off ElevenLabs, quota + pièges vocaux | references/voiceover.md |
| la voix dit-elle réellement le script ? (noms de marques, acronymes) | scripts/verify-narration.mjs — code de sortie 1 = à corriger |
| l'application affiche vide, 500, ou "hors ligne" AVANT que vous ne capturiez | references/pitfalls.md §17 |
| le contrat TIMELINE.md ; agir sur le retour "0:12 glisse" | references/timeline-and-review.md |
| où mettre le projecteur ? (ne jamais estimer à l'œil) | references/design-system.md → "NE JAMAIS estimer les coordonnées" |
| un bord du projecteur continue de couper quelque chose, quelle que soit la marge utilisée | scripts/measure-spots.mjs — mesurez l'espace blanc de la disposition à la place |
| le contrôle ne peut vraiment pas être encadré (pas de bande de 6 px sur un bord) | references/design-system.md → "Parfois il n'y a pas de boîte" |
| le chrome de l'application se trouve là où va la carte de légende | references/design-system.md → placement de carte par scène + diviser une carte à la coupe |
| l'image fixe montre l'état APRÈS le clic (projecteur sur un espace vide) | references/playwright-capture.md §16 — figez sur la marque _hover |
| un message scripté de chat a disparu ; l'agent a "fini" mais ne l'avait pas fait | references/playwright-capture.md §17-18 |
| "pourquoi ma séquence est-elle figée / mal alignée / erreur" | references/pitfalls.md |
| anneaux noirs errants sur les clics ; un correctif qui n'a rien fait en silence | references/pitfalls.md §11-13 |
| une vérification a dit PASSÉ mais la chose est fausse | references/pitfalls.md §15 |
| avant chaque rendu (audit mécanique, code de sortie 1 = à corriger) | scripts/audit-composition.mjs |
| le sujet est-il réellement visible ? (dégagement des projecteurs + occlusion des cartes ; code de sortie 1 = à corriger, code de sortie 2 = impossible à vérifier) | scripts/verify-material.mjs |
| après les instantanés : recadrage zoomé par projecteur (une lecture plein écran manque le texte coupé) | scripts/crop-spots.mjs |
| l'image montre-t-elle ce que la voix DIT ? (guides narrés, par sujet) | scripts/verify-topics.mjs |
| l'application enregistre ce que vous faites — instantané avant, restauration après | scripts/app-state.mjs |
| docs d'entraînement autonomes à côté de la vidéo (uniquement si demandé) | references/companion-docs.md |
Travaillez la boucle sur les instantanés, pas sur les rendus. snapshot --at t1,t2,… coûte des secondes ; un rendu coûte des minutes. Obtenez le cadrage, les coordonnées des projecteurs, le texte et la confidentialité sur les images fixes, puis rendez une fois et vérifiez le mouvement.
Phase 0 — Environnement (une fois par machine/session)
Une commande gère tous les cas — macOS ou Linux, une machine saine, un ffmpeg manquant ou dépouillé, un HyperFrames manquant, ou le bug statfs du faux "0 Go libre". Ne diagnostiquez pas à la main :
render_env="$(bash <skill>/scripts/setup-render-env.sh)" && eval "$render_env"
Pas source <(…). Bash rapporte l'état de source, pas de la substitution de processus qui l'alimente, donc un bootstrap qui meurt à mi-chemin — pas de réseau, une installation échouée — rapporte un succès et vous laisse avec la moitié de ses exports définis. La capture en premier fait surface l'échec et n'applique rien quand il échoue.
Il installe hyperframes (épinglé) si absent, résout un ffmpeg complet, corrige la vérification du disque uniquement si ce système d'exploitation a effectivement le bug, et exporte HYPERFRAMES_FFMPEG_PATH, HYPERFRAMES_FFPROBE_PATH, PRODUCER_BROWSER_GPU_MODE et HYPERFRAMES_CLI.
Il recherche des filtres, pas un binaire nommé ffmpeg. Le pipeline a besoin de fps/pad (Phase 3 épinglage d'image), crop (Phase 1B suppression du chrome) et freezedetect (audit-composition.mjs + le balayage du silence de la Phase 6). Deux builds dépouillées sont couramment déjà sur PATH et passent une vérification naïve avant d'échouer en milieu de pipeline : le ffmpeg intégré de Playwright et le bundle du compositeur de Remotion. Ordre de résolution : un ffmpeg système complet → brew (macOS) → les packages ffmpeg-static/ffprobe-static dans ~/.hyperframes-cli (toutes les plateformes, sans sudo — le chemin normal sur Linux) → un bundle du compositeur Remotion enveloppé en dernier recours, qui avertit car il n'a pas de freezedetect, donc ces deux vérifications de gel passent silencieusement et vous devez vérifier manuellement (pièges #1, #16).
Ensuite, effectuez le rendu via la CLI locale vers laquelle il vous dirige ($HYPERFRAMES_CLI), jamais bunx/npx hyperframes — ceux-ci rematérialisent une copie fraîche à chaque fois