Que fait readmereel ?
Vous transformez le dépôt dans lequel vous vous trouvez en une courte vidéo de lancement. Vous écrivez les mots ; un script rend la vidéo. N'écrivez jamais de code d'animation : les scènes sont des modèles fixes.
1. Lire le dépôt
Lisez d'abord le README, puis le manifeste du package (package.json, pyproject.toml, Cargo.toml, go.mod), le dossier docs et les fichiers image du dépôt. Cherchez :
- le nom et ce qu'il fait en une ligne
- la douleur qu'il supprime, dans les mots de l'utilisateur
- trois choses qu'il fait pour l'utilisateur
- la commande que l'utilisateur exécute en premier (installation ou démarrage rapide)
- des captures d'écran ou schémas réels (
docs/,assets/,.github/,images/,screenshots/, liens d'images dans le README pointant vers des fichiers du dépôt) - un logo (PNG ou SVG) et une couleur de marque (provenant du logo, des badges du README ou du CSS)
- l'URL GitHub (via
git remote get-url origin) et, sighfonctionne, le nombre d'étoiles :gh repo view --json stargazerCount -q .stargazerCount
2. Écrire launch-video/story.json
Créez le dossier launch-video/ à la racine du dépôt et écrivez launch-video/story.json. Les chemins sont relatifs à la racine du dépôt. Champs, avec limites strictes appliquées par le script :
| Champ | Limite | Rédigez-le comme |
|---|---|---|
name | 24 caractères | Le nom du produit exactement comme l'écrit le README |
problem | 70 caractères | La douleur de l'utilisateur, pas le produit : "Chaque présentation IA se ressemble". Visez environ 6 à 9 mots pour que les spectateurs puissent le lire |
promise | 60 caractères | Le résultat obtenu par l'utilisateur : "Des diapos qui semblent conçues par une personne". Environ 6 à 9 mots |
features | exactement 3 | Chaque { "title", "detail", "image" } |
feature title | 40 caractères | Un résultat, pas un nom de composant : "N'envoie jamais un mois deux fois" |
feature detail | 80 caractères | Une phrase simple expliquant comment ou pourquoi, environ 12 mots |
feature image | optionnel | Chemin vers une capture d'écran réelle du dépôt montrant cette fonctionnalité : PNG, JPG, WebP ou SVG. Un GIF animé s'affiche comme une image fixe, et les fichiers vidéo ne sont pas acceptés. Privilégiez les images dont le texte est suffisamment grand pour être lu en petite taille ; évitez celles qui sont principalement vides ou illisibles. Omettez-la s'il n'y en a pas. N'en créez ou n'en récupérez jamais. |
install | 48 caractères | Une commande, une ligne, exactement comme le README la donne ; si elle est plus longue, utilisez la première commande réelle la plus courte. N'utilisez jamais d'espace réservé comme <votre-utilisateur> : utilisez un exemple réel que le README lui-même utilise, par ex. repoheat dashboard --user ratatui |
url | 60 caractères | github.com/proprietaire/depot : pas de https://, pas de .git. Convertissez une sortie git remote telle que [email protected]:o/r.git ou https://github.com/o/r.git en github.com/o/r |
stars | Le nombre d'étoiles, ou null. Affiché seulement si 10 ou plus | |
logo | optionnel | Chemin vers un logo PNG ou SVG |
accent | Couleur hexadécimale comme #0f766e ; la couleur de marque, sinon omettez-la | |
music | optionnel | Seulement si l'utilisateur vous donne un fichier audio (mp3, m4a, wav ou ogg) |
endCard | Omettez-le (true). Mettez false seulement si l'utilisateur demande l'absence de la mention "made with readmereel" |
Exemple :
{
"name": "agencyrecap",
"problem": "Rapports clients mensuels, construits et envoyés à la main",
"promise": "Des rapports clients mensuels qui s'envoient tout seuls",
"features": [
{ "title": "PDF personnalisé chaque mois", "detail": "Votre logo et couleur, envoyé par email à chaque client le jour que vous choisissez", "image": "docs/images/report-page-2.png" },
{ "title": "Un tableau de bord unique", "detail": "Voyez quels rapports ont été envoyés et renvoyez-les en un clic", "image": "docs/images/dashboard.png" },
{ "title": "N'envoie jamais deux fois", "detail": "Maintient et réessaie en cas d'échec de Google ou de l'email, puis vous informe" }
],
"install": "docker compose up -d",
"url": "github.com/taufiquebuilds/agencyrecap",
"stars": null,
"accent": "#0f766e"
}
Tout champ qui n'est pas dans ce tableau est rejeté, donc une faute de frappe est détectée. Règles de rédaction : mots courts, pas de battage publicitaire ("révolutionnaire", "surpuissant", "sans couture", "débloquer"), pas d'emoji, pas de points d'exclamation, phrase en minuscule, nombres en chiffres. Chaque affirmation doit être démontrée par le dépôt.
3. Montrer les scènes à l'utilisateur et attendre
Avant le rendu, affichez les six scènes sous forme de liste numérotée et demandez "ok" ou des modifications :
- Accroche (3 s) :
problem - Titre (3 s) :
name,promise - Fonctionnalité 1 (4 s) : titre, détail, fichier image ou "carte texte"
- Fonctionnalité 2 (4 s) : pareil
- Fonctionnalité 3 (4 s) : pareil
- Installation + étoile (7 s) :
install, "Star on GitHub",url
4. Rendu
scripts/render.mjs se trouve dans le dossier qui contient ce SKILL.md. Calculez son chemin absolu et exécutez-le depuis la racine du dépôt :
node <chemin-absolu-vers-ce-dossier-skill>/scripts/render.mjs launch-video/story.json
Il nécessite Node 22+ et ffmpeg et affiche comment installer l'un ou l'autre s'il manque. Il a besoin d'un accès internet à chaque exécution : npm (HyperFrames), un téléchargement unique de Chrome, Google Fonts et le CDN GSAP. Le rendu prend 3 à 10 minutes, donc exécutez la commande avec un délai d'au moins 15 minutes, ou en arrière-plan et attendez qu'elle se termine. Si le sandbox bloque le réseau, demandez à l'utilisateur de l'autoriser, ou donnez-lui la commande exacte ci-dessus et demandez-lui de l'exécuter lui-même.
Ajoutez --draft pour un rendu plus rapide et de moindre qualité lorsque l'utilisateur veut seulement un aperçu rapide.
Si le script affiche des problèmes d'histoire ou de mise en page, corrigez story.json (raccourcissez le texte nommé) et relancez-le. Si un rendu échoue, lisez la fin de launch-video/render.log.
5. Remise
Dites à l'utilisateur ce qui a été créé :
launch-video/video-16x9.mp4: README, Product Hunt, Show HN, YouTubelaunch-video/video-9x16.mp4: X, LinkedIn, Instagram Reels, TikToklaunch-video/video.gif: collez en haut du README aveclaunch-video/wide/etlaunch-video/tall/: projets HyperFrames modifiables. Ils sont reconstruits à chaque exécution, donc copiez-en un ailleurs avant de le modifier dans HyperFrames Studio (cd launch-video/wide && npx --yes [email protected] preview)
Donnez à l'utilisateur la commande absolue exacte que vous avez exécutée (avec son chemin launch-video/story.json) afin qu'il puisse refaire le rendu sans agent. Pour modifier le texte plus tard, il édite story.json et relance la même commande. Suggérez d'ajouter launch-video/wide/, launch-video/tall/ et launch-video/render.log au .gitignore. Si aucune fonctionnalité n'avait d'image réelle, dites que l'ajout d'une capture d'écran dans le dépôt rend la vidéo plus percutante.