Communitygithub.com

Tutoriel vidéo d'écran

Créez un tutoriel vidéo de marque (30 s à 10 min, 1080p paysage) montrant comment faire quelque chose dans une application ou un site réel (Search Console, Cloudflare, Google Tag Manager, WordPress, GitHub, n'importe quel tableau de bord). Utilise l'enregistrement d'écran de l'utilisateur s'il en a un, sinon reconstruit les étapes sous forme d'écrans HTML réalistes avec curseur animé, clics, saisie et focus.

Qu'est-ce que Tutoriel vidéo d'écran ?

Cette compétence permet de générer automatiquement des vidéos tutoriels de type « pas à pas » pour des applications ou sites web réels, en 1080p paysage, d'une durée de 30 secondes à 10 minutes. Si l'utilisateur fournit un enregistrement d'écran, celui-ci est intégré dans une fenêtre de marque avec des mouvements de caméra (zoom avant sur le contrôle, puis retour arrière). Sinon, la compétence reconstruit chaque étape sous forme de captures d'écran HTML réalistes (look-alike screens) basées sur des références datées, avec curseur animé, clics, frappes et focus visuel. Elle prend en charge les plateformes comme Search Console, Cloudflare, Google Tag Manager, WordPress, GitHub, et tout autre tableau de bord. La voix de l'utilisateur (ou la voix par défaut « Jay ») narre le tutoriel, les revendications sont étayées par des captures de la documentation officielle (reçus), et les données privées sont automatiquement détectées et floutées. Le rendu final inclut des marqueurs d'étapes, des timbres visuels, et une utilisation légère de la kit (réactions, sons mèmes). La compétence suit un ordre d'exécution précis (fetch-video.sh → enhance-audio.sh → rough-cut.mjs → voice.mjs) et un pacing calme pour guider le spectateur.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/NicheEgg/video-studio/tree/HEAD/skills/video-screen-tutorial

Demander à votre IA préférée

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

Documentation

Tutoriel d'écran

Lisez references/house-rules.md en premier ; il prévaut. Ordre d'exécution : video-director section 3. Ce fichier ne couvre que ce qui est spécifique.

Statut : les écrans reconstruits sont prouvés (la vidéo Search Console + Cloudflare) ; les captures d'écran dans le beat screen sont prouvées. La lecture d'un enregistrement d'écran réel dans la fenêtre de zoom n'est pas encore construite : construisez-la et testez-la sur le premier enregistrement réel (étendez le beat screen pour prendre video, comme le fait le beat clip), puis mettez à jour cette ligne.

Ce qui est spécifique

  • D'où viennent les écrans (règle dure 2) : l'enregistrement d'écran de l'utilisateur s'il en a un ; sinon reconstruisez les étapes sous forme de HTML look-alikes à partir de références actuelles et datées (references/screens.md), avec curseur, clics, saisie et focus. C'est une démonstration, donc la reconstruction est appropriée. Modules existants à réutiliser : gsc-add-property, cloudflare-dns-add, gsc-verify.
  • Ce qui doit rester réel : toute revendication sur le produit (« Google dit… ») est un reçu capturé depuis sa documentation, et toute page statique présentée telle quelle (une page d'accueil, une page de tarification) est une capture.
  • Vérifiez la présence de données privées dans chaque image utilisée (emails, identifiants de compte, clés, revenus). Floutez ou recadrez et informez l'utilisateur.
  • Source : fetch-video.sh → enhance-audio.sh → rough-cut.mjs (il coupe l'image et le son ensemble, donc les temps morts et les prises ratées disparaissent) → voice.mjs --provider file.
  • Chaque étape est un beat screen avec l'enregistrement (ou la capture d'écran) dans la fenêtre de marque et des mouvements de caméra moves : commencer large, pousser vers le contrôle au moment où il est nommé (1,3–1,6×), maintenir, reculer. Jamais de cadre d'ordinateur portable ou d'appareil.
  • Marqueur d'étape en haut à droite depuis script.json → steps. Un tampon ou un surlignage sur l'élément à cliquer. Une instruction par beat, nommée comme l'écran l'étiquette.
  • Structure : accroche (le problème, 5–10 s ; à la caméra si l'utilisateur s'est filmé) → l'ensemble du travail en une ligne → les étapes → le résultat → un conseil bonus.
  • Utilisation légère de la kit : reçus pour les revendications sur le produit (sa propre documentation), un son de réaction ou de mème sur les moments « ça a marché » ou « ça a échoué ». Pas de coupure en milieu d'étape.
  • Les écrans reconstruits utilisent des données fictives (example.com), jamais les détails d'un compte réel.
  • Rythme : calme. Le spectateur suit pas à pas.

Coût et temps

Transcription uniquement (quelques centimes). Rendu ≈ 1–1,5 min par minute de vidéo.

Références

own-footage.md · engine-api.md (beat screen, mouvements de caméra) · screens.md (reconstruction d'écrans d'applications pour les démonstrations) · voice-music.md · troubleshooting.md

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills associés