Communitygithub.com

Amartileyton/autovideo

Génération d'extraits d'articles éditoriaux au format Rémotion avec une saisie obligatoire du format et du fond, des surlignages en couches, aucun effet néon/luminescent, et une vérification de la qualité pour mobile.

Qu'est-ce que autovideo ?

La compétence Amartileyton/autovideo permet de créer des extraits d'articles éditoriaux animés avec Remotion, destinés à des publications sur Instagram ou autres réseaux sociaux. Elle impose une saisie obligatoire du format (4:3 demi-écran ou 9:16 plein écran) et du fond (lumière chaude, sombre propre, grille claire ou grille sombre) avant tout encodage. Le design respecte une interdiction absolue des effets néon, luminescents, vitreux ou cyberpunk, et utilise un surlignage discret façon marqueur physique. L'animation est pilotée avec `useCurrentFrame()`, `spring()` et `interpolate()`, et inclut un fondu au début, un lent mouvement de caméra et un dévoilement progressif des surlignages de gauche à droite. Une grille de rejet en première passe vérifie huit critères (format, absence de néon, authenticité de la source, etc.) avant livraison. La compétence s'appuie sur les bonnes pratiques de Remotion et est conçue pour les beats d'actualité, de communiqués ou de tendances où un terminal serait inapproprié.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Amartileyton/autovideo/tree/HEAD/.agent/skills/article-highlights

Demander à votre IA préférée

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

Documentation

Surlignages d'article

À utiliser avec remotion-best-practices, motion-graphics et cinematic-camera pour les moments d'actualité, de communiqué, de tendance et de preuve d'article où un terminal semblerait forcé.

Saisie obligatoire

Avant d'encoder, demandez toute décision manquante :

Quel format souhaitez-vous : 4:3 demi-écran Instagram ou 9:16 plein écran Instagram ? Et quel fond : lumière chaude, sombre propre, grille claire ou grille sombre ?

  • Insert 4:3 : 1440×1080, conçu pour rester lisible à environ la moitié d'un cadre 9:16.
  • Plein écran 9:16 : 1080×1920, respectant les zones de légende et d'interface.
  • Utilisez le 16:9 uniquement lorsqu'il est explicitement demandé.
  • Si l'utilisateur délègue le fond, utilisez lumière chaude.

Le papier de l'article peut rester clair sur une scène sombre propre ou grille sombre. Ne changez pas silencieusement toute la composition en sombre.

Interdiction visuelle absolue

Zéro néon, lueur, bloom, bords lumineux, ombres colorées, dégradés cyan-violet, orbes dégradés, lavis de couleurs radial, glassmorphisme, éclairage cyberpunk ou décoration IA d'ambiance. Les surlignages doivent ressembler à un traitement physique au marqueur/papier — pas à de la lumière émise.

Rejetez tout traitement interdit avant la livraison.

Référence approuvée

Inspectez assets/examples/article-highlight.mp4 et contactez/référencez les images avant d'encoder. Suivez sa hiérarchie éditoriale, son espacement généreux du papier, son traitement discret au marqueur, sa caméra lente et sa lisibilité. Utilisez la galerie du dépôt canonique lorsque les ressources locales ne sont pas disponibles : https://github.com/Liamrjohnston/remotion-motion-graphics-skill.

Quand l'utiliser

À utiliser pour :

  • Les beats informatifs/actualités/communiqués/tendances.
  • La preuve « quelque chose a changé ou a été lancé ».
  • Des extraits réels d'articles avec des phrases significatives surlignées.
  • Une preuve non terminale où un matériel éditorial clarifie le propos.

Utilisez terminal-inserts pour les histoires de CLI/configuration/exécution d'agent. Utilisez des images/véritables de produit ou d'interface lorsque le beat est une démonstration de produit.

Architecture de base

N'aplatissez pas l'article lorsque les traits de marqueur doivent se situer derrière le texte. Construisez un DOM/SVG Remotion en couches :

  1. Surface de scène sélectionnée.
  2. Papier/carte éditorial avec une marge de sécurité généreuse.
  3. Couche de marqueur Rough.js/SVG au-dessus du papier.
  4. Texte DOM/SVG au-dessus du marqueur.

Le marqueur doit se situer visiblement derrière les mots et au-dessus du papier.

Matériau et mise en page

  • Papier : blanc chaud/blanc cassé avec bordure neutre et ombre neutre douce ; jamais de lueur colorée.
  • Typographie : hiérarchie éditoriale/actualité — petit libellé de section, grand titre sérif/éditorial, sous-titre/date atténué, et au maximum 2–3 lignes de corps courtes.
  • Surlignages : couleur de marqueur physique semi-transparente et discrète, comme un jaune atténué ; jamais fluorescent.
  • Utilisez l'identité réelle de l'article/source et le texte fourni. N'inventez pas de publications, dates, affirmations ou citations.
  • Coupure de ligne intentionnelle et gardez le texte à l'intérieur des marges de sécurité transformées.
  • Ne centrez pas comme un diapositive titre ; cela doit ressembler à un extrait authentique d'article.
  • Supprimez les pastilles/boutons/encombrement de source non essentiels s'ils sont illisibles à la taille de destination.

Animation

  • Commencez par un flou discret et bref vers la mise au point uniquement lorsqu'il soutient la référence approuvée ; le flou est un flou optique, pas une lueur.
  • Aucun marqueur visible pendant la phase de mise au point précoce.
  • Utilisez une lente et subtile poussée de caméra et une rotation de perspective discrète.
  • Commencez les traits de marqueur après que la mise au point s'est stabilisée.
  • Dessinez chaque surlignage de gauche à droite en utilisant un masque/balayage.
  • Séquençez les surlignages ; ne les révélez jamais tous en même temps.
  • Terminez avec toutes les phrases clés lisibles et une pause stable.
  • Pilotez l'animation avec useCurrentFrame(), spring() et interpolate() ; pas d'animation CSS.

Règles du surligneur

  • Utilisez rough.js ou une forme de marqueur SVG irrégulière.
  • Le marqueur reste derrière le texte.
  • Une légère imperfection est bonne ; un rectangle dégradé parfait ne l'est pas.
  • Surlignez uniquement les phrases significatives vérifiées, pas des paragraphes entiers.
  • L'opacité du marqueur doit préserver le contraste du texte.
  • Pas de jaune fluorescent, d'émission lumineuse, de halo flou ou de bord lumineux.

Pas de narration redondante

Le texte de l'article/source peut apparaître lorsqu'il constitue la preuve réelle. N'ajoutez pas un titre séparé qui ne fait que répéter le commentaire parlé. Utilisez uniquement l'extrait authentique et les métadonnées structurelles minimales.

Grille de rejet en première passe

Ne livrez pas tant que chaque réponse n'est pas « non » :

  1. Le format ou le fond était-il non confirmé ?
  2. Y a-t-il du néon, de la lueur, un traitement lumineux du marqueur, une ombre colorée, un lavis dégradé ou du glassmorphisme ?
  3. L'identité ou l'affirmation de la source/article est-elle inventée ?
  4. La carte est-elle un diapositive titre centrée générique au lieu d'une surface éditoriale ?
  5. Un texte clé est-il illisible à l'emplacement Instagram choisi ?
  6. Le marqueur se trouve-t-il au-dessus/obscurcit-il le texte ou apparaît-il trop tôt ?
  7. La caméra recadre-t-elle le papier ou crée-t-elle un espace vide ?
  8. Le résultat manque-t-il de la retenue et de la finition de la référence approuvée ?

Révisez en privé jusqu'à ce que la grille soit passée.

QA et livraison

  1. Vérifiez les types ou exécutez la validation significative la plus petite.
  2. Rendez une image fixe sans surlignage, une image fixe à mi-trait, une image fixe de fin de surlignage et la pause finale.
  3. Confirmez que le marqueur est invisible tôt, derrière le texte et complet à la fin.
  4. Inspectez pour le rognage, le texte illisible, les détails de source inventés, le néon/lueur et un cadrage faible.
  5. Livrez un MP4 avec les dimensions, la durée, la commande de rendu exacte et une note de placement dans l'éditeur.

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

Skills associés