Communitygithub.com

ahmadrashad1/video

Produisez une vidéo de démonstration d'écran de type Loom (MP4, 1080p) avec narration, sous-titres et la voix clonée de l'utilisateur via Fish Audio, sans webcam.

Qu'est-ce que video ?

Cette compétence permet de planifier et réaliser automatiquement des vidéos de démonstration d'applications web ou de sites, à la manière d'un enregistrement Loom. Elle orchestre l'écriture d'un plan narratif, l'inspection des pages réelles, la génération de la voix clonée (via Fish Audio), l'enregistrement des actions, le rendu final avec sous-titres, et la vérification automatique de chaque scène. L'utilisateur peut déclencher une nouvelle démo ou reprendre une session existante via la commande `loom`. La compétence impose des règles strictes (pas d'action destructive sans approbation, pas de données secrètes dans la narration, pas de séquences simulées) et gère automatiquement les échecs d'enregistrement, les bannières de cookies ou les connexions. Le résultat est un fichier MP4 1080p sauvegardé dans `~/Videos/loom/`. Elle est conçue pour fonctionner avec Fish Audio pour la voix, mais peut aussi utiliser une voix de synthèse (espeak) en mode prévisualisation.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ahmadrashad1/loom-skill/tree/HEAD/skills/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 de démonstration narrée

Vous planifiez et pilotez la démonstration. La commande loom (disponible dans votre PATH tant que ce plugin est activé) gère la narration, l'enregistrement, le rendu et la vérification. Exécutez-la simplement avec loom … depuis n'importe quel répertoire. Les vidéos sont sauvegardées dans le dossier d'enregistrements indiqué par loom status (par défaut ~/Videos/loom/<slug>/). Ci-dessous, <rec> désigne ce dossier.

Demande : $ARGUMENTS

Si la demande correspond au slug d'un enregistrement existant (loom status les liste), reprenez-le depuis sa première étape non terminée. Un plan non approuvé nécessite encore une approbation.

Règles non négociables

  1. N'enregistrez jamais un plan non approuvé. Écrivez le plan avec "approved": false, montrez-le à l'utilisateur, et passez-le à true uniquement après son approbation (ou s'il a explicitement dit de continuer sans relecture).
  2. Les actions destructrices ou irréversibles (suppression, achat, déploiement, envoi, paiement, modification des paramètres de production) doivent être marquées "destructive": true et nécessitent l'accord explicite de l'utilisateur pour cette vidéo avant d'ajouter --allow-destructive.
  3. Pas de secrets dans plan.json ou la narration. Les mots de passe/tokens tapés utilisent "secret_env": "VAR" ; les clés, emails, tokens, numéros de compte affichés à l'écran vont dans "redact" (sélecteurs CSS, floutés pendant toute la vidéo). N'imprimez jamais le contenu de ~/.config/loom/*.env.
  4. Pas d'images fabriquées. Chaque scène doit être réellement jouée par l'enregistreur. Si une scène échoue, corrigez le plan et réenregistrez. Ne simulez jamais un résultat, et ne présentez jamais une vidéo dont loom verify a échoué comme étant terminée.
  5. Pas de webcam, voix de l'utilisateur uniquement. La narration utilise le modèle de voix Fish Audio de l'utilisateur. N'utilisez jamais et ne suggérez jamais la voix de quelqu'un d'autre sans sa permission.

Workflow

0. Configuration vocale (première exécution)

Exécutez loom status. S'il indique VOIX NON CONFIGURÉE, configurez la voix avant toute autre chose ; suivez la compétence /loom:setup (${CLAUDE_PLUGIN_ROOT}/skills/setup/SKILL.md). Demandez à l'utilisateur son propre ID de modèle vocal Fish Audio ; n'en inventez jamais et ne réutilisez jamais. S'il ne souhaite pas la configurer maintenant, vous pouvez continuer avec --provider espeak comme voix de prévisualisation robotique, en précisant clairement que ce n'est pas sa voix.

A. Comprendre

Déterminez : quelle application/URL, le résultat que le spectateur doit obtenir, le public visé, et si une connexion est nécessaire. Si l'un de ces points est vraiment flou, posez une question concise ; sinon, continuez avec des hypothèses raisonnables en les énonçant.

B. Inspecter l'application réelle

loom inspect <url> --out <rec>/<slug>/inspect

Lisez la capture d'écran (<rec>/<slug>/inspect/page.png) et utilisez les sélecteurs affichés. Inspectez chaque page que la démo visitera (suivez le flux) pour que les sélecteurs soient réels, pas devinés. Privilégiez #id, [data-testid=…], puis role=button[name="…"], puis text=…. Les fichiers locaux fonctionnent avec des URL file:///….

C. Écrire le plan

Créez <rec>/<slug>/plan.json en suivant ${CLAUDE_PLUGIN_ROOT}/skills/video/reference/plan-schema.md. Directives :

  • 4 à 10 scènes ; commencez par une scène title, terminez par une courte scène récapitulative.
  • Narration : première personne, conversationnelle, comme un collègue enregistrant un Loom. 1 à 3 phrases par scène (≈ 6 à 20 s). Décrivez ce que le spectateur voit au fur et à mesure que cela se produit ; ne lisez pas les sélecteurs ou les URL caractère par caractère.
  • Les actions s'exécutent pendant que la narration de cette scène est jouée ; gardez-les assez courtes pour tenir (≈ 2,6 mots par seconde de parole). Divisez les longs flux en plusieurs scènes.
  • Ajoutez expect à chaque scène qui change d'état, pour détecter les échecs.
  • loom validate <slug> jusqu'à ce que ce soit ok.

Présentez le plan à l'utilisateur sous forme de tableau (scène · ce qui se passe à l'écran · narration) ainsi que tout élément destructeur, les secrets nécessaires et la durée estimée. Arrêtez-vous et attendez l'approbation. Après approbation, mettez "approved": true.

D. Narrer

loom voice <slug> : un WAV par scène dans la voix clonée (mis en cache ; seules les scènes modifiées sont regénérées). Vérifiez que les durées semblent correctes.

E. Enregistrer

loom record <slug> (ajoutez --allow-destructive uniquement selon la règle 2). En cas d'échec, lisez l'erreur et <rec>/<slug>/raw/failure-<scene>.png, corrigez les sélecteurs/attentes dans le plan, et réexécutez. Ré-inspectez les pages si nécessaire.

F. Produire

loom render <slug> (--captions burn si l'utilisateur veut des sous-titres incrustés ; par défaut, une piste de sous-titres intégrée plus subtitles/captions.srt).

G. Vérifier (toujours)

loom verify <slug>, puis regardez chaque miniature dans <rec>/<slug>/scenes/*.jpg avec l'outil de lecture : l'état d'écran attendu est-il visible, y a-t-il des informations sensibles non masquées, des pages d'erreur ou des bannières de cookies couvrant le contenu ? Si un avertissement indique que les actions ont dépassé la narration, envisagez de diviser cette scène. Corrigez et refaites les étapes nécessaires jusqu'à réussite.

H. Rapporter

Donnez le chemin vers <rec>/<slug>/final_video.mp4, sa durée, la liste des scènes et les éventuelles limitations (par exemple, utilisation d'une voix de prévisualisation). Mentionnez que l'aperçu intégré de VS Code lit les MP4 sans son ; utilisez un lecteur vidéo normal. Raccourci pour les étapes D à G une fois le plan approuvé : loom run <slug>.

Dépannage

  • loom: command not found → le bin/ du plugin n'est pas dans le PATH ; exécutez ${CLAUDE_PLUGIN_ROOT}/bin/loom à la place.
  • loom needs uv → dites à l'utilisateur d'installer uv (la commande est affichée).
  • Élément non trouvé → réexécutez loom inspect sur cette page ; ajoutez wait_for.
  • Bannière de cookies/consentement → ajoutez un click sur son bouton d'acceptation dans la première scène.
  • Connexion → type avec secret_env ; demandez à l'utilisateur d'exporter la variable.
  • Fish Audio 401 → mauvaise clé API. 402 → pas de crédit API pour ce modèle ; suggérez d'ajouter du crédit ou de basculer le paramètre de modèle du plugin sur s2.1-pro-free.
  • Démonstrations de bureau (hors navigateur) → --recorder obs (OBS doit être en cours d'exécution avec WebSocket activé et une scène de capture d'écran). Cette voie est expérimentale.

Skills associés