Vidéo Tutoriel

Que fait Vidéo Tutoriel ?

Transforme "apprends aux gens à utiliser ça" en un dossier de MP4 prêts à l'emploi. Claude est réalisateur, scénariste, opérateur et monteur. L'utilisateur approuve le plan, approuve le script et regarde le résultat.

Comment ça fonctionne (et pourquoi ainsi)

comprendre l'outil → interview → script (approbation) → répétition sans enregistrer
   → calibrer l'écran → enregistrer chaque vidéo → tut prepare → tut plan/stills → tut render → livraison/

Trois problèmes définissent l'architecture. Comprenez-les, car ils expliquent presque toutes les règles ci-dessous :

1. Les clics de l'extension ne déplacent pas la souris du système. L'enregistrement d'écran sort sans curseur. C'est pourquoi un recorder.js injecté dans la page enregistre où et quand chaque clic, touche et navigation a eu lieu, et le curseur, l'onde du clic, le zoom et les callouts sont dessinés plus tard, au montage. Comme le montage connaît le futur, le curseur glisse jusqu'au bouton avant le clic, et la caméra zoome avant l'action.
2. Synchroniser vidéo et événements. Au début et à la fin de chaque prise, __tut.flash() colore la page en magenta pendant une demi-seconde. Le monteur trouve ce flash dans la vidéo et avec lui découvre le temps exact (horloge de la page → temps de la vidéo) et le rectangle exact de la page à l'écran, sans calculer les coordonnées Retina ou de plusieurs moniteurs.
3. Claude est lent entre une action et une autre. La vidéo brute a de longs passages inactifs. Le monteur coupe ces passages (images identiques, donc la coupure n'apparaît pas), accélère les attentes avec mouvement et fige le résultat final le temps nécessaire pour lire la légende. Ne vous pressez donc pas pendant l'enregistrement. La précipitation ne génère que des erreurs.

Chemins utilisés ci-dessous :

• SKILL_DIR : le dossier de cette compétence (où se trouve ce fichier).
• TUT="$SKILL_DIR/scripts/tut", REC="$SKILL_DIR/scripts/rec.sh", WIN="$SKILL_DIR/scripts/chrome-window.sh".
• SERIE : le dossier de la série, par défaut ./tutoriels/<slug-de-la-serie>/ dans le répertoire actuel (demandez si l'utilisateur préfère un autre emplacement).

Toute commande tut imprime une ligne RESULT {json} à la fin. Lisez cette ligne pour décider de la prochaine étape.

Phase 0 : Prérequis (une fois par session)

1. Lancez $TUT doctor. La première fois, il installe le moteur (Remotion) et, au premier rendu, télécharge un Chrome headless (~140 Mo).
2. Chargez les outils de Claude in Chrome en un seul appel ToolSearch : select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__javascript_tool,mcp__claude-in-chrome__find,mcp__claude-in-chrome__read_page. Si l'extension n'est pas connectée, demandez à l'utilisateur de lancer /chrome. Sans elle, pas d'enregistrement.
3. Prévenez l'utilisateur, une fois, de ce qui va se passer sur sa machine : macOS demandera la permission d'Enregistrement d'écran pour l'application du terminal et l'Automatisation de Chrome (pour positionner la fenêtre). Pendant les enregistrements, il doit activer le mode Ne pas déranger et ne pas toucher à la souris ni aux fenêtres.

Phase 1 : Comprendre l'outil

Avant de demander quoi que ce soit, étudiez ce qui va être enseigné. De bonnes questions en dépendent.

• S'il y a un projet local (répertoire) : lisez le README et la documentation, les routes et pages, le menu de navigation, les formulaires et l'onboarding. Listez les fonctionnalités du point de vue de l'utilisateur final ("créer une offre", "inviter un collègue"), pas du code.
• S'il s'agit d'une URL : naviguez avec Claude in Chrome, utilisez read_page avec filter: "interactive" sur les écrans principaux et ouvrez les menus.

Résultat : une courte carte des tâches que le public peut réaliser, avec l'écran de départ de chacune. Détails dans references/script.md.

Phase 2 : Interview et plan de la série

Utilisez AskUserQuestion. Chaque question doit proposer des options concrètes tirées de la carte de la Phase 1 et une recommandation. L'utilisateur ne doit pas avoir à inventer la réponse. Décidez avec lui :

• Public et niveau (qui regarde, ce qu'il sait déjà).
• Objectif de la série (onboarding, réduire le support, démo commerciale, formation interne).
• Quoi enseigner : multiselect avec les tâches de la carte.
• Nombre de vidéos. Proposez vous-même : une vidéo = un résultat ("Comment publier une offre"), de 30 s à 3 min, de 3 à 8 étapes.
• Visuel : préréglage aurora (sombre), grafite ou clair, couleur de la marque et logo.
• Environnement d'enregistrement : URL, compte de démonstration déjà connecté dans Chrome, données fictives, ce qui ne doit jamais apparaître.

Montrez ensuite le plan de la série (tableau : n°, titre, résultat, durée estimée) et attendez le OK.

Phase 3 : Script (point d'approbation)

Écrivez SERIE/serie.json et un SERIE/videos/<NN-slug>/script.json par vidéo, en suivant les schémas et les règles de texte de references/script.md. Les points les plus importants :

• Chaque étape a un titre impératif et court (ce qui apparaît en grand à l'écran), un texte optionnel (où ou pourquoi), les actions (pour vous exécuter) et un resultat_attendu.
• Écrivez les noms de l'interface exactement comme ils apparaissent à l'écran. Le spectateur cherche ce texte.

Lancez $TUT validate SERIE et montrez à l'utilisateur un tableau lisible de chaque script. N'enregistrez rien avant le OK. Réenregistrer coûte bien plus que réécrire.

Phase 4 : Répétition (sans enregistrer)

Pour chaque vidéo, exécutez les étapes dans Chrome sans enregistrer. Ainsi vous découvrez les sélecteurs et les refs qui fonctionnent, les popups inattendus, les chargements lents et ce qui doit être prêt avant (données, connexion). Ensuite :

• Remettez le système à l'état initial (supprimez ce que vous avez créé lors de la répétition, si l'utilisateur est d'accord).
• Si la connexion est nécessaire, demandez à l'utilisateur de se connecter manuellement. Ne tapez jamais de mots de passe et n'enregistrez jamais les écrans de connexion.
• Ajustez le script si quelque chose ne colle pas (et informez l'utilisateur de ce qui a changé).

Phase 5 : Préparer la fenêtre et calibrer (par série, ou si la fenêtre change)

Suivez references/enregistrement.md, section "Fenêtre et calibrage". En résumé :

1. Injectez le recorder.js.
2. Lancez __tut.windowPlan(1280, 720). Avec le marker et les bounds qu'il renvoie, lancez $WIN <marker> <bounds...>.
3. Enregistrez quelques secondes en plein écran avec un flash : $REC start SERIE/.tut/calibrage --full → __tut.flash() → $REC stop ....
4. Lancez $TUT calibrate SERIE et regardez le viewport.png généré.

Il doit montrer uniquement la page, sans barre du navigateur, sans autres fenêtres et sans bords ni avertissements de l'extension. Si une bordure apparaît, configurez insets dans capture.json.

Phase 6 : Enregistrer chaque vidéo

Protocole complet dans references/enregistrement.md. Le squelette d'une prise :

$REC start SERIE/videos/<id>/take-1          # enregistre uniquement la zone de la page (recadrage du calibrage)
javascript_tool: __tut.flash()                # flash initial (synchronisation)
pour chaque étape :
  javascript_tool: __tut.mark('start:<etape>')
  exécutez les actions (computer: left_click / hover / key ; saisie avec __tut.type)
  mettez en évidence ce qui compte : __tut.callout('texte ou sélecteur', 'étiquette courte')
  attendez que le résultat apparaisse à l'écran
  javascript_tool: __tut.mark('end:<etape>')
javascript_tool: __tut.flash()                # flash final (corrige la dérive de l'horloge)
javascript_tool: __tut.dump()  →  $TUT save-events SERIE/videos/<id>/take-1   (JSON via stdin)
$REC stop SERIE/videos/<id>/take-1
$TUT prepare SERIE/videos/<id>/take-1

Règles qui évitent les réenregistrements :

• Après tout chargement complet de page, réinjectez le recorder. Les événements précédents restent stockés dans la session de l'onglet. Avant de quitter pour un autre domaine, faites dump et save-events.
• Si une étape échoue en cours de route, utilisez __tut.mark('abort:<etape>'), revenez à l'état précédent et recommencez avec start:<etape>. Seule la dernière tentative complète compte. N'arrêtez pas l'enregistrement pour cela.
• Pour taper, préférez __tut.type('texte') après avoir cliqué dans le champ (le texte apparaît lettre par lettre). Le computer type fait apparaître le texte d'un coup.
• Pour défiler, préférez __tut.scrollTo('texte ou sélecteur') (défilement fluide). Les pauses sont gratuites, car le monteur les coupe. Ne vous pressez pas.
• Ne déclenchez pas alert / confirm : ils bloquent l'extension. Si une étape exige "Supprimer", prévenez l'utilisateur avant.

Phase 7 : Éditer et réviser

$TUT prepare SERIE/videos/<id>/take-N    # recadre, synchronise, mesure le mouvement → take.json
$TUT stills  SERIE <id>                  # plan + grille de stills dans videos/<id>/qc/stills.jpg

Regardez la grille de stills (Lire l'image) avant de rendre. Vérifiez :

• le curseur et les ondes de clic tombent sur le bon élément ;
• les callouts entourent l'élément ;
• la légende correspond à ce qui est à l'écran ;
• le zoom n'est pas dans une zone vide ;
• aucune donnée sensible n'apparaît.

Corrigez le script (texte) ou réenregistrez uniquement l'étape problématique dans une take-2. Le plan utilise la prise la plus récente qui contient l'étape complète. Ensuite :

$TUT render SERIE <id>                   # → SERIE/livraison/<id>.mp4 + chapitres + contact sheet

Ouvrez la contact sheet (livraison/<id>.sheet.jpg) pour une dernière vérification. Les ajustements visuels (thème, zoom, musique, intro et outro) se trouvent dans references/edition.md.

Phase 8 : Livraison

1. Lancez $TUT deliver SERIE. Il génère livraison/LISEZMOI.md avec titres, durées et chapitres prêts à coller dans YouTube.
2. Montrez à l'utilisateur le dossier livraison/ et un résumé (vidéos, durées, ce qui a été couvert).
3. Si vous pouvez envoyer des fichiers, envoyez le premier MP4.
4. Demandez avant de lancer $TUT clean SERIE, qui supprime les enregistrements bruts raw.mkv et libère de l'espace.

Principes

• Le script commande ; l'enregistrement obéit. Si l'interface réelle diverge du script, arrêtez et ajustez le script avec l'utilisateur. N'improvisez pas pendant l'enregistrement.
• Une étape = une idée à l'écran. Si la légende a besoin de deux phrases, ce sont probablement deux étapes.
• Montrez, ne dites pas. Utilisez le callout pour pointer l'élément. La légende ne fait que nommer l'action.
• Confidentialité par défaut. Enregistrez uniquement la zone de la page, utilisez un compte de démonstration avec des données fictives et ne montrez pas les chaînes de requête dans la barre. Avant d'enregistrer, fermez ce qui ne doit pas apparaître.
• Vérifiez le résultat avec vos yeux. Les stills et la contact sheet existent pour que vous les regardiez. Ne dites pas à l'utilisateur que la vidéo est bonne sans avoir regardé.

Références

• references/script.md : découverte de l'outil, conception de la série, questions d'interview, schémas de serie.json et script.json, règles de texte, exemples.
• references/enregistrement.md : fenêtre, calibrage, prise étape par étape, API de __tut, récupération d'erreurs et pièges de Claude in Chrome et macOS.
• references/edition.md : comment le monteur décide des coupures, du zoom et du curseur, options de thème et d'audio, checklist de QC et résolution de problèmes.