Communitygithub.com

ScreenBeaver / ScreenBeaver

Crée une vidéo de démonstration interactive Screen Beaver en pilotant l'interface utilisateur (curseur fluide, clics, saisie réelle) sans intervention humaine.

Qu'est-ce que ScreenBeaver ?

Cette compétence permet à un agent IA (Cursor, Codex, etc.) de produire une vidéo de démonstration produit complète via Screen Beaver. Elle orchestre l’enregistrement natif d’une fenêtre, l’automatisation des clics/saisies, l’ajout de légendes, de voix off (synthèse vocale Edge) et de musique de fond (Openverse CC). L’agent ne doit utiliser que les outils MCP de Screen Beaver — jamais de scripts shell ni d’appels HTTP bruts. Le workflow privilégié est `record_and_build` qui enchaîne capture, démonstration, post-production (zooms automatiques, effets sonores) et export. Les coordonnées de clic sont calculées via `get_window_layout` (page-relative) pour garantir la précision, indépendamment de la taille du navigateur. La voix off est générée par défaut en anglais, mais peut être adaptée à d’autres langues (hindi, espagnol…) via `voiceoverLang`. Le respect des règles strictes (pas d’export prématuré, pas de presse-papiers, pas de boîte de dialogue de partage OS) garantit une expérience fluide et reproductible sous Windows.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/ScreenBeaver/ScreenBeaver/tree/main/.cursor/skills/screen-weaver-demo

Demander à votre IA préférée

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

Documentation

Screen Beaver — générateur de démo en direct

L'utilisateur souhaite rester inactif pendant que vous pilotez son produit (curseur fluide + clics + saisie réelle) et créez une vidéo Screen Beaver. Préférez la capture native (pas de sélecteur de partage Windows). Les modifications s'appliquent en mode Auto (une seule recette). L'utilisateur clique lui-même sur Exporter.

Règles impératives

  1. Utilisez uniquement le MCP screen-beaver. Préférez record_and_build (qui inclut l'automatisation de la démo). Utilisez les outils atomiques demo_* ou run_demo pour les chemins de clics personnalisés.
  2. Si screen-beaver est absent de la liste des outils MCP de cette session, arrêtez-vous. Dites à l'utilisateur de l'activer dans Personnaliser → MCP, d'exécuter npm run mcp:install une fois, puis de recharger Cursor / démarrer une nouvelle conversation. Ne pas recourir à HTTP brut, curl, fetch ou Shell via 127.0.0.1:17355.
  3. Ne jamais écrire ni exécuter de scripts .ps1, .bat, .cmd ou autres pour communiquer avec Screen Beaver.
  4. Ne jamais créer de fichiers JSON de démonstration/recette sur le disque comme solution de contournement — passez les étapes/payloads dans les arguments des outils MCP.
  5. N’appelez pas export_mp4 sauf si l’utilisateur le demande explicitement.
  6. Gardez l'application de bureau Screen Beaver ouverte (npm run desktop:dev ou l'application installée). Pont : http://127.0.0.1:17355 (utilisé uniquement par le serveur MCP). Si ping_studio échoue, dites à l'utilisateur d'ouvrir l'application — ne restez pas bloqué.
  7. Ne jamais demander de cliquer sur le sélecteur de partage d'écran du système — utilisez start_capture / record_and_build (sélection native de fenêtre).
  8. Ne pas enregistrer passivement une page blanche et ajouter seulement des légendes. Pilotez toujours l'interface pendant la capture.
  9. Gardez les prises aussi courtes que le script le nécessite. Arrêtez dès que le dernier clic/saisie est terminé (pad durationSec ≤ ~0,4 s). N'ajoutez pas de longues attentes finales.
  10. Utilisez demo_type / { op: "type", text } pour la saisie — touche par touche, jamais de collage par presse-papiers.
  11. Narrez brièvement dans le chat pour que l'utilisateur observe la fenêtre Screen Beaver.
  12. Coordonnées : appelez get_window_layout (ou utilisez contentNx/contentNy) — ne faites jamais confiance à la taille du navigateur intégré de Cursor. Les contentNx/contentNy relatifs à la page traversent automatiquement le chrome du navigateur.
  13. Mode Auto : laissez le studio dériver les zooms et les effets sonores de saisie à partir des clics et frappes réels. Ne pas placer manuellement des zooms/sons d'agent qui entrent en conflit avec Auto. record_and_build ne fournit que les légendes + regenerateAutoZooms.
  14. Voix off : après les légendes, appelez generate_voiceover (anglais par défaut). Si l'utilisateur demande une autre langue, passez targetLang (ex. hi-IN) — les légendes sont d'abord traduites, puis Edge TTS. Préférez record_and_build({ voiceover: true, voiceoverLang }) qui le fait automatiquement.
  15. Musique de fond : utilisez Openverse via MCP (pick_background_music / record_and_build avec backgroundMusic: true). Pas de Pixabay / clés .env. Les effets de lueur / clair jouent l'effet sonore shimmer inclus (Shining.mp3).

Workflow A — entièrement automatique (ouvre d'abord l'interface Screen Beaver)

record_and_build maintenant :

  1. focus_studio — amène Screen Beaver au premier plan
  2. open_record_picker — ouvre la même interface "Démarrer un nouvel enregistrement" / options de partage
  3. Ouvre productUrl / application
  4. start_capture — sélectionne la fenêtre de manière native (Application), affiche Enregistrement…
  5. Exécute demoSteps
  6. S'arrête immédiatement + zooms/légendes automatiques à partir de la prise
  7. generate_voiceover — anglais par défaut ; traduit + TTS quand voiceoverLang est défini
  8. pick_background_music — musique de fond Openverse CC (corporate instrumentale douce)
ping_studio
  → record_and_build({
      productName, productUrl, titleContains: "Edge",
      voiceover: true,
      voiceoverLang: "en-US",   // ou "hi-IN" / "es-ES" etc.
      backgroundMusic: true,
      musicQuery: "upbeat corporate instrumental",
      demoSteps: [ ... ],
      introCaption: "...",
      features: [{ title: "Connexion", atSeconds: 3 }]
    })
  → Dites à l'utilisateur : cliquez sur Exporter quand c'est prêt

Ou sur une prise existante : generate_voiceover({ targetLang: "en-US" }) pick_background_music({ query: "calm tech ambient instrumental" }) generate_voiceover({ speakLang: "en-US", targetLang: "hi-IN" })

Étapes de démonstration

opsignification
wait{ ms } — restez court ; pas de longs pads de fin
move / clickpréférez { contentNx, contentNy } 0..1 dans la page web ; ou { nx, ny } fenêtre extérieure
type{ text, delayMs? } touche par touche (émet l'effet sonore de saisie)
scroll / focus / right_clickcomme avant

Limites

  • La capture native + l'automatisation des entrées sont Windows desktop uniquement.
  • Les entrées souris/clavier de la démo fonctionnent uniquement pendant la capture.
  • La boîte de dialogue de partage du système n'est jamais montrée aux agents — Screen Beaver affiche les options de partage intégrées, puis capture la fenêtre de manière native.

Skills associés