rendydev404/demotion

demotion — démo système automatique depuis l'apparence réelle de l'application

Résultat final : un fichier .mp4 (1920x1080, 60 fps, 1-2 minutes) qui ressemble à un enregistrement d'écran professionnel de la VRAIE application, mais entièrement animé par du code Remotion : fluide (sans les saccades d'un enregistrement réel), reproductible, et facile à mettre à jour quand la fonctionnalité évolue.

Langue de travail : français (réponses, résumé, sous-titres de la vidéo). N'ouvrez pas Chrome et ne vous connectez pas à l'application locale pour « voir » l'interface : la source de vérité pour l'apparence est le CODE ; le résultat est vérifié via les images fixes/vidéos Remotion.

Principes intangibles

1. Interface réelle, pas une imitation. Copiez le balisage + les chaînes de classes Tailwind + les tokens de couleur + la police depuis le code de l'application. Le texte de l'interface (titres, labels, indications, messages) est copié exactement. Ne redessinez pas « similaire ».
2. Vérité produit depuis le CODE. Chaque affirmation dans les sous-titres (prix, quotas, valeurs par défaut, limites, qui paie quoi) est lue depuis le code/la configuration, pas de mémoire ou de supposition. Exemple concret : « Le bot de test utilise-t-il des quotas ? » → vérifiez la route API et la fonction d'enregistrement d'utilisation avant d'écrire le sous-titre. Ce qui n'existe pas dans le code ne doit pas être affirmé.
3. Tous les mouvements sont calculés à partir du temps vidéo. Pas d'animations/transitions CSS, pas de setTimeout, pas d'état/cache entre les trames : chaque trame est une fonction pure de t. (Le rendu parallèle distribue les trames sur plusieurs onglets.)
4. Données de démo fictives, cohérentes, sûres. Une seule entreprise/personnage fictif, numéros/emails/comptes fictifs, mêmes chiffres dans toutes les scènes. N'utilisez pas de vraies données clients. Les statistiques « après quelques jours » sont accompagnées d'un sous-titre « exemple de données ».
5. Durée de 1 à 2 minutes sauf demande contraire : coupez les temps d'attente et accélérez la frappe/le chargement (3-8x) avec un badge « 4x » ; les parties à lire restent à 1-2x. Les sous-titres doivent être lisibles pendant ≥1,2 seconde après accélération.
6. Vérification visuelle : effectuez le rendu d'images fixes aux moments clés et REGARDEZ (lisez l'image) avant le rendu final.

Flux de travail

Phase 0 — Détection & objectif

• Cherchez une démo existante : **/src/demo/kit/stage.tsx. Présente → ne recréez pas ; passez à « Mise à jour de la démo ».
• Absente → besoin d'un projet vidéo. Emplacement par défaut : <repo>/video/ (dossier séparé ; ajoutez à l'exclude du tsconfig racine et aux globalIgnores d'ESLint si le repo utilise Next/ESLint pour que la construction/CI de l'application ne le vérifie pas).
• Demandez UNE SEULE fois ce qui ne peut pas être déduit : durée cible, présence de son/narration ou non, parties obligatoires à afficher. Par défaut : sous-titres en français, sans son, ≤2 minutes, parcours utilisateur de zéro jusqu'à la fonctionnalité principale.

Phase 1 — Recherche produit (lisez le code, ne devinez pas)

Pour chaque page/fonctionnalité à afficher, lisez : la route (app/**/page.tsx), les composants, le texte de l'interface, les forfaits/prix/quotas, les règles par défaut, les limites, le texte du tour/onboarding (c'est la meilleure source de connaissance produit), le flux de paiement, les rôles. Notez dans refererences/storyboard.md au format : page → ce qui est montré → sous-titre → affirmation vérifiée (fichier:ligne). Déléguez la lecture de beaucoup de code à un sous-agent Explore si nécessaire ; la décision finale vous revient.

Phase 2 — Storyboard

Organisez 8 à 14 scènes suivant le parcours utilisateur (page d'accueil → inscription → démarrage/onboarding → paramètres principaux → moment « wahou » → suivi → paiement/abonnement → appel à l'action). Chaque scène : objectif, durée réelle, étapes du curseur, sous-titre. Consultez refererences/storyboard.md (modèle de sous-titre, tempo, étiquette de chapitre « N · NOM »).

Phase 3 — Mise en place

node "$HOME/.claude/skills/demotion/skrip/scaffold.mjs" --dest <repo>/video --nom "Produit" --domaine produit.com --accent "#3ddc97" --install

Copie le moteur (src/demo/kit/*), le squelette Root, une scène exemple, la configuration Tailwind v4. Ensuite :

• Copiez les tokens de couleur + classes de composants CSS de l'application vers src/demo/index.css (supprimez animations/transitions).
• Remplacez la police dans src/demo/fonts.ts par celle utilisée par l'application (@fontsource/<nom>) ; chargez tous les poids utilisés.
• Remplissez BRAND dans config.ts (nom, domaine, couleur d'accent sur fond sombre).
• Testez : REMOTION_FPS=30 npx remotion still src/demo/index.ts S-exemple out/test.png --frame=270 --config=remotion.demo.config.ts. Supprimez scenes/exemple.tsx une fois les vraies scènes en place.

Phase 4 — Portage de l'interface & écriture des scènes

• Composants du produit → src/demo/pages/*.tsx (copiez le balisage/classes ; remplacez les données et gestionnaires par des props statiques). Les atomes génériques sont dans kit/atoms.tsx ; le téléphone WhatsApp dans kit/phone.tsx.
• Une scène = un fichier scenes/<id>.tsx qui exporte DUR (secondes réelles) et le composant ; enregistrez dans scenes/index.ts avec creer("<id>", Comp, DUR_X). Modèle complet : templates/src/scenes/exemple.tsx et refererences/architecture.md (API Stage : curseur/scroll/caméra/spot, data-cur, temps des événements avec T).
• Barre latérale/modal/tour = couche fixed (ne défile pas), contenu de la page = enfants.
• Scène ≥6 et indépendante → parallélisez avec un fork (voir refererences/brief-fork.md) ; le squelette commun (données, pages utilisées par plusieurs scènes) est écrit PAR VOUS en premier.

Phase 5 — Découpage & accélération

Une fois toutes les scènes correctes en 1x, remplissez scenes/coupe.ts (segments S(a,b,v) par scène). Vérifiez le total avec npx remotion compositions src/demo/index.ts --config=remotion.demo.config.ts (colonne durée Demo).

Phase 6 — Vérification

1. npx tsc --noEmit -p tsconfig.json
2. Aperçu léger : REMOTION_FPS=30 npx remotion render src/demo/index.ts Demo out/apercu.mp4 --config=remotion.demo.config.ts --crf=26 --scale=0.5 --concurrency=10 --gl=angle
3. Planche contact : python "$HOME/.claude/skills/demotion/skrip/planche-contact.py" out/apercu.mp4 --toutes-les=5 puis Lisez les images.
4. Vérifiez : texte coupé, sous-titres masquant un bouton cliqué, curseur décalé, chiffres incohérents, affirmation incorrecte, saut de mise en page, moment vide/trop long.

Phase 7 — Rendu final & envoi

powershell -File "$HOME/.claude/skills/demotion/skrip/nettoyer-processus.ps1"   # OBLIGATOIRE s'il y a un ancien rendu (ajoutez -EviterStudio si l'utilisateur utilise Studio)

cd <repo>/video && REMOTION_FPS=60 npx remotion render src/demo/index.ts Demo out/demo.mp4 --config=remotion.demo.config.ts --codec=h264 --crf=17 --concurrency=10 --gl=angle

Exécutez en arrière-plan (run_in_background), sans timeout court. Estimation : ±12-18 images/seconde (GPU), 2 minutes à 60 fps = 7 000 images ≈ 8 minutes. Terminé → vérifiez avec ffprobe (durée, 1920x1080, 60 fps) + une image, puis node ".../skrip/compresser.mjs" out/demo.mp4 out/demo-leger.mp4 --crf 24 si >30 Mo et envoyez avec SendUserFile (limite 30 Mo ; le fichier complet reste sur le disque, informez l'utilisateur).

Mise à jour d'une démo existante

git diff / git log pour voir quelles pages/textes ont changé → mettez à jour uniquement la scène et les pages/* concernés (recopiez le balisage depuis le code), revérifiez les affirmations des sous-titres, ajustez coupe.ts, vérifiez l'image fixe de cette scène, refaites le rendu complet.

Pièges déjà rencontrés (lisez refererences/pieges.md avant de commencer)

React is not defined (JSX au niveau module) · cache entre trames faisant sauter le curseur · processus de rendu orphelins consommant du CPU · blur/backdrop-filter rendant le rendu 3x plus lent · points d'arrêt Tailwind utilisant la largeur de la fenêtre headless · sticky inactif dans le contenu défilé · rendu parallèle + fichiers à moitié écrits cassant le bundle · ffmpeg de Remotion n'ayant pas de filtre fps/tile · affirmation de fonctionnalité erronée repérée par l'utilisateur.

Références dans cette compétence

• refererences/architecture.md — API du moteur (Stage, étapes curseur/défilement/caméra/surlignage, chronologie, kit)
• refererences/pièges.md — liste des pièges + solutions
• refererences/storyboard.md — comment organiser les scènes, sous-titres, tempo, liste de recherche
• refererences/brief-fork.md — modèle de brief pour écrire des scènes en parallèle avec un sous-agent fork
• refererences/rendu.md — commandes de rendu, vitesse, GPU, compression, envoi
• templates/ — code copié par le scaffold · skrip/ — scaffold, nettoyage processus, planche contact, compression
• Exemple concret de 13 scènes (page d'accueil + défilement, tour avec surlignage + dialogue, téléphone scannant QR, écran partagé tableau de bord + téléphone, changement de page + paiement) issu du projet ChatGerCep de l'auteur ; le modèle se trouve dans templates/src/scenes/exemple.tsx et refererences/architecture.md.