vibe-motion/skills

Brand Launch Video Star

Créez un film de lancement authentique, pas un modèle de motion générique. Vérifiez la marque, racontez une histoire spécifique au produit, et produisez une séquence rapide et soignée avec des actifs exacts et un motion déterministe.

Blocages de publication

1. Utilisez des actifs authentiques. N'inventez, ne redessinez, n'approximez, ne tracez et ne générez jamais un logo, un mot-symbole, un produit, une interface, une mascotte, un emballage, une personne ou une scène de marque.
2. Rendez le logo exact. Téléchargez le fichier officiel actuel ou utilisez l'original de l'utilisateur. Ne composez jamais un mot-symbole ni ne reconstruisez un logo avec des primitives CSS/SVG.
3. Recherchez au-delà des téléchargements. Considérez les téléchargements comme des sources utilisables, pas comme le plafond des actifs. Trouvez du matériel officiel ou sous licence supplémentaire lorsque l'histoire en a besoin.
4. Montrez le produit. Démontrez les fonctionnalités réelles, les interactions, les scénarios, les résultats et les preuves. Ne cachez pas une histoire de produit faible derrière des effets abstraits.
5. Utilisez l'anglais par défaut. N'utilisez une autre langue que si cela est explicitement demandé.
6. Gardez le motion déterministe. Calculez chaque état à partir de l'image/temps et des entrées explicites. Ne dépendez jamais de l'ordre de rendu ou de l'aléatoire non initialisé.
7. Vérifiez les affirmations. Confirmez les noms, fonctionnalités, métriques, slogans et appels à l'action actuels par rapport aux sources officielles.

Si un actif porteur d'identité ne peut pas être authentifié, arrêtez-vous et demandez un original autorisé. Ne produisez pas un substitut plausible.

Utilisez les graphismes procéduraux uniquement comme couches de motion non représentatives : masques, dégradés, champs de couleur, grilles, lueurs, particules, traînées, typographie, graphiques de données vérifiées et géométrie de transition.

Démarrage rapide

Installez le skill :

npx skills add vibe-motion/skills

Invoquez-le avec un brief concret :

Utilisez $brand-launch-video-star pour créer un film de lancement anglais de 15 secondes en 16:9
pour https://example.com. Recherchez les actifs officiels, montrez le flux de travail du produit principal,
et fournissez un MP4 Vibe Motion/Remotion ainsi que les fichiers de provenance.

Travaillez dans le projet Vibe Motion ou Remotion existant de l'utilisateur. S'il n'en existe pas, initialisez un projet Vibe Motion avec npx create-vibe-motion, puis suivez les commandes d'installation et de rendu générées par le projet.

Avant l'implémentation :

1. Copiez references/asset-manifest.example.json dans le projet et remplacez chaque valeur d'exemple.
2. Copiez references/timeline.example.json dans le projet et adaptez sa durée et ses plans.
3. Validez les deux fichiers :

node <skill-dir>/scripts/validate-assets.mjs path/to/asset-manifest.json
node <skill-dir>/scripts/validate-timeline.mjs path/to/timeline.json

Utilisez --schema-only uniquement pour inspecter le modèle de manifeste intégré :

node <skill-dir>/scripts/validate-assets.mjs \
  <skill-dir>/references/asset-manifest.example.json --schema-only

Flux de travail

1. Définir le brief

Déterminez :

• Entreprise/produit et URL officielle
• Focus produit ou campagne
• Audience et distribution
• Durée ; par défaut 15 secondes, support normalement de 15 à 30 secondes
• Ratio d'aspect ; par défaut 16:9
• Langue ; par défaut anglais
• Affirmations, CTA et besoins en mentions légales requis
• Si l'utilisateur possède ou peut publier les actifs fournis

Ne posez que des questions qui changent matériellement le film.

2. Construire la fiche de vérité de la marque

Parcourez les sources officielles actuelles et extrayez :

• Variantes et utilisation exactes du logo
• Polices officielles ou polices web
• Couleurs primaires, secondaires et dynamiques
• Principes de marque, ton et motifs visuels
• Noms de produits, fonctionnalités, scénarios, métriques et CTA actuels
• Photographies officielles, rendus, captures d'écran UI, séquences, actifs de presse et kits médias

Priorité :

1. Original fourni par l'utilisateur
2. Site web de l'entreprise, bundle statique, salle de presse, portail de marque, kit média ou dépôt officiel
3. Bibliothèque multimédia contrôlée par l'entreprise
4. Stock sous licence ou kit partenaire autorisé

Lisez references/asset-authenticity.md avant d'acquérir des actifs.

3. Créer le manifeste des actifs

Enregistrez chaque actif porteur d'identité dans asset-manifest.json :

• ID stable et rôle
• Chemin local
• URL source exacte
• Type de source
• Page/fichier de vérification officiel
• Note sur les droits/licences
• Statut d'authenticité
• Checksum SHA-256 optionnel

Le validateur vérifie la structure du manifeste, la provenance déclarée, l'existence des fichiers locaux et les checksums optionnels. Il n'accorde pas de droits d'utilisation indépendamment ni ne prouve qu'une source distante est fiable ; effectuez manuellement la comparaison avec la source officielle.

Ne commencez pas le rendu final tant que la validation échoue.

4. Choisir la trame narrative

Présentez 2-3 directions concises et recommandez-en une :

• IA/SaaS : intention -> réflexion/planification -> capacités -> exécution -> résultat -> preuve -> logo
• Produit physique : héros -> interaction -> macro fonctionnalité -> contexte d'utilisation -> résultat -> logo
• Service/entreprise : contexte -> processus -> preuve -> résultat -> promesse -> logo
• Marque axée sur l'image : imagerie authentique -> motif visuel -> bénéfice -> impact émotionnel -> logo

Lisez references/story-patterns.md pour les modèles de durée.

5. Planifier les images exactes

Utilisez 30 ips sauf si le projet l'exige autrement. Convertissez chaque limite en un numéro d'image entier.

Pour 15 secondes, ciblez 5 à 8 temps forts majeurs ; pour 30 secondes, ciblez 8 à 12. Donnez à chaque temps fort :

• Image de début/fin
• Propriétaire visuel et IDs des actifs authentiques
• Action principale
• Anticipation, engagement, impact, freinage et stabilisation
• Texte et maintien lisible
• État de couleur
• Transition entrante/sortante

Utilisez des chevauchements de 6 à 12 images lorsque la continuité en bénéficie. Un plan possède la vélocité ; le suivant possède la destination.

6. Construire l'intensité avec contrôle

• Utilisez le motion du produit, les chemins de curseur, la lumière, le contenu défilant, les bords d'objet ou la géométrie assortie pour piloter les transitions.
• Utilisez 2 à 5 états de couleur délibérés avec un fort contraste.
• Gardez une action principale par temps fort ; retardez les couches secondaires de 2 à 6 images.
• Établissez 2 à 3 pics de haute énergie et des moments de freinage plus calmes.
• Préservez des silhouettes lisibles, du texte et de l'espace libre pour le logo.
• Évitez les HUD factices, les cartes en verre arbitraires, les murs de texte décoratifs, les métriques non vérifiées et l'assouplissement identique partout.

Lisez references/motion-quality.md avant l'implémentation.

7. Démontrer la cause et l'effet

Incluez au moins une chaîne lisible :

intention de l'utilisateur -> action du produit -> réponse du système -> résultat utile

Pour les produits IA :

prompt -> planification -> capacités parallèles -> résultat généré -> preuve

Utilisez des captures d'écran UI réelles, des enregistrements, du code source ou des captures d'écran fournies officiellement. Si l'interface utilisateur réelle n'est pas disponible, utilisez un motion abstrait clairement conceptuel ; ne fabriquez jamais une interface de marque et ne la présentez pas comme réelle.

8. Implémenter et rendre

Pour Remotion :

• Définissez state = f(frame, fps, inputs, constants).
• Gardez les limites des plans dans un seul module timeline/constants.
• Initialisez la variation procédurale avec des ID stables.
• Préservez les valeurs fractionnaires lors du calcul de la vélocité.
• Gardez les dimensions et les ratios d'aspect des images explicites.
• Préservez les compositions/sorties précédentes lors de l'itération.

Préférez la CLI locale du projet. Les commandes typiques de découverte et de rendu sont :

pnpm exec remotion compositions <entry-file>
pnpm exec remotion render <entry-file> <composition-id> out/launch-film.mp4

Aperçu par défaut :

• 1920x1080
• 30 ips
• MP4 H.264
• Durée exacte demandée
• V1 orientée visuel ; ajoutez du son uniquement sur demande ou s'il est disponible

9. Vérifier

• Exécutez la validation du manifeste des actifs et de la timeline.
• Exécutez la découverte/construction de composition et les vérifications de type/lint ciblées.
• Vérifiez la durée des médias, le taux d'images, les dimensions et l'intégrité des fichiers.
• Inspectez les images représentatives et le rendu complet.
• Demandez un retour avec codes temporels sur le rythme, la clarté, l'impact, l'authenticité et la fluidité.

10. Fournir la provenance

Fournissez :

• Vidéo rendue
• Chemin de la composition/source
• Spécifications exactes et durée
• Manifeste des actifs
• Liens vers les sources de la marque/produit
• Note sur les droits/mentions légales
• Identifiant de version

Indiquez quand le film est un concept non officiel et quand la publication commerciale nécessite une autorisation.

Récupération en cas d'échec

• Mauvais logo : supprimez-le, localisez le fichier officiel actuel, enregistrez la provenance et refaites le rendu.
• Produit/UI d'apparence factice : remplacez-le par des médias officiels, fournis par l'utilisateur ou sous licence ; n'améliorez pas l'imitation.
• Rapide mais chaotique : réduisez les actions simultanées, attribuez un propriétaire visuel et préservez le motion assorti entre les coupes.
• Beau mais générique : ajoutez une interaction produit complète, des affirmations vérifiées et des résultats réels.
• Fluide mais lent : raccourcissez les maintiens, chevauchez les transitions et freinez uniquement autour des messages clés.
• Actif indisponible : demandez un original autorisé ; ne devinez jamais.