Motion Graphics pour Vidéos IA
À utiliser avec remotion-best-practices et cinematic-camera. Cette compétence gère la réception, la recherche, les ressources authentiques, la sélection des références, la qualité visuelle et l'autorisation de livraison.
Contrat d'exécution strict
Chaque construction doit passer scripts/promptible-gate.mjs.
Chemins courants :
- Claude Code :
.claude/skills/motion-graphics/scripts/promptible-gate.mjs - Autres agents :
.agents/skills/motion-graphics/scripts/promptible-gate.mjs
N'écrivez pas de code de composition tant que le script n'affiche pas BUILD AUTHORIZED. Ne livrez pas un rendu tant qu'il n'affiche pas DELIVERY AUTHORIZED. Une commande qui échoue est un arrêt immédiat.
Étape 1 — Réception concise
Ne demandez que les choix manquants :
- Format : Insert Instagram 4:3 demi-écran (1440×1080) ou Instagram 9:16 plein écran (1080×1920). Utilisez le 16:9 uniquement sur demande explicite.
- Surface : lumière chaude, fond sombre propre, grille claire ou grille sombre.
- La pulsation exacte du script, la durée, les produits nommés, les affirmations vérifiées et les ressources fournies.
Ne choisissez jamais le mode sombre par défaut en silence. Si l'utilisateur délègue le choix de la surface, utilisez la lumière chaude.
Étape 2 — Recherche et ressources authentiques
Lisez references/research-and-assets.md et references/logo-library.md.
Exécutez le plus petit parcours de recherche utile avant le travail conceptuel :
- Les ressources utilisateur fournies sont faisant autorité. Utilisez-les exactement ; ne les redessinez jamais et ne les remplacez jamais.
- Pour les produits courants, copiez un logo groupé approprié depuis
assets/logos/dans le projet et conservez sa provenance. - Si manquant, inspectez 1 à 3 pages faisant autorité : kit de marque officiel/page d'accueil, page produit/documentation officielle, puis une source d'icônes organisée réputée.
- Préférez le SVG transparent. N'utilisez jamais de captures d'écran de logos, de vignettes de résultats de recherche, d'arrière-plans en damier/gris cuits, de recréations non officielles ou de ressources distantes liées à chaud.
- Pour un tableau de bord/UI produit, procurez-vous une capture d'écran/enregistrement réel fourni ou une capture d'écran officielle publique produit/documentation. S'il n'en existe pas, demandez ; n'inventez pas un tableau de bord.
- Recherchez la structure visible, la terminologie, la couleur de la marque et l'action/l'état exact pertinents pour le beat. Ne copiez pas de métriques non prises en charge, d'informations privées ou d'affirmations.
- Mettez en cache les ressources et les notes sous
.promptible/research/. Réutilisez un hit de cache lorsque le produit, les sources, les hachages des ressources et le mécanisme de référence sont inchangés.
Choisissez uniquement le mode visuel dont le beat a besoin : logo-system, product-ui, terminal, editorial ou abstract. N'imposez pas une newsletter, un tableau de bord, un terminal ou un mouvement de caméra élaboré dans chaque graphique.
Écrivez .promptible/research-brief.md avec les en-têtes suivants :
## Produit ou concept
## Sources faisant autorité
## Langage visuel réel
## Mécanisme approuvé le plus proche
## Plan de mouvement
## À éviter
Exécutez ensuite :
node <skill-dir>/scripts/promptible-gate.mjs research \
--project . \
--research-mode authentic \
--visual-mode product-ui \
--product "Slack" \
--reference kickbacks-same-run-editor \
--brief .promptible/research-brief.md \
--source https://slack.com/ \
--logo public/research/slack.svg \
--surface public/research/slack-dashboard.png
Pour un travail conceptuel sans nom, utilisez --research-mode abstract --visual-mode abstract ; le brief et la comparaison de référence approuvée s'appliquent toujours, mais les recherches web/logo inutiles ne sont pas effectuées.
Étape 3 — Prévol de référence vérifié
Lisez references/approved-references.md. Sélectionnez par mécanisme narratif, pas par couleur. Un nouveau concept est autorisé lorsqu'il est plus spécifique à la demande, mais il doit explicitement hériter de la grammaire de la caméra, de l'échelle, de la retenue et du mouvement causal du mécanisme approuvé le plus proche. Combinez au maximum deux mécanismes.
Exécutez :
node <skill-dir>/scripts/promptible-gate.mjs init \
--project . \
--research .promptible/research-manifest.json \
--format 9:16 \
--background warm-light \
--claim-source user \
--beat "Idée visuelle exacte soutenue" \
--duration 6
init revalide la recherche/les ressources, vérifie le MP4 groupé approuvé/la feuille de contact par SHA-256 et écrit .promptible/render-brief.json.
Inspectez le MP4 groupé réel/la feuille de contact et les preuves de produit recherchées. Écrivez .promptible/reference-observations.md avec :
## Composition
## Caméra
## Identité
## Correspondance de recherche
## Anti-modèle
Exécutez ensuite :
node <skill-dir>/scripts/promptible-gate.mjs inspect \
--project . \
--observations .promptible/reference-observations.md
Seul BUILD AUTHORIZED permet l'implémentation.
Étape 4 — Construction
Utilisez l'identité recherchée et le mécanisme causal de la référence sélectionnée. Le résultat doit sembler spécifique dès la première passe, pas comme un modèle attendant des invites correctives.
Règles strictes :
- Zéro néon, lueur, bloom, bords lumineux, ombres colorées, orbes/lavés dégradés, dégradés cyan-violet, vitromorphisme, éclairage cyberpunk ou style IA codé par vibes.
- Pas de reçu générique, de facture, de dossier, de presse-papier, de carte flottante, de code-barres, de tampon en caoutchouc, de certificat, de carte de prix, de faux tableau de bord ou de grille de carte déconnectée.
- Les tableaux de bord réalistes sont encouragés uniquement lorsqu'ils sont fondés sur des preuves de produit fournies ou faisant autorité. Recréez la structure visible fidèlement ; n'inventez jamais de métriques, d'affirmations, de contrôles ou d'états de produit.
- Pas d'interface utilisateur, de logos, de prix, de classements, d'engagement, de numéros de série ou de preuves inventés.
- Pas de texte narratif redondant. Les données réelles, l'interface utilisateur du produit, les commandes, le code, les noms de fichiers et les étiquettes structurelles courtes sont autorisés.
- Le mouvement doit révéler la causalité, l'échelle, le remplacement, la navigation ou le changement d'état. Il peut être retenu lorsqu'un échange de logo ou une action d'interface utilisateur authentique communique clairement le beat.
- Un objet centré statique avec des rangées qui apparaissent plus un zoom lent n'est pas une exécution cinématographique.
- Utilisez moins d'objets focaux, plus grands. Gardez l'action actuelle centrée, entièrement visible et lisible à la taille de destination.
- Les scènes sombres sont sur option. Sombre signifie charbon neutre avec des accents plats, jamais de panneaux illuminés.
Lisez references/rejected-patterns.md avant la sélection du concept.
Étape 5 — Preuve du candidat
Rendez le candidat. Générez une feuille de contact de trois images et un JSON ffprobe. Exemple pour six secondes :
mkdir -p .promptible
ffmpeg -y -hide_banner -loglevel error -i out/candidate.mp4 \
-vf "fps=3/6,scale=480:-1,tile=3x1:padding=12:margin=12:color=white" \
-frames:v 1 .promptible/candidate-contact-sheet.jpg
ffprobe -v error -select_streams v:0 \
-show_entries stream=width,height:format=duration -of json \
out/candidate.mp4 > .promptible/candidate-probe.json
Exécutez ensuite :
node <skill-dir>/scripts/promptible-gate.mjs candidate \
--project . \
--render out/candidate.mp4 \
--contact-sheet .promptible/candidate-contact-sheet.jpg \
--probe .promptible/candidate-probe.json
Étape 6 — Critique visuel indépendant
Le constructeur ne peut pas évaluer son propre travail. Démarrez un critique/sous-agent propre séparé avec :
references/visual-critic.md- brief/manifeste de recherche et ressources authentiques
- MP4 approuvé sélectionné/feuille de contact
- MP4 candidat/feuille de contact
.promptible/render-brief.json
Le critique inspecte le média réel et renvoie un JSON correspondant à templates/critic-output.example.json. Si la révision indépendante ne peut pas être exécutée, arrêtez-vous ; n'approuvez jamais automatiquement.
Étape 7 — Porte de livraison
node <skill-dir>/scripts/promptible-gate.mjs qa \
--project . \
--critic .promptible/critic.json
La porte rejette les échecs durs, toute catégorie en dessous de 8/10, la moyenne en dessous de 8,5, les recherches/preuves modifiées/manquantes, ou la révision non indépendante. Révisez jusqu'à DELIVERY AUTHORIZED.
Règles techniques et de livraison
- Pilotez le mouvement avec
useCurrentFrame(),spring()etinterpolate(); pas d'animation CSS. - Utilisez maintien → déplacement → maintien lorsque le déplacement aide. L'action se termine pendant les maintiens.
- Terminez par un maintien stable de l'éditeur.
- Vérifiez les types ou exécutez la plus petite validation de construction significative.
- Livrez le MP4 avec les dimensions exactes, la durée, la commande de rendu et la note de placement dans l'éditeur uniquement après autorisation.