Communitygithub.com

nathankim0/app-demo-recorder

Enregistrez des démos claires et dynamiques d'une application mobile tournant sur un émulateur Android ou un simulateur iOS, pour des publicités, aperçus dans l'App Store, publications sur les réseaux sociaux ou outils vidéo IA qui nécessitent un enregistrement d'écran en entrée.

Qu'est-ce que app-demo-recorder ?

Ce skill permet à un agent IA de créer des enregistrements d'écran professionnels d'applications mobiles, optimisés pour des démos marketing ou des outils vidéo IA. Il prend en charge les émulateurs Android et les simulateurs iOS, en utilisant respectivement `adb` et `xcrun simctl` pour le contrôle, et `ffmpeg` pour le traitement vidéo. L'agent guide l'utilisateur sur le choix des fonctionnalités à montrer, du build (production, staging, debug) et des identifiants, puis prépare l'environnement pour des performances optimales (ressources CPU/mémoire, barre d'état nettoyée). L'enregistrement est effectué sur la machine hôte pour éviter les ralentissements de l'émulateur, et chaque clip peut être automatiquement resserré (suppression des temps morts) et accéléré. Enfin, le skill vérifie chaque clip via une vignette de temps, coupe les attentes, et livre tous les fichiers dans un dossier avec un README. Il est particulièrement utile pour les agents utilisant Claude Code, Cursor ou Codex ayant besoin de produire des démos rapides et de haute qualité.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/nathankim0/app-demo-recorder/tree/HEAD/skills/app-demo-recorder

Demander à votre IA préférée

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

Documentation

Enregistreur de démos d'applications

Réalisez de courtes vidéos d'écran qui donnent l'impression qu'une personne utilise l'application en toute confiance : une fonctionnalité par clip, pas de ralentissements, pas d'overlays de débogage, pas de publicités, une barre d'état propre.

$S correspond à scripts/appdemo.sh dans le répertoire de ce skill. Il nécessite ffmpeg (brew install ffmpeg), ainsi que adb pour Android ou xcrun simctl d'Xcode pour iOS. Dans les agents en bac à sable, exécutez-le avec des permissions élevées : il communique avec l'émulateur, le simulateur et écrit en dehors de l'espace de travail.

1. Convenir de ce qu'il faut montrer

  • Demandez quelles fonctionnalités montrer si l'utilisateur ne l'a pas précisé. Enregistrez un clip par fonctionnalité et nommez les clips NN_fonctionnalite (01_recherche_prix, 02_calculatrice. Mettez en avant ce que le produit fait de mieux, pas l'écran sur lequel l'app s'ouvre.
  • Demandez quel build et quel compte utiliser quand ce n'est pas évident. Les séquences marketing nécessitent normalement un build de release production avec des données réelles. Un build debug/staging affiche des menus de développement, des toasts d'avertissement, des données de test et s'exécute plus lentement. Ne faites pas de supposition : un enregistrement staging doit généralement être refait.
  • Si le clip nécessite un état payant ou premium, cherchez une option de débogage/développeur dans l'application avant de toucher à la facturation réelle.
  • Les identifiants que l'utilisateur vous donne : saisissez-les avec une commande dont la sortie est ignorée (adb shell input text ... >/dev/null sur Android ; printf ... | xcrun simctl pbcopy <udid> puis coller sur iOS) plutôt qu'avec des outils qui journalisent chaque commande, et ne les écrivez pas dans des fichiers.

2. Rendre l'appareil rapide et silencieux

  • Émulateur Android : allouez-lui des ressources. Un petit AVD va bégayer à l'écran et ce bégaiement se retrouvera dans le clip. emulator -avd <nom> -memory 6144 -cores 4 -gpu host -no-snapshot-save -no-boot-anim Si le même ID d'application est déjà installé avec une clé de signature différente, utilisez un autre AVD plutôt que de désinstaller (la désinstallation supprime les données de l'utilisateur).
  • Build de release installé et en cours d'exécution ; connectez-vous ; fermez les popups de première utilisation, les demandes d'autorisation et les publicités interstitielles avant d'enregistrer.
  • $S statusbar on : heure fixe (APPDEMO_TIME, par défaut 9:41), batterie et signal à fond, icônes de notification masquées. $S statusbar off restaure la barre d'état.
  • Sur Android, n'utilisez pas le bouton Retour système sur l'écran racine de l'application. Cela termine l'activité et toute modification en mémoire (commutateur premium, indicateur de fonctionnalité) est perdue au redémarrage.

3. Répéter, puis enregistrer

  1. Répétez chaque clip une fois sans enregistrer. Apprenez les taps, les coordonnées et les temps d'attente. Ouvrir l'écran une fois réchauffe également les caches, ce qui accélère le chargement lors de la prise.
  2. Enregistrez :
    $S start 01_recherche_prix
    # pilotez l'application : adb shell input tap/swipe/text, xcrun simctl, ou votre outil d'automatisation d'interface
    $S stop 01_recherche_prix        # -> $APPDEMO_OUT/01_recherche_prix.mp4
    
    L'enregistrement s'exécute sur l'hôte (adb emu screenrecord / simctl io recordVideo). N'utilisez pas adb shell screenrecord sur l'appareil avec un émulateur : il entre en concurrence avec l'application pour le CPU et peut figer l'interface, de sorte que les défilements et les taps n'apparaissent jamais.
  3. Envoyez les actions pour un clip en un seul lot avec de courts temps de pause (0,5–2,5 s), pas un appel d'outil par tap. Inspecter l'écran entre les étapes laisse de longues périodes mortes dans la prise.
  4. Défilez par étapes délibérées (environ 40 % de l'écran, 600–800 ms par glissement) pour que les spectateurs puissent lire.
  5. Utilisez la saisie de texte du pilote d'interface pour le texte non ASCII (coréen, emoji) ; adb shell input text ne gère que l'ASCII.
  6. Lorsqu'une fonctionnalité n'a de valeur qu'avec des données (un grand livre, un journal, un panier), enregistrez la création d'une entrée réaliste, puis supprimez-la immédiatement après et vérifiez que l'écran est revenu à son état d'origine. Vérifiez d'abord les paramètres de partage : une nouvelle publication peut être publique.

4. Vérifier chaque clip

$S strip $APPDEMO_OUT/01_recherche_prix.mp4 /tmp/01.jpg 8

Regardez la vignette, pas votre script : confirmez que chaque étape prévue a bien eu lieu (les défilements ont bougé, l'onglet a changé, le résultat est apparu) et que rien d'indésirable n'est à l'écran : toasts, claviers recouvrant le contenu, publicités, données personnelles comme une adresse réelle, ou bannières de débogage. Réenregistrez les clips échoués ; ne publiez pas un clip dont l'action n'a rien fait en silence.

5. Couper les temps d'attente

$S tighten entree.mp4 sortie.mp4          # coupe le début inactif, les zones figées -> 0,35 s, maintient l'écran final 1,5 s
$S speed  entree.mp4 sortie.mp4 1.3       # accélération uniforme optionnelle

tighten démarre le clip 0,4 s avant la première action réelle (les secondes d'inactivité après start ne sont jamais parfaitement immobiles, donc la détection de gel seule les manque) et raccourcit chaque intervalle où l'image ne change pas, de sorte que les taps se succèdent comme une personne qui connaît l'application. Les clips typiques perdent environ la moitié de leur longueur. Vérifiez un clip resserré avec strip aussi : si un petit changement (saisie d'un chiffre, basculement d'un composant) a été coupé, abaissez --noise ; si des pauses subsistent, abaissez --min-freeze.

6. Livrer

Placez tout dans un seul dossier : les clips bruts, les versions resserrées (recommandées pour le montage), et un court README listant chaque clip, ce qu'il montre, et tout ce que l'utilisateur doit savoir (données créées et supprimées, données personnelles visibles, découpe de la caméra de l'émulateur en haut). Rapportez les durées des clips et ce qui n'a pas pu être enregistré et pourquoi.

Skills associés