Communitygithub.com

VanillaSkyAi/skills

Compétences agent pour VanillaSky — votre agent IA compose et rend des vidéos sociales finalisées (MP4, 9:16 ou 16:9) à partir d'une invite. Fonctionne avec Claude Code et 75+ agents. Gratuit, rendu local, MIT.

Qu'est-ce que skills ?

VanillaSky est une compétence d'agent IA qui transforme des descriptions textuelles en vidéos sociales professionnelles au format MP4, en orientations portrait (9:16) ou paysage (16:9). Elle fonctionne avec Claude Code, Cursor, Codex, et plus de 75 agents, permettant une intégration fluide dans les workflows de développement. La compétence offre un rendu local gratuit (sans frais de cloud), une licence MIT, et une architecture modulaire avec une CLI dédiée. Le processus de création est entièrement guidé : l'agent lit un catalogue de modèles, compose un fichier de configuration structuré (video.json), valide, résout les ressources média (via Pexels), et remet la vidéo dans un studio interactif (VanillaSky Studio) pour prévisualisation, édition et export final. L'utilisateur ne génère le MP4 complet que lorsqu'il le demande explicitement, ce qui rend le flux rapide et itératif. La compétence impose des contrôles de qualité stricts : vérification des faits, variété visuelle, narration cohérente, et pas de données fictives. C'est un outil puissant pour les développeurs et créateurs qui souhaitent automatiser la production de vidéos sociales sans quitter leur environnement de développement.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add VanillaSkyAi/skills

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

VanillaSky — vidéos sociales à partir d'une configuration

Une vidéo est un JSON VideoConfig : une liste ordonnée de scènes, chacune faisant référence à un modèle organisé par son identifiant en camelCase. Composez et inspectez la configuration, puis remettez-la à l'utilisateur dans VanillaSky Studio. L'utilisateur prévisualise, édite et exporte le MP4 à cet endroit ; ne faites pas du rendu MP4 complet une partie du flux initial.

Trois non-négociables

  1. Lisez le catalogue ; ne devinez jamais. Après avoir résolu la CLI, exécutez vanillasky templates pour la carte des modèles fournis et vanillasky templates <id> --json pour un schéma exact. Le repli en ligne est https://vanillasky.ai/llms-components.txt ; le dépôt et les installations autonomes contiennent registry/llms-components.txt plus registry/r/<name>.json. Si aucun catalogue exact n'est accessible, arrêtez-vous plutôt que d'inventer un identifiant ou une variable.
  2. N'inventez jamais de preuve. Les noms, citations, chiffres, statistiques, captures d'écran et affirmations sur le produit doivent provenir du brief ou des ressources fournies. Si un modèle nécessite une preuve que l'utilisateur n'a pas fournie, choisissez un autre modèle.
  3. Ne remettez jamais une configuration non inspectée. La validation détecte la structure ; seul le regard sur les images rendues détecte le débordement, une composition faible et les valeurs par défaut accidentelles.

Démarrez la session

Résolvez d'abord la CLI. La CLI officielle de VanillaSky n'est pas publiée en tant que paquet npm. Ne cherchez jamais sur npm, n'exécutez pas npm install vanillasky et n'utilisez pas un paquet qui possède simplement ce nom. Si command -v vanillasky échoue, résolvez le répertoire d'installation de cette compétence à partir du chemin de ce SKILL.md, puis exécutez son programme d'installation officiel :

node <dossier-installation-competence>/scripts/install-cli.mjs

Le programme d'installation clone uniquement https://github.com/VanillaSkyAi/skills.git dans ~/.vanillasky/release, installe les dépendances déclarées par ce checkout et expose sa CLI locale dans le PATH. Arrêtez-vous si l'origine du checkout diffère ou si le script échoue ; ne substituez pas un paquet du registre.

Exécutez ensuite ces commandes avant la première vidéo :

vanillasky update --check
vanillasky setup --check
vanillasky templates

update --check signale une nouvelle version sans rien changer. Si un indicateur documenté ici est absent, exécutez vanillasky update. setup --check signale l'orientation par défaut, le navigateur, la clé Pexels, l'humeur musicale et l'état de DESIGN.md.

L'absence de clé Pexels n'est pas bloquante : mentionnez une fois que la recherche de médias libres nécessite une clé gratuite sur pexels.com/api, puis utilisez les médias fournis ou des modèles qui ne dépendent pas de médias libres. L'absence de DESIGN.md signifie qu'il n'y a pas de marque automatique ; ne bloquez pas.

Déduisez le brief

Utilisez d'abord l'invite, le dépôt, DESIGN.md, les URL et les ressources fournies. Posez au maximum trois questions, et uniquement pour les lacunes réelles :

  1. Objectif et format — que doit ressentir ou faire le spectateur : lancement, revue, jalon ou mise à jour ?
  2. Audience et preuve — à qui s'adresse-t-il, et quel chiffre réel, citation, capture d'écran ou détail produit justifie l'affirmation ?
  3. Ressources — quelles captures d'écran, logos, clips ou URL doivent apparaître ?

Déduisez l'orientation de la destination : TikTok/Reels/Shorts → portrait ; vidéo YouTube ou publication X/LinkedIn explicitement large → paysage. Sinon, utilisez l'orientation par défaut configurée, ou consacrez l'une des trois questions à cela.

Enregistrez le résultat sous video-brief.md à côté de video.json. Relisez-le et mettez-le à jour lors des tours suivants au lieu de poser les mêmes questions à nouveau.

Flux par défaut : remise dans Studio

  1. Composez video.json à partir du brief et du catalogue fourni. Inspectez les schémas exacts des modèles présélectionnés avec vanillasky templates <id> --json avant d'écrire leurs variables.

  2. Résolvez les médias libres lorsque la configuration contient mediaKeyword :

    vanillasky resolve video.json
    

    Cela sélectionne un résultat Pexels et écrit l'URL exacte du média dans la configuration, rendant la validation et les nouveaux rendus déterministes. Si aucune clé Pexels n'est disponible, utilisez les médias fournis, une URL directe ou mediaType: "gradient" à la place. Ne vous fiez pas à la recherche au moment du rendu, car il s'agit de l'état de remise.

  3. Validez et corrigez toutes les erreurs et avertissements :

    vanillasky validate video.json
    

    Le champ format de la configuration sélectionne le contrat de slot approprié ; ne codez pas en dur --format launch pour chaque vidéo. Traitez les avertissements comme un travail à résoudre, non comme une décoration, et ne décrivez jamais la validation comme propre tant qu'il en reste.

  4. Inspectez une planche contact :

    vanillasky render video.json --sheet --out ./sheet
    

    Ouvrez sheet/sheet.png et inspectez les images individuelles si nécessaire. Vérifiez Ouvrez effectivement sheet/sheet.png ; l'existence du fichier n'est pas une inspection. Vérifiez le débordement de texte, le type illisible, les valeurs par défaut/non définies, les ressources inutilisées, la répétition visuelle et le contenu critique en dehors des 75 % centraux du cadre. Après toute modification visuelle, répétez la résolution (si nécessaire), la validation et la planche.

  5. Remettez dans Studio :

    vanillasky studio video.json
    

    Studio suit le fichier en direct. Continuez à éditer la configuration pendant que l'utilisateur révise ; ses modifications non enregistrées apparaissent comme un conflit au lieu d'être écrasées. L'utilisateur exporte le MP4 depuis Studio lorsqu'il est satisfait.

    Si le mauvais navigateur s'ouvre, passez --browser "Google Chrome" ou persistez le navigateur dans ~/.vanillasky/config.json. Utilisez --no-open dans un shell distant.

Ne rendez pas un MP4 complet par défaut. Ne le rendez vous-même que lorsque l'utilisateur le demande explicitement ou lorsque Studio ne peut pas être utilisé (CI/headless) :

vanillasky render video.json --open

Pour cette branche, regardez le résultat et lisez la bannière d'achèvement : confirmez la longueur totale, la couverture audio, l'orientation et la fluidité des images. Incluez les liens Watch et Studio du bloc d'achèvement. vanillasky link video.json les réaffiche sans rendu.

Composez le chemin par défaut

Partez de cette forme, puis utilisez les schémas exacts du catalogue :

{
  "format": "launch",
  "orientation": "portrait",
  "style": {
    "font": "Inter",
    "preset": "bold",
    "brandKit": { "accent": "#6D5EF8", "secondary": "#F8B45E" }
  },
  "audio": { "trackId": "<depuis vanillasky tracks>" },
  "scenes": [
    {
      "id": "s0",
      "templateId": "media",
      "variables": { "texts": "Ship it today", "mediaType": "gradient" },
      "timing": { "fixedDuration": 3 }
    }
  ]
}
  • brandKit appartient à l'intérieur de style ; choisissez un préréglage de style délibérément.
  • textArchetype et backgroundEffect sont des champs de scène, pas des variables.
  • timing.fixedDuration définit une durée de scène autonome. Les chronologies explicites utilisent startTime + endTime contigus ; timing.duration n'est pas un champ.
  • Utilisez vanillasky tracks pour choisir la musique par humeur et énergie. Le silence est valide mais généralement faible pour une vidéo sociale.
  • Préférez une vraie URL HTTPS ou un chemin local pour les médias. Les médias en Base64 rendent les liens de partage trop volumineux, et les résultats mediaKeyword doivent être épinglés à mediaUrl pour des rendus déterministes.

Lisez references/config.md lorsque la configuration nécessite une marque, une résolution média, une synchronisation explicite, une correspondance FPS ou un comportement de lien.

Choisissez le format selon l'histoire

FormatForme de l'histoireLongueur typique
launchcadrage → compréhension → preuve3–8 scènes, généralement 5
reviewcitation → attribution → résultat4–7 scènes, généralement 5
milestonechiffre → contexte → gratitude3–6 scènes, généralement 4
updatechangement → démonstration → avantage4–7 scènes, généralement 5

Le validateur applique le nombre de scènes, les accroches interdites, le placement du closer et les règles d'adjacence. references/formats.md contient le contrat généré. Votre travail est le jugement que le validateur ne peut pas faire.

Portes de qualité créatives

Vérité et ressources

  • Remplacez chaque valeur par défaut du modèle par un contenu spécifique au brief. Ne publiez jamais de statistiques fictives telles que 10K, 99.9% ou <50ms.
  • Utilisez chaque capture d'écran fournie qui compte. Une vraie surface de produit bat un terminal, éditeur, téléphone ou navigateur synthétisé montrant la même chose.
  • Faites correspondre les captures d'écran portrait aux maquettes de téléphone et les captures d'écran paysage aux maquettes de navigateur.

Histoire

  • L'accroche crée une tension ou une curiosité ; elle ne dépense pas la récompense.
  • Incluez au moins un corps explicatif qui nomme le produit, l'audience ou le résultat concret. Les notifications, appels, tweets et chiffres peuvent cadrer ou prouver, mais ne peuvent expliquer le produit seuls.
  • Le closer est une adresse — marque, URL ou action — pas une répétition de la preuve.

Variété et rythme

  • Ne faites pas de chaque corps une carte. Utilisez au moins deux registres autres que la carte.
  • Une phrase simple sur un dégradé plat est un repli, pas automatiquement une accroche forte. Préférez un mécanisme visuel ancré dans le brief — une notification pour une alerte, un terminal/éditeur pour un workflow développeur, un chat pour une conversation, un appareil ou un navigateur pour une surface produit fournie. Même une vidéo intentionnellement minimale a besoin d'une idée visuelle tangible ; minimal signifie moins d'éléments, pas le même dégradé et la même typographie dans chaque scène.
  • Une palette cohérente n'est pas de la variété de scènes. Trois rangées de scènes ou plus partageant le même arrière-plan plat échouent à cette porte même si leur disposition de type diffère. Changez au moins un registre avec une ressource ancrée, un fond d'écran libre, un modèle ou un effet retenu. Lorsque le brief contient trop peu de copies ou de preuves approuvées pour soutenir de nombreuses scènes distinctes, utilisez l'histoire valide la plus courte du format au lieu de la répéter.
  • Donnez au moins 3 secondes à chaque plan, sauf s'il s'agit intentionnellement d'un pont court. Variez le mouvement de l'arrière-plan plutôt que d'appliquer un effet partout.
  • Une scène média avec un simple dégradé doit être un temps délibéré de la marque, pas un repli choisi parce que les médias libres ou fournis étaient peu pratiques.
  • Inspectez ce qui apparaît réellement : les modèles limités en durée peuvent omettre les éléments suivants même lorsque la configuration les contient.

Copie

  • Accroche : au maximum 7 mots. Appel à l'action : au maximum 4 mots, de préférence un ordre.
  • Préservez chaque slogan ou citation approuvé par l'utilisateur intact dans au moins une scène. Ne transformez pas une ligne approuvée en plusieurs scènes pseudo-distinctes en affichant ses fragments séparément ; laissez la progression visuelle porter les autres temps.
  • Évitez les listes de trois noms, catégories ou verbes génériques. Le rythme a besoin de tension, de progression ou d'une torsion — pas de trois synonymes.
  • Gardez le texte qui doit rester ensemble dans une balise nowrap ; ne comptez jamais sur NBSP pour l'export SVG.

Escaladez uniquement lorsque les modèles échouent

Utilisez l'échelon le plus bas qui exprime le brief :

  1. Modèle avec un texte rédigé sur mesure.
  2. Modèle avec des variables ajustées.
  3. Scène éjectée/personnalisée basée sur un élément du registre.
  4. Scène personnalisée composée à partir d'éléments de scène de bac à sable.

Le chemin par défaut s'arrête à l'échelon 2. Avant d'utiliser l'échelon 3 ou 4, lisez references/custom-scenes.md, references/libraries.md, references/motion.md et references/visual-rules.md. Utilisez vanillasky scope et le fichier généré references/motion-api.md au lieu d'inventer des API.

Routeur de références

  • references/config.md — synchronisation, style, marque, médias, audio, FPS, DESIGN.md et comportement des liens de partage.
  • references/formats.md — contrats de slot générés et catégories de modèles.
  • references/custom-scenes.md — éjection, provenance, contrat du bac à sable et règles de validation.
  • references/libraries.md — carte des cinq bibliothèques générées, conseils sur l'audience, dépendances, cibles d'installation et groupes d'export exacts.
  • references/motion.md — chorégraphie, temps de lecture, hiérarchie focale et continuité des coupes.
  • references/motion-api.md — fonctions générées, ressorts et noms d'assouplissement disponibles pour les scènes personnalisées.
  • references/visual-rules.md — typographie, disposition d'orientation, couleur, lumière et composition pour les scènes personnalisées.

Skills associés