Communitygithub.com

screenshot-motion-skill

Créez des vidéos produit à partir de captures d'écran en utilisant les templates spotlight, dark launch-film, orbital gallery, kinetic graphics, prismatic folds ou page-turn storybook, avec texte modifiable, musique optionnelle sous licence et packs portables pour montage desktop. Idéal pour promos de captures d'écran, vidéos de lancement d'applications, flipbooks ou pour étendre cette bibliothèque de templates.

Qu'est-ce que screenshot-motion-skill ?

Cette compétence permet de générer des vidéos de démonstration ou de promotion de produits à partir de captures d'écran, en utilisant six templates animés prédéfinis (spotlight, kinetic, prism, orbit, launch, storybook). Elle est conçue pour des agents de codage comme Claude Code, Cursor ou Codex. L'utilisateur fournit les captures d'écran et des informations sur le produit ; l'agent écrit un fichier de configuration JSON, prépare un projet isolé avec Python, installe les dépendances Node.js, rend des images de test, puis produit une vidéo finale avec ou sans bande sonore. La vidéo peut être modifiée ultérieurement via un pack portable contenant les sous-titres, les pistes audio séparées et les assets originaux. La compétence gère les révisions en langage naturel et vérifie la qualité des rendus avant de retourner le résultat.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/simwy/screenshot-motion-skill/tree/HEAD

Demander à votre IA préférée

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

Documentation

Compétence Screenshot Motion

Produisez une vidéo réelle et modifiable avec l'un des six templates implémentés :

TemplateEffetCaptures d'écranDurée
spotlightCinq cartes se déploient, la capture centrale devient le héros, puis la rangée revient5 exactement12 sec
kineticTypographie audacieuse, écrans partagés et transitions graphiques5 exactement16 sec
prismÉcrans accordéon, révélations en verre superposé et balayages lumineux5 exactement18 sec
orbitGalerie orbitale néon, rotation en profondeur et rangée finale5 exactement18 sec
launchPromo éditoriale sombre avec collage, gros plans de fonctionnalités, grands titres et CTA5 exactement20 sec
storybookLivre relié s'ouvre, pages illustrées se tournent, couverture se ferme1 à 12Pauses configurables ; 5 pages par défaut à 32 sec

Consultez sélection et mappage des templates avant d'agencer les captures d'écran. Suivez un effet explicitement sélectionné. Sinon, recommandez/sélectionnez la correspondance la plus proche de l'intention de l'utilisateur, en conservant les choix précédents ; ne définissez pas toutes les demandes par défaut sur un livre. Le registre des templates faisant autorité est templates.json. Il s'agit d'une bibliothèque extensible, pas de vidéos de démonstration finies et groupées.

Entrées et décisions

Identifiez le produit promu, l'ordre des captures d'écran fournies et la langue de sortie à partir de la demande. Conservez les choix précédents. Si le produit est ambigu, clarifiez avant d'écrire des allégations promotionnelles ; sinon, utilisez des valeurs par défaut raisonnables et procédez. Par défaut : 1920×1080, 30 ips, pauses de quatre secondes pour storybook, texte explicatif en anglais, aucune narration parlée.

Inspectez les captures d'écran avant d'écrire le texte. Utilisez l'interface utilisateur réelle sans inventer de contrôles, de nombre de clients, de revendications de performances, de prix ou d'adresses de téléchargement. Le texte explicatif est une couche modifiable distincte ; le texte intégré dans les captures d'écran ne peut pas être modifié en changeant les légendes. Utilisez des médias fournis par l'utilisateur ou sous licence appropriée. Gardez les captures d'écran privées et les tâches générées en dehors du répertoire d'installation de la compétence.

Interaction avec l'utilisateur

Traitez l'invocation comme une demande de production de la vidéo. Demandez les captures d'écran et les détails du produit uniquement lorsqu'ils manquent ; écrivez la configuration et exécutez vous-même la préparation, le rendu et le mixage lorsque les outils sont disponibles. Ne donnez pas de commandes Python à l'utilisateur et ne lui demandez pas de rédiger du JSON dans le cadre du flux de travail normal. Vérifiez les dépendances locales et signalez les exigences manquantes concrètes. Respectez les autorisations d'exécution ; expliquez toute action que l'utilisateur doit entreprendre lorsque votre environnement ne peut pas l'effectuer.

Acceptez les demandes de révision en langage naturel, mettez à jour le projet généré et rendez un résultat révisé. Pour les changements de capture d'écran ou de durée storybook, préparez une nouvelle tâche afin que les métadonnées de composition restent cohérentes. Gardez les commandes techniques dans l'exécution de l'agent ou le dépannage du développeur, sauf si l'utilisateur les demande explicitement. Voir commandes de rendu pour développeur pour une utilisation manuelle.

Créez la vidéo

  1. Lisez la référence de configuration. Écrivez un fichier JSON de projet à côté des assets de l'utilisateur, en utilisant l'exemple correspondant dans examples/ comme point de départ. Rédigez des explications courtes et concrètes, une fonctionnalité par capture d'écran. Sélectionnez --template spotlight, --template launch, --template orbit, --template kinetic, --template prism ou --template storybook ; la commande ci-dessous illustre storybook. Respectez les limites de lignes validées.
  2. Préparez une tâche isolée :
    python3 /chemin/vers/screenshot-motion-skill/scripts/motion.py prepare --template storybook --config /chemin/vers/project.json --out /chemin/vers/nouvelle-tache
    
    Les tâches existantes ne sont jamais écrasées par prepare. La tâche contient son propre moteur de rendu, les captures d'écran copiées et la configuration normalisée ; elle ne dépend pas de la compétence après la préparation, sauf pour l'interface CLI d'assistance.
  3. Installez les dépendances à l'intérieur de la nouvelle tâche avec npm install. Node.js 22+ et Chrome/Chromium sont requis. Utilisez npm run studio dans cette tâche pour un aperçu interactif.
  4. Rendez d'abord des images clés représentatives pour le template sélectionné :
    python3 /chemin/vers/screenshot-motion-skill/scripts/motion.py render --job /chemin/vers/nouvelle-tache --frame 150 --browser /chemin/vers/chrome
    
    Inspectez le PNG résultant. Corrigez le texte, le recadrage ou la mise en page avant un rendu complet. Images clés de prévisualisation utiles : spotlight 105/190/330 ; launch 60/150/250/355/450/550 ; orbit 45/170/270/380/490 ; kinetic 35/100/170/245/320/430 ; prism 70/150/240/330/470 ; storybook 150 et 90 + holdFrames + 21 pour le point médian du premier tour. Choisissez des images dans la durée de la tâche.
  5. Rendez sans --frame. Cela crée out/video-silent.mp4. Fournissez un navigateur existant explicitement si la découverte automatique échoue ; le script ne télécharge pas de navigateur.
  6. Exécutez motion.py mix --job /chemin/vers/nouvelle-tache pour créer out/video.mp4. Sans entrées audio, il crée une copie silencieuse. Pour la musique, les sons de transition ou les sons de papier, lisez audio et licence. N'ajoutez pas de narration sauf si elle est demandée et qu'un service vocal autorisé approprié est disponible.
  7. Suivez les vérifications de sortie, inspectez le fichier rendu plutôt que seulement le code source, puis retournez la vidéo réelle et le chemin de la tâche. Soyez précis sur le fait qu'une narration, une écoute ou une lecture en temps réel a été effectuée. Si le rendu est bloqué, signalez la dépendance manquante spécifique ; ne remplacez pas par une image fixe en l'appelant vidéo.

Livraison pour montage desktop

Lorsque demandé, suivez exportation de montage et compatibilité. Rendez le mode propre et exportez le pack portable avec les sous-titres SRT modifiables, les pistes audio indépendantes, les captures d'écran originales et les clips de prise. Expliquez que la géométrie du mouvement reste figée et que les sous-titres importés nécessitent un style d'éditeur. Conservez le MP4 final stylisé comme référence. Vérifiez l'application/version de l'utilisateur avant de revendiquer une prise en charge native du brouillon ; l'adaptateur optionnel hérité Jianying est expérimental et n'est pas vérifié sur macOS/Windows ou CapCut actuels. N'installez jamais silencieusement des brouillons dans la bibliothèque d'une application.

Détails d'implémentation stables

Les notes suivantes sur le pli de page concernent storybook. Pour spotlight, préservez la barrière de peinture et les étiquettes d'espace d'écran. Pour launch, utilisez les recadrages region normalisés uniquement là où l'interface utilisateur visible le prend en charge ; ne réutilisez jamais les coordonnées de pixels d'un produit précédent.

  • Une page tournée vers la droite a l'ancienne capture d'écran sur son recto et l'explication suivante sur son verso. Ne fondez pas en fondu les spreads entiers et ne reflétez pas le texte inversé.
  • Toute la géométrie suit les numéros d'image ; n'introduisez jamais d'animation en temps réel ou d'aléatoire non ensemencé.
  • Le maillage de bande Canvas2D évite les problèmes de composition 3D imbriquée du navigateur. Gardez le chemin rapide de page plate, le petit chevauchement de bande et la superposition d'éclairage continu : l'ombrage anti-crénelé par bande crée des lignes visibles à travers le texte.
  • La distance de caméra 3000 maintient les pointes de page soulevées à l'intérieur du cadre 1080p. Re-vérifiez l'enveloppe complète du tour après des changements de caméra ou de taille de page.
  • Le moteur de rendu par défaut ajuste les images sans recadrage. Les captures d'écran en paysage sont prises en charge ; ne les étirez pas pour obtenir un rapport hauteur/largeur portrait.
  • Rendez séquentiellement par défaut. L'augmentation de la concurrence nécessite une autre vérification visuelle des images capturées.

Le code d'origine du paquet est sous licence MIT. Remotion et les médias ont des licences distinctes ; voir THIRD_PARTY_NOTICES.md. Cette compétence n'autorise pas la publication, le téléchargement d'assets utilisateur, la modification des paramètres du compte ou l'installation globale d'elle-même.

Étendez la bibliothèque

Lorsqu'on vous demande d'ajouter un autre effet, suivez le contrat d'extension. Ajoutez un moteur de rendu, une entrée de registre et un exemple plutôt que de remplacer les templates existants. Vérifiez à la fois le nouvel effet et les templates existants pertinents.

Skills associés