amir-motion

Que fait amir-motion ?

Règles maison d'Amir pour les films produits. Le film explique un produit à un décideur non technique en 30 à 60 secondes : une phrase par étape, le produit qui parle, le son verrouillé sur l'image, un cut net dans chaque format et chaque langue, et rien qui ne soit pas à nous.

<skill-dir> ci-dessous est le dossier de ce fichier : ~/.claude/skills/amir-motion pour Claude Code, ~/.agents/skills/amir-motion pour Pi et les autres agents.

"Invoquer un skill" signifie : l'outil Skill dans Claude Code, /skill:<name> dans Pi, ou bien lire <skills folder>/<name>/SKILL.md et le suivre.

Trois skills, un film. amir-motion possède les règles, le template, le son et le portail de vérification. Il invoque deux skills à des étapes fixes :

Skill	Possède	Appelé à l'étape
stageshow	l'apparence de l'interface utilisateur : retenue, cadrage, crop, objet focal, histoire du curseur, image d'affiche	étapes 1, 4
remotion-best-practices	l'utilisation de Remotion : projet, balisage, Studio, rendu, sous-titres, mise à jour (acheminement vers remotion-*)	étapes 2, 5, 8

Quand l'un d'eux contredit une règle ci-dessous, c'est la règle qui gagne (par exemple l'API Act temporelle de stageshow n'entre jamais dans un film : règle 6).

Les 10 règles (contraignantes)

#	Règle	Limite stricte
1	Moins de paroles	Une phrase par étape, 10 mots max, mots simples pour un décideur. Une seule chose bouge à la fois. 30 à 60 s au total.
2	Temps de lecture	Chaque phrase reste à l'écran ≥ 1,5 s + 0,3 s par mot, ≤ 17 caractères par seconde, en secondes réelles après le rythme. Le texte ne bouge jamais pendant qu'il est lu.
3	Montrer, ne pas écrire	Le produit explique ; le sous-titre ne fait que nommer l'étape. Reconstruire l'interface utilisateur du produit en React (jamais de capture d'écran). Intégrations = logos. Chiffres = compteurs ou graphiques, réels uniquement.
4	La typographie correspond au thème	3 familles max (sérif d'affichage, sans-serif UI, mono). 3 tailles de texte (affichage, sous-titre, étiquette) issues de theme.ts. Sous-titre ≥ 48 px, tout mot UI que l'histoire pointe ≥ 30 px ou amené près par la caméra.
5	Pas de rouge, un seul accent	Rouge seulement pour une erreur ou une action destructive, sauf s'il figure dans la charte de la marque. Une seule couleur d'accent, et elle signifie quelque chose (le résultat, le changement). Les couleurs vivent uniquement dans theme.ts.
6	Une seule horloge	Chaque battement est un nombre dans l'horloge de sa propre scène. L'image, les sous-titres et le son lisent les mêmes nombres. Tout dérive de l'image : pas d'animation CSS, timer, Math.random, Date, ni d'exécution Act de stageshow.
7	Voyager, ne pas fondre	Les scènes bougent comme une seule caméra (montée, descente, zoom avant, zoom arrière), jamais de fondu gris croisé. Départs et arrêts avec easing (jetons uniquement), sorties ≈ moitié d'une entrée, un seul moment héroïque par film.
8	Le son, c'est la moitié du film	Partition synthétique originale dans une tonalité unique, construite sur la timeline ; un signal pour chaque arrivée, clic et aboutissement, aucun pour un mouvement inactif. Master à -14 LUFS intégré, pic ≤ -1 dBFS.
9	Chaque format est un montage différent	Master 16:9 plus un 9:16 recomposé (pas un crop), FR et EN à partir d'un même fichier copie. L'image 0 est une vraie vignette. Lisible en sourdine. Texte à l'intérieur de 80 % du cadre.
10	Rien qui ne soit pas à nous	Pas d'ancien client, d'outil interne ou de marque tierce nulle part (code, copie, noms de fichiers, images, métadonnées). Chaque actif a une source dans ASSETS.md. Pas de chiffre, logo ou témoignage inventé.

Détail complet et chiffres : references/rules.md. D'où ils viennent : references/source.md.

Flux de travail

0. Doctor. node <skill-dir>/scripts/doctor.mjs. Il vérifie Node (22.18+) et installe stageshow et les skills Remotion depuis leurs sources officielles s'ils manquent. Il installe pour Claude Code et Pi ; --agent <id> pour un autre agent. S'il a installé quelque chose, dis-le : les nouveaux skills se chargent dans la session suivante ; entre-temps, lis leurs fichiers SKILL.md directement.
1. Brief. Remplis BRIEF.md avec l'utilisateur : objectif, audience, promesse (≤ 8 mots), formats, durée, marque et ses sources, preuve. Ensuite le tableau des étapes : une ligne par étape (sous-titre, ce que le produit montre, son). Arc narratif et exemples : references/brief.md. Pour chaque scène produit, planifie-la à la manière de stageshow : invoque stageshow et écris, par scène, l'objet focal, l'action, le résultat, ce qui est laissé de côté, et l'exemple en or le plus proche (hero-demo, payout-flow, choreography, table-edit, loading…). Montre le tableau des étapes et obtiens un oui avant toute scène (Amir décide du fond).
2. Scaffold. Invoque remotion-best-practices et garde son routeur ouvert pour toute la construction. Ensuite :

   node <skill-dir>/scripts/new.mjs <folder> --name "Product" --forbid "Former Client,internal.host" --install
   cd <folder> && npm run score && npm run dev
   

   Le template remplace l'étape "create a new project" du routeur ; suis son étape "open the preview" (remotion-studio) pour que l'utilisateur regarde la construction. Utilise un chemin court sur Windows (C:/Users/<moi>/<nom>-motion) : Chrome headless échoue au-delà de 260 caractères. Carte du template : references/architecture.md.
3. Brand. Mets la palette du produit, la police d'affichage et le logo dans theme.ts et public/, chacun avec sa ligne de source dans ASSETS.md. Mappe les propres tokens du produit comme le fait references/looks.md de stageshow. Pas de source de marque ? Demande. N'en invente jamais.
4. Scènes produit (stageshow). Pour chaque scène qui montre le produit : ouvre l'exemple en or que tu as nommé à l'étape 1 (<stageshow>/examples/<gold>/) et lis references/craft.md (retenue, typographie, espacement, icônes), references/framing.md (crop, gouttières, mises en page) et references/motion.md (histoire, curseur, valeurs qui changent) de stageshow. Construis-le dans Remotion avec theme.ts, AppWindow, cursorAt et toStage, en traduisant chaque mouvement de stageshow avec la table dans references/faux-ui.md. Copie la structure et les proportions de l'exemple en or, jamais son identité produit.
5. Balisage Remotion. Avant d'écrire le code de la scène, charge remotion-markup via le routeur ; utilise remotion-captions pour les sous-titres au niveau mot, remotion-multimedia pour les séquences réelles, remotion-maps pour les cartes, remotion-interactivity pour exposer les propriétés dans Studio. Sous ces règles.
6. Son. Écris les signaux dans cues.ts sur les mêmes numéros de battements, définis l'arrangement dans scripts/score.mts, exécute npm run score. Détail : references/sound.md.
7. Dailies. npm run stills génère une planche contact par cut (chaque scène après son atterrissage, son milieu, avant son départ, plus l'image 0). Ouvre les PNG et regarde-les, avec l'œil de révision de stageshow (references/review.md là-bas) : où l'œil se pose-t-il en premier, est-ce le résultat, y a-t-il quelque chose de boxé, plat ou vide ? Corrige et répète. Ne juge jamais le mouvement dans un navigateur sur une machine avec le mouvement réduit activé.
8. Portail de vérification et rendu. npm run lint, puis npm run audit. Corrige chaque FAIL, évalue chaque WARN. Ensuite npm run finish (options de rendu : remotion-render via le routeur) et npm run audit à nouveau : il mesure la loudness, la taille et les fps de chaque MP4. Les règles 1, 3, 4 et 7 nécessitent un œil humain : references/checklist.md.
9. Révision et livraison. Remets les planches et le brief à un relecteur en contexte vierge avant que quoi que ce soit ne parte. Livre les MP4, les planches, les WARN restants et ce qui n'a pas été vérifié. Formats et nommage : references/delivery.md.

Drapeaux rouges, arrêter et corriger

• Un sous-titre de plus de 10 mots, ou deux sous-titres à l'écran que le spectateur doit lire en même temps.
• Une phrase qui explique ce que le produit pourrait montrer en le faisant.
• Une capture d'écran du produit, un vrai nom de client, un vrai numéro de ticket, un logo qui n'est pas à nous.
• Un Act de stageshow, un a.click() ou un setTimeout collé dans une scène au lieu d'être traduit en battements.
• Une scène produit construite sans un exemple en or nommé de stageshow.
• Une valeur hexadécimale ou une taille de police tapée dans une scène.
• interpolate() sans easing sur quelque chose qui commence ou s'arrête ; tout qui apparaît en fondu ensemble.
• Un numéro d'image tapé dans Soundtrack.tsx, ou un son qui atterrit entre deux battements.
• Un fondu croisé entre deux fenêtres sombres (brouillard gris).
• Le cut 9:16 fait en recadrant le 16:9.
• Une image 0 blanche ou à moitié dessinée.
• "Ça a l'air bien dans Studio" : rien n'est fait avant la planche contact et l'audit.