script-demo

Compétence Script de Démo

Créez des scripts de démonstration vidéo structurés en explorant le produit en direct et en co-écrivant avec l'utilisateur.

Pourquoi Cette Compétence Existe

Les bonnes vidéos de démo ont besoin de bons scripts. Les mauvaises démos divaguent, sautent des éléments importants ou avancent trop vite. Cette compétence produit un script précis et révisable que /record-demo peut exécuter automatiquement.

Flux de Travail

Étape 1 : Brief

Recueillez le contexte auprès de l'utilisateur :

Obligatoire :

• Quel produit/fonctionnalité démontrer
• URL cible (staging/production)
• Qui est le public ? (prospects, utilisateurs existants, développeurs, équipe interne)

Optionnel (demander si non fourni) :

• Flux spécifique à montrer (ex. "créer un cas de test avec des étapes et résultats attendus")
• Ton (professionnel, décontracté, technique, marketing)
• Durée cible (30s, 1min, 3min, 5min)
• Points clés à souligner
• Éléments à éviter/sauter

Hypothèses par défaut si non précisé :

• Public : prospects évaluant le produit
• Ton : professionnel mais accessible
• Durée : 1-2 minutes
• Résolution : 1920x1080

Étape 2 : Exploration du Produit

Utilisez les outils de navigateur Playwright pour explorer l'interface utilisateur réelle du produit.

C'est crucial — ne devinez pas à quoi ressemble l'interface. Naviguez-y réellement :

1. Ouvrez l'URL cible dans le navigateur
2. Prenez des captures d'écran de chaque page/écran pertinent
3. Notez les libellés réels des boutons, menus, champs de formulaire
4. Comprenez le flux de navigation
5. Identifiez les éléments UI par leurs sélecteurs réels

Exemple de flux d'exploration :
  → Naviguer vers l'URL de l'application
  → Capturer l'écran du tableau de bord
  → Cliquer sur la fonctionnalité cible
  → Capturer chaque changement d'état
  → Noter les sélecteurs exacts pour tous les éléments interactifs
  → Vérifier les états de chargement, animations, fenêtres modales

Pourquoi explorer d'abord ?

• Noms de sélecteurs réels (pas des suppositions qui échoueront pendant l'enregistrement)
• Narration précise correspondant à ce qui est à l'écran
• Découvrez le flux naturel (il y a peut-être une étape que l'utilisateur a oubliée)
• Repérez les problèmes potentiels (murs d'authentification, chargements lents, états vides)

Authentification :

• Si l'application nécessite une connexion, demandez à l'utilisateur des identifiants ou une session pré-authentifiée
• Sinon, utilisez un environnement de staging avec des données de test
• Note : sauvegardez les cookies/session pour la phase d'enregistrement

Étape 3 : Rédaction du Script

Générez un script structuré au format JSON avec des tableaux metadata et scenes.

Pour le schéma JSON complet, la référence des actions et les styles de surbrillance, consultez references/script-format.md.

Étape 4 : Révision et Itération

Présentez le script à l'utilisateur dans un format lisible (PAS de JSON brut). Formatez-le ainsi :

🎬 Script de Démo : "Création de votre premier cas de test"
Durée : ~90 secondes | Public : Prospects

━━━ Scène 1 : Ouverture — Aperçu du Tableau de Bord ━━━
  → Naviguer vers /dashboard
  🎙️ "Bienvenue sur OneTest. Créons votre premier cas de test."
  ⏸️ Pause de 2s

━━━ Scène 2 : Naviguer vers Cas de Test ━━━
  → Cliquer : élément de la barre latérale "Cas de Test"
  🎙️ "Ouvrez la section Cas de Test depuis la barre latérale."
  ✨ Surbrillance : élément de la barre latérale (pulsation)
  ⏸️ Pause de 1,5s

━━━ Scène 3 : Créer un Nouveau Cas de Test ━━━
  → Cliquer : bouton "Créer"
  🎙️ "Cliquez sur Créer pour démarrer un nouveau cas de test."
  ✨ Surbrillance : bouton Créer (lueur)
  ⏸️ Pause de 2s

  → Saisir le titre : "Connexion avec identifiants valides"
  🎙️ "Donnez-lui un titre descriptif."
  ⏸️ Pause de 1s

  → Saisir la description : "Vérifier que les utilisateurs peuvent se connecter..."
  🎙️ "Ajoutez une description claire de ce que ce cas de test vérifie."
  ⏸️ Pause de 1,5s

━━━ Scène 4 : Fermeture ━━━
  → Attendre 2s (rester sur l'écran final)
  🎙️ "Et voilà — votre premier cas de test est prêt."
  ⏸️ Pause de 1,5s

Total estimé : ~90 secondes

Itérer avec l'utilisateur :

• "Vous voulez ajouter/supprimer des scènes ?"
• "Le rythme doit-il être plus rapide ou plus lent ?"
• "Changeriez-vous du texte de la narration ?"
• "Vous voulez réorganiser quelque chose ?"

Étape 5 : Sauvegarde et Transmission

Une fois approuvé :

1. Sauvegarder le script JSON dans workspace/<date>/demo-script-<name>.json
2. Sauvegarder la version lisible dans workspace/<date>/demo-script-<name>.md
3. Dire à l'utilisateur : "Script prêt ! Exécutez /record-demo pour l'enregistrer, ou je peux commencer l'enregistrement maintenant."

Référence des Actions du Script

10 actions prises en charge : navigate, click, type, select, scroll, hover, wait, screenshot, drag, keyboard.

5 styles de surbrillance : pulse, glow, arrow, dim-others, zoom (injectés via CSS/JS).

Référence complète avec champs et exemples dans references/script-format.md.

Directives de Narration

Bonne narration :

• Phrases courtes (moins de 15 mots)
• Temps présent, voix active ("Cliquez sur Créer" pas "Nous allons cliquer sur le bouton Créer")
• Décrivez ce qui se passe ET pourquoi ("Ajoutez une description pour que votre équipe sache quoi tester")
• Ne narrez pas l'évidence ("Je déplace mon curseur vers..." — non)
• Faites correspondre la pause à la longueur de la narration (narration plus longue = pause plus longue)

Règles de rythme :

• Première scène : pauses plus longues (le spectateur s'oriente)
• Scènes du milieu : pauses modérées
• Dernière scène : rester 2-3 secondes sur l'état final
• Après la saisie : courte pause pour laisser le spectateur lire
• Après une navigation de page : attendre le chargement + 1s pour que le spectateur parcoure

Ton par public :

• Prospects : concentrez-vous sur les avantages, restez simple, évitez le jargon
• Développeurs : utilisez des termes techniques, montrez la configuration, mentionnez les API
• Interne : peut être plus décontracté, référez-vous aux conventions de l'équipe

Conseils pour d'Excellentes Démos

1. Commencez avec des données — Ne faites pas une démo sur une application vide. Assurez-vous que les données de test existent.
2. Montrez le parcours heureux — Gardez les cas limites pour la documentation, pas pour les démos.
3. Une fonctionnalité par vidéo — Vidéo ciblée de 90 secondes > visite guidée de 10 minutes.
4. Terminez sur le résultat — Montrez la chose créée/terminée, pas un menu.
5. Nommez les choses de manière réaliste — "Connexion avec identifiants valides" > "Test 1".
6. Nettoyez l'interface — Fermez les onglets inutiles, masquez les outils de développement, utilisez un profil de navigateur propre.