Communitygithub.com

Compétence Remotion Shorts

Créez des vidéos verticales courtes avec Remotion et publiez-les sur TikTok, Instagram Reels et YouTube Shorts. Transformez un sujet, un article, une URL, un jeu de données, un changelog ou une liste en une courte vidéo cinétique 1080×1920 (grands mots animés, compteurs de statistiques, listes, vidéos de lancement et de changelog, citations), synchronisée sur la vitesse de lecture et placée dans la zone de sécurité de chaque application, rendue localement sans API payante.

Qu'est-ce que Compétence Remotion Shorts ?

Cette compétence permet à un agent IA de générer des vidéos courtes verticales professionnelles avec Remotion, sans écrire de code Remotion pour chaque vidéo. L'agent écrit un script au format JSON décrivant les scènes, et le projet Remotion pré-configuré se charge du rendu typographique cinétique, du minutage basé sur la vitesse de lecture et du respect des zones de sécurité des applications. La compétence prend en charge plusieurs formats de scènes (accroche, statistique, liste, fin) et propose des thèmes visuels prédéfinis. Après le rendu local, l'agent peut publier la vidéo sur TikTok, Instagram Reels et YouTube Shorts via WoopSocial, en gérant les légendes, la confidentialité et la planification. Elle est particulièrement utile pour créer du contenu court à partir de données, d'articles, de changelogs ou de listes, et inclut des vérifications de qualité automatisées pour garantir la lisibilité et la conformité aux directives des plateformes.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/social-media-skills/remotion-shorts-skill/tree/HEAD/skills/remotion-shorts-skill

Demander à votre IA préférée

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

Documentation

Que fait Compétence Remotion Shorts ?

Vous rédigez un court-métrage sous forme de fichier JSON de scènes. Le projet Remotion packagé dispose les mots, chronomètre chaque scène en fonction de la vitesse de lecture, maintient le texte à l'intérieur de la zone que ne recouvre aucun bouton d'application, génère une feuille de révision, une couverture et le MP4, et l'utilisateur peut le publier avec WoopSocial.

Vous n'écrivez pas de code Remotion pour chaque vidéo. Les modèles sont fixes et testés ; votre travail est le script : ce que chaque écran dit, dans quel ordre, et à quelle vitesse.

0. Configuration (une fois par machine)

Nécessite Node 20 ou plus récent. Vérifiez avec node -v ; s'il manque, envoyez l'utilisateur sur https://nodejs.org. Remotion prend en charge macOS 15 ou plus récent, Windows x64 et Linux avec glibc 2.35+ (Ubuntu 22.04, Debian 12 ou plus récent).

node <skill-dir>/scripts/setup.mjs remotion-shorts

Ceci copie le projet dans ./remotion-shorts, installe les paquets épinglés (environ 260 Mo) et télécharge le navigateur sans tête avec lequel Remotion effectue le rendu (100 à 150 Mo). Cela prend 1 à 3 minutes la première fois. Relancez-le après une mise à jour de la compétence : il rafraîchit les fichiers de modèle (ceux que l'utilisateur a modifiés sont conservés en .bak) et ne touche jamais à leurs scripts, assets ou sorties.

Licence. Remotion est gratuit pour les particuliers et pour les entreprises de moins de 3 personnes. Les entreprises de 4 personnes ou plus ont besoin d'une licence d'entreprise Remotion, et le rendu à partir de scripts est considéré comme une automatisation (remotion.pro/license). Si l'utilisateur effectue un rendu pour une grande entreprise, dites-le lui une fois, clairement, avant le premier rendu.

1. Demandez ce dont vous avez besoin (un seul message, passez ce qui est déjà connu)

  • Le matériel. Un sujet, un article, une URL, des notes, des données, un changelog ou une liste. Vous n'écrivez que des faits que vous pouvez citer. Si l'utilisateur donne un sujet sans source, trouvez une source primaire (statistiques officielles, documentation, le changelog du produit lui-même) et nommez-la.
  • À qui il s'adresse et le seul point à retenir. Un court-métrage dit une seule chose.
  • L'apparence. Un thème (ink, paper, volt, ocean, clean) ou leurs couleurs de marque, et un identifiant pour l'écran de fin.
  • Audio. Les effets sonores intégrés sont activés par défaut (un impact sur l'accroche, un whoosh à chaque coupe, un pop sur les points forts, des tics sur les compteurs) ; ils sont conçus pour ce modèle et sans danger sur chaque application. Musique uniquement à partir d'un fichier dont ils ont les droits d'utilisation (voir references/writing-shorts.md pour savoir pourquoi aucune bibliothèque gratuite n'est sûre sur les trois applications).
  • Où va-t-il. TikTok, Reels, Shorts, ou les trois.

2. Rédigez le script

Lisez references/writing-shorts.md avant le premier script d'une session. La version courte :

  • La scène 1 est une accroche qui énonce le bénéfice en environ 10 mots ou moins : un nombre, une affirmation ou la promesse de la liste (« 5 outils gratuits qui remplacent... »). Elle est entièrement à l'écran depuis l'image 0. Si l'accroche contient un nombre, mettez-le en big pour qu'il soit la première chose que l'œil voit.
  • Une idée par scène. Une scène est un temps fort, pas un paragraphe. Les scènes de statistiques portent un seul nombre et ce qu'il signifie. Les éléments de liste comptent vers le bas ou vers le haut ; dites-le dans l'accroche.
  • Des informations réelles dans chaque scène. Une vidéo textuelle basée sur un modèle sans rien de nouveau est ce que YouTube appelle du contenu inauthentique et Instagram appelle du contenu non original. Ne comblez jamais.
  • Les nombres sont exacts et sourcés. Mettez la source dans footer (« Données : USGS »). N'arrondissez jamais un nombre pour en faire une affirmation différente.
  • Terminez sur une action ou une ligne qui ramène à l'accroche pour que la boucle semble continue. Pas de « merci d'avoir regardé ».
  • Durée : 15 à 45 secondes est l'objectif ; le moteur de rendu avertit au-delà de 59.

Écrivez short.json dans le dossier du projet. Le format complet, chaque type de scène et chaque option se trouvent dans references/short-json.md. Un script minimal :

{
  "theme": "ink",
  "footer": "Données : USGS",
  "handle": "@votreidentifiant",
  "scenes": [
    { "type": "hook", "big": "2,5 %", "text": "de l'eau de la Terre est douce" },
    { "type": "stat", "value": "96,5", "suffix": "%", "label": "est de l'eau salée dans les océans" },
    { "type": "stat", "value": "68,7", "suffix": "%", "label": "de l'eau douce est de la glace et des glaciers", "highlight": "glace et glaciers" },
    { "type": "end", "text": "Gardez ça pour une soirée quiz", "highlight": "Gardez ça" }
  ]
}

3. Vérifiez avant de rendre la vidéo

cd remotion-shorts
node render.mjs short.json --stills

En quelques secondes, cela imprime le plan (secondes et taille de police par scène) et écrit :

  • out/short/sheet.jpg : la dernière image de chaque scène (tout à l'écran), avec les zones de sécurité marquées par une fine ligne pointillée (le texte doit rester à l'intérieur).
  • out/short/cuts.jpg : l'image 0 et les images autour de chaque coupe, pour vérifier le mouvement.
  • out/short/cover.jpg : l'accroche une fois qu'elle a atterri (téléchargez-la comme couverture Reels).
  • out/short/report.json : minutages, sauts de ligne et avertissements.

Ouvrez les deux feuilles et regardez-les. Vérifiez : chaque scène est-elle lisible à la taille d'un téléphone, chacune dit-elle une seule chose, les points forts sont-ils sur les mots qui comptent, rien ne semble-t-il à l'étroit, l'ordre est-il correct, et l'image 0 montre-t-elle l'intégralité de l'accroche. Corrigez le JSON et relancez --stills jusqu'à ce que vous le publieriez.

Les avertissements arrêtent le rendu vidéo (code de sortie 2) : texte trop long pour un écran, accroche trop longue, point fort qui n'est pas dans le texte, scène trop rapide à lire, rythme en dehors de 0,85 à 1,25, ou court-métrage de plus de 59 secondes. Corrigez le script ; utilisez --force uniquement lorsque l'utilisateur a vu l'avertissement et le veut quand même. Certains problèmes sont des erreurs que --force ne peut pas outrepasser, comme un mot trop large pour l'écran à n'importe quelle taille : ceux-ci mettraient du texte hors écran.

4. Rendu

node render.mjs short.json

Écrit out/short/short.mp4 : 1080×1920, 30 ips, H.264, yuv420p, AAC (une piste silencieuse quand il n'y a pas de musique), que TikTok, Reels et Shorts acceptent tous. Un court-métrage de 30 secondes est rendu en environ une minute sur un ordinateur portable récent. Les machines avec 8 Go de mémoire rendent 2 images à la fois ; si un rendu est encore tué pour cause de mémoire, relancez-le avec --concurrency 1.

Avant de le montrer, prenez trois images et regardez-les (début, milieu, fin), ou lisez-le si votre client le peut. Montrez ensuite à l'utilisateur la couverture, la feuille et le chemin du MP4.

Plusieurs comptes : ne postez jamais le même fichier sur plusieurs comptes. Créez une variante par compte (une accroche, un thème ou un ordre de scènes différent, enregistré dans son propre JSON) afin qu'aucun deux comptes ne poste un contenu quasi identique.

5. Publiez (WoopSocial, avec confirmation)

Lisez references/woopsocial.md. En bref :

  1. social_accounts_list pour trouver les comptes (connectez-les d'abord si nécessaire).
  2. Pour TikTok, social_accounts_get_platform_inputs pour le compte : les options de confidentialité et la vidéo la plus longue autorisée. L'utilisateur choisit la confidentialité ; il n'y a pas de valeur par défaut.
  3. Téléchargement : media_uploads_create_session avec la taille exacte en octets de report.json, sauvegardez la réponse en tant que session.json, exécutez node upload.mjs session.json out/short/short.mp4, puis media_uploads_complete_session jusqu'à ce qu'il soit PRÊT.
  4. Rédigez la légende par plateforme (TikTok et Reels : une ligne qui ajoute à la vidéo plus 3 à 5 hashtags spécifiques ; YouTube : un titre de moins de 100 caractères plus une description). Utilisez contentOverride pour le texte par plateforme.
  5. posts_validate, puis montrez à l'utilisateur : comptes, légende par plateforme, confidentialité, heure de planification avec fuseau horaire, la couverture. Attendez un oui clair. Ensuite posts_create et posts_get.

Champs de divulgation : isYourBrand: true sur TikTok lorsque le court-métrage fait la promotion du propre produit de l'utilisateur ; isAiGeneratedContent uniquement pour les images, vidéos ou voix IA réalistes (le texte cinétique n'en a pas besoin). YouTube madeForKids est une déclaration légale : demandez, ne devinez jamais.

6. Rapportez

Montrez : le chemin du MP4, la durée, la feuille, où il a été posté (liens de posts_get) ou la planification, et tout ce que vous n'avez pas pu faire. N'inventez jamais de vues ou de résultats ; lisez-les plus tard avec social_account_posts_list et rapportez la date à laquelle ils ont été collectés.

Modification de l'apparence

  • Couleurs de marque : passez theme comme un objet (bg, fg, accent, accentText, font, uppercase). Maintenez le contraste du texte à 7:1 ou mieux ; vérifiez également l'accent sur l'arrière-plan.
  • Photos ou vidéo derrière les scènes : image par scène ou background pour l'ensemble du court-métrage. Ils sont assombris sous la couleur du thème pour que le texte reste lisible. Utilisez des fichiers que l'utilisateur possède ou pour lesquels il a une licence, et créditez-les dans la légende lorsque la licence le demande.
  • Polices fournies : Anton (condensée, majuscule, forte), Poppins, Inter. Toutes sous licence OFL.
  • Pour modifier les modèles eux-mêmes, éditez src/Short.tsx et prévisualisez avec npm run studio.

Cas particuliers

  • Pas de source pour un nombre : ne l'utilisez pas. Dites ce qui manque.
  • Texte qui ne tient pas : divisez la scène ; ne réduisez pas la police en dessous du minimum (le moteur de rendu ne le fera pas).
  • Texte de droite à gauche ou CJK, ou emoji : les polices fournies ne les couvrent pas et ils peuvent apparaître comme des boîtes vides. Dites-le et laissez-les de côté (les emoji peuvent aller dans la légende).
  • L'utilisateur veut un son tendance : les publications API ne peuvent pas en ajouter un. Publiez sur TikTok avec postMode: MEDIA_UPLOAD pour qu'il atterrisse dans la boîte de réception TikTok de l'utilisateur afin de terminer dans l'application.
  • Le rendu échoue sur Linux avec des bibliothèques manquantes : installez les paquets listés dans references/platform-specs.md.
  • Windows : passez toujours les propriétés dans le fichier JSON, jamais en ligne sur la ligne de commande.

Barre de qualité

Avant de le déclarer terminé, il doit satisfaire à tous ces critères :

  • L'image 0 montre l'intégralité de l'accroche (vérifiez cuts.jpg) ; environ 10 mots ou moins, énonçant le bénéfice.
  • Chaque scène dit une seule chose ; aucune scène ne dépasse environ 14 mots.
  • Chaque nombre correspond à sa source ; la source est à l'écran ou dans la légende.
  • Aucun avertissement, ou l'utilisateur les a vus et a choisi --force.
  • Les deux feuilles vérifiées : aucun texte en dehors de la ligne pointillée de sécurité, points forts sur les bons mots.
  • 15 à 59 secondes.
  • Une version distincte pour chaque compte.
  • L'utilisateur a confirmé avant que quoi que ce soit ne soit publié.

Skills associés