repo-cinema

Compétence de réalisateur repo-cinema

Créez des vidéos de démonstration produit 60fps de qualité Screen Studio directement à partir d'une base de code. Au lieu d'enregistrements d'écran improvisés ou de déplacements de curseur sans but, repo-cinema exécute un pipeline déterministe en 5 étapes : analyser -> planifier -> mettre en scène -> rendre -> vérifier.

Principes architecturaux fondamentaux

1. Cas d'utilisation orientés persona (analyser) : Ne montrez jamais de statistiques de débogage internes ou d'écrans de configuration bruts. Lisez les points d'entrée, les commandes CLI, les routes, les composants et les tests pour synthétiser des scènes concrètes Persona -> Point de douleur -> Action utilisateur -> Résultat durable.
2. Cadrage causal (planifier) : Cadrez la boîte englobante union bbox(trigger ∪ outcome) plutôt que de suivre le pointeur de la souris. Verrouillez la mise au point horizontale fx = viewport.width / 2 chaque fois que la largeur du contenu atteint >= 70% de la scène, afin que les axes, les en-têtes et les colonnes de droite ne soient jamais coupés hors écran.
3. Pauses de lecture stationnaires : Effectuez un zoom avant avant une action, puis maintenez (zoom, fx, fy) 100% gelé pendant l'interaction + la compréhension pour que les spectateurs puissent réellement lire les graphiques et les notifications toast.
4. 60fps déterministe à horloge virtuelle (rendre) : Injectez le shim d'horloge virtuelle (Date, performance.now, requestAnimationFrame) avant le chargement de la page afin que les transitions CSS, les animations ECharts, les trajectoires de curseur C2 à jerk minimum (sin^3(pi * u) arcs, <=12% de gonflement de vitesse, +/-6 degrés d'inclinaison, morphing flèche <-> main pointée) et les doubles ondulations de clic progressent de manière déterministe image par image dans FFmpeg.
5. Auto-inspection par planche contact (vérifier) : Générez un contact-sheet.png en 3x3 + verify-report.json (validation du flux ffprobe + zéro clic hors écran) et inspectez visuellement chaque panneau avant livraison.

Commandes CLI utilitaires (repo-cinema)

Lorsqu'elle est installée globalement ou exécutée depuis le dépôt (npx repo-cinema ... ou node dist/cli.js ...), chaque étape produit des fichiers structurés :

# 1. Lire n'importe quel dépôt et extraire des scénarios d'utilisation (exécuter repomix d'abord facultativement)
repo-cinema analyze --repo ./mon-projet --output ./out/dossier.json [--repomix]

# 2. Construire un storyboard JSON caméra/curseur causal + aperçu HTML visuel
repo-cinema plan --dossier ./out/dossier.json --output ./out/storyboard.json --html ./out/storyboard.html --theme aurora-indigo

# 3. Construire une scène 4-en-1 (url-web | plugin-ou-composant | cli-terminal | hybride)
repo-cinema stage --dossier ./out/dossier.json --plan ./out/storyboard.json --output ./out/stage.html [--url http://localhost:3000]

# 4. Capture CDP 60fps déterministe + SFX stéréo 48kHz (ou TTS facultatif)
repo-cinema render --plan ./out/storyboard.json --stage ./out/stage.html --output ./out/demo.mp4 --gif ./out/demo.gif --audio sfx

# 5. Valider les flux, les limites de télémétrie et construire une planche contact 3x3 visuelle
repo-cinema verify --video ./out/demo.mp4 --telemetry ./out/demo.telemetry.json --contact-sheet ./out/contact-sheet.png --output ./out/verify.json

# Ou exécuter le pipeline complet en 5 étapes en une seule commande :
repo-cinema run --repo ./mon-projet --out-dir ./out --theme aurora-indigo

Workflow du réalisateur

Étape 1 : Analyser le dépôt et l'audience

Exécutez repo-cinema analyze --repo <chemin> --output <dossier.json>. Lisez les useCases générés :

• Vérifiez l'archetype détecté (web-app, desktop-or-ide-plugin, cli-tool, ui-library, hybrid).
• Affinez les légendes ou ajoutez des exemples de fixtures authentiques au domaine si le dépôt a des workflows spécialisés (rappel : zéro donnée personnelle, zéro compteur réservé aux développeurs).

Étape 2 : Planifier le storyboard et approuver le cadrage

Exécutez repo-cinema plan avec --html et inspectez storyboard.html (ou examinez beats, captionWarnings et cameraKeyframes) :

• Corrigez tout avertissement du Anti-Slop Caption Linter (pas de "révolutionnaire", "de nouvelle génération", "de manière transparente" ou de légendes de plus de 96 caractères).
• Assurez-vous que l'image d'ouverture (t=0) et l'image de fermeture (t=durationMs) sont à zoom: 1.0 pour un bouclage fluide du README GIF.

Étape 3 : Sélectionner l'adaptateur de scène

• url-web : L'application est déjà exécutée localement (http://localhost:PORT). L'enregistreur injecte le shim d'horloge virtuelle + la superposition non intrusive curseur/caméra/légende directement sur la page en direct.
• plugin-ou-composant : Plugins de bureau (Obsidian, VS Code, Raycast) ou packages de composants UI rendus dans un studio macOS sombre avec des modules de base réels regroupés via esbuild.
• cli-terminal : Outils en ligne de commande présentés dans un terminal macOS en verre avec sortie de commande synchronisée, tuiles KPI et cartes d'impact des résultats.
• hybride : Studio macOS multi-onglets associant l'exécution CLI à une sortie visuelle en direct et des diagrammes d'architecture.

Étape 4 : Rendre le master 60fps + GIF + Audio

Exécutez repo-cinema render :

• Par défaut --audio sfx synthétise des micro-SFX stéréo 48kHz sans dépendance (clics stéréo alignés sur le curseur x, léger whoosh d'air de zoom, notification de confirmation toast) — zéro clé API externe nécessaire.
• Optionnel --audio tts --tts-provider <macos-say|edge-tts|openai|elevenlabs> mélange la narration proprement avec les micro-SFX.

Étape 5 : Vérifier et inspecter visuellement

Exécutez repo-cinema verify et inspectez contact-sheet.png directement avec votre visionneuse de fichiers/images :

• Confirmez passed: true, offscreenClicks: 0 et un texte lisible sur les 9 vignettes d'images clés.
• Si un élément dépasse près des bords de la fenêtre, augmentez marginPx dans computeCausalFraming ou réduisez zoom de 0.06 et effectuez un nouveau rendu.

Guides de référence

• Physique de la caméra et du curseur
• Adaptateurs de scène 4-en-1
• Schéma du storyboard
• Architecture open-source et attributions

Erreurs courantes à éviter

• Suivre le pointeur image par image lors de la frappe/du glissement : Provoque le mal des transports. Verrouillez toujours le cadre de la caméra par beat pendant les pauses.
• Utiliser setTimeout basé sur l'horloge murale / capture d'écran en temps réel : Provoque des chutes d'images lorsque le CPU monte et produit des enregistrements saccadés de 24 à 40 fps. Conduisez toujours les animations via __rcStep(dtMs).
• Effectuer un zoom trop agressif (> 1.35x) sur des graphiques ou tableaux larges : Coupe les étiquettes de l'axe Y ou les colonnes récapitulatives les plus à droite. Conservez wideLockRatio à 0.70 pour que fx = width / 2.
• Commettre de gros fichiers .mp4 bruts dans le dépôt GitHub : Suivez les .gif optimisés pour palette légère + contact-sheet.png dans docs/assets/ et attachez le .mp4 aux versions GitHub ou ignorez *.mp4 localement.