synctake

Compétence SyncTake pour agents de codage

Cette compétence indique aux agents de codage (Claude Code, Cursor, Antigravity, OpenCode, Codex) comment produire de manière autonome des vidéos de démonstration narrées et soignées d'applications web.

---

🎯 Quand activer cette compétence

Activez ce workflow chaque fois que l'utilisateur demande :

• "Crée une vidéo de démo / présentation de ce projet / fonctionnalité"
• "Enregistre une vidéo montrant comment fonctionne l'application"
• "Fais une vidéo de 30s/60s présentant cette nouvelle UI"
• "Montre cette fonctionnalité en vidéo avec narration"

---

🛠️ Étape 0 : Vérification de l'environnement et des dépendances

Avant d'exécuter le workflow, vérifiez que les outils nécessaires sont installés :

1. Vérifier la CLI SyncTake :

   synctake --help || pip install -e /path/to/synctake
   

2. Vérifier Playwright (pour la capture headless autonome) :

   python -c "import playwright" 2>/dev/null || (pip install playwright && playwright install chromium)
   

---

📋 Le guide en 5 étapes pour l'agent autonome

[1. Inspecter l'UI] ──> [2. Créer synctake.json] ──> [3. Démarrer le serveur de développement] ──> [4. Exécuter le pipeline autonome] ──> [5. Livrer la vidéo]

Étape 1 : Inspecter le code et les points de repère de l'UI

1. Parcourez l'espace de travail pour trouver les routes, composants et vues HTML (par ex. src/, pages/, app/, public/index.html).
2. Identifiez les points de repère visuels clés pour la vidéo :
   • En-tête, navigation, hero (#hero, header, .brand)
   • Composants interactifs, formulaires, boutons (#deploy-btn, button[type='submit'], select)
   • Cartes, métriques, graphiques ([data-testid='metrics'], .card, .recommendation-grid)
3. Alternativement, exécutez l'inspecteur d'UI intégré :

   synctake plan ./public/index.html --prompt "<guidage utilisateur>" --duration <secondes>
   

---

Étape 2 : Créer la spécification de la démonstration (synctake.json)

Créez synctake.json à la racine du projet.

Règles de rythme et d'écriture :

• Mots par minute : Visez 140–150 MPM (~2,4 mots par seconde). Une scène de 10 secondes doit contenir environ 20 à 24 mots.
• Horodatage des scènes (at) : Doit être strictement croissant.
• Annotation à l'écran : Gardez title et callout courts et percutants (ils apparaissent comme des cartes flottantes natives).
• Focus : Utilisez de vrais sélecteurs CSS valides (#id, .class, [data-testid='...']).
• Narration : Écrivez dans un style naturel et conversationnel. Ne lisez jamais à voix haute des symboles de code bruts, des sélecteurs ou des horodatages.

{
  "title": "Présentation de la fonctionnalité",
  "duration_seconds": 30.0,
  "voice": {
    "provider": "system"
  },
  "scenes": [
    {
      "id": "01-vue-ensemble",
      "at": 0.0,
      "title": "Vue d'ensemble du cluster en direct",
      "callout": "Métriques de santé et télémétrie en temps réel entre régions",
      "focus": "#metrics-card",
      "text": "Bienvenue ! Dans cette démonstration, nous allons explorer la santé du cluster en temps réel et la correction automatisée."
    },
    {
      "id": "02-actions",
      "at": 12.0,
      "title": "Déploiements en un clic",
      "callout": "Validation automatisée avec approbation humaine",
      "focus": "#deploy-btn",
      "text": "D'un simple clic, notre pipeline valide les changements de configuration et applique des mises à jour progressives."
    }
  ]
}

---

Étape 3 : S'assurer que le serveur de développement est en cours d'exécution

Vérifiez si le serveur de développement de l'application web écoute déjà sur un port local :

lsof -i :3000 -i :5173 -i :8000 || true

S'il n'est pas en cours d'exécution, lancez-le en arrière-plan :

• Pour du HTML statique : python3 -m http.server 5173 --bind 127.0.0.1
• Pour Vite : npm run dev
• Pour Next.js : npm run dev

---

Étape 4 : Exécuter le pipeline autonome

Exécutez la commande d'exécution autonome tout-en-un :

synctake run \
  --url http://127.0.0.1:5173 \
  --config ./synctake.json \
  --out ./demo.mp4

Si l'utilisateur a fourni un clip de référence vocale (par ex. voice.wav), passez --ref-audio ./voice.wav pour cloner sa voix.

Ce que synctake run fait automatiquement :

1. Capture d'écran headless : Lance Chromium via Playwright, parcourt les repères de scène, met en évidence les éléments avec des anneaux de focus adaptatifs à l'hôte, affiche des badges d'annotation natifs et sauvegarde le WebM calibré.
2. Synthèse vocale : Synthétise un anglais parlé clair (ou clone la voix de l'utilisateur).
3. Validation du rythme et des créneaux : Vérifie qu'aucun clip audio ne dépasse la durée de scène allouée.
4. Assemblage du canevas principal : Place les clips aux repères exacts, comble les pauses avec du silence numérique et produit un audio stéréo 48 kHz calibré.
5. Multiplexage sans perte : Normalise l'audio selon la norme de diffusion (-16 LUFS) et multiplexe en MP4 H.264 1080p avec une perte vidéo générationnelle nulle.

---

Étape 5 : Livrer la vidéo finale

Une fois que synctake run est terminé :

1. Vérifiez que la vidéo de sortie existe et n'est pas vide (ls -lh ./demo.mp4).
2. Présentez le livrable vidéo terminé à l'utilisateur avec son chemin de fichier absolu :

   "Voici votre vidéo de démonstration terminée : demo.mp4 !"