Communitygithub.com

scrawl

Lire et analyser les captures d'écran Scrawl, où quelqu'un a enregistré son écran en parlant, cliquant et dessinant des marques rouges. Utilisez-le chaque fois qu'un message contient une capture Scrawl, que l'utilisateur demande de regarder sa capture ou que le CLI scrawl est nécessaire pour zoomer, extraire des images ou exporter une vidéo.

Qu'est-ce que scrawl ?

Scrawl est un outil de capture d'écran enrichi qui enregistre l'écran, la voix, les clics et les annotations à l'encre rouge d'une personne, le tout packagé dans un dossier `.scrawl`. Ce skill permet à un agent IA de lire et d'analyser ces captures en profondeur, en interprétant les keyframes, les transcriptions vocales, les marques, et les actions de l'utilisateur. Il est particulièrement utile lorsque l'utilisateur décrit un problème complexe ou visuel : au lieu de demander une explication verbale, l'agent peut directement consulter la capture et y répondre en se référant aux moments précis (ex : "#3 (0:10)"). Le skill supporte la manipulation des bundles via le CLI `scrawl` (zoom sur un instant, extraction d'images, envoi vers une session OpenCode, export vidéo) et recommande de toujours commencer par inspecter la `contact-sheet.png` et les `frames/` avant d'utiliser les autres commandes. Il fonctionne uniquement sur macOS avec Scrawl installé, mais peut aussi lire les fichiers du bundle directement sur d'autres plateformes.

Compatible avec~Claude Code~Codex CLI✓Cursor✓OpenCode
npx skills add https://github.com/huaxel/dotfiles/tree/main/skills/scrawl

Demander à votre IA préférée

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

Documentation

Captures Scrawl

Scrawl enregistre l'écran, la voix, les clics et l'encre rouge d'une personne, puis regroupe le tout dans un dossier .scrawl (un bundle). L'utilisateur vous envoie ce bundle pour vous montrer un problème au lieu de le décrire, donc la capture est le rapport de bug. Lisez-la attentivement avant de répondre, et ne lui demandez pas d'expliquer à nouveau ce que la capture montre déjà. Si quelque chose n'est pas clair, regardez de plus près avec scrawl zoom d'abord.

À quoi ressemble un collage

[scrawl 0:33 · OpenCode “Settings” · /Users/me/Library/Application Support/scrawl/captures/scrawl-1792432139176.scrawl]
Ouvrez contact-sheet.png et frames/ dans ce dossier avant de modifier quoi que ce soit : les marques et les mots n'ont de sens que sur les images, qui peuvent montrer plus que le texte.
Recadré à : l'activité dans OpenCode (images complètes dans frames-full/)
- #1 (0:04) [clic sur “Nouvel onglet”] “Commande T crée une nouvelle session, mais ici cela devrait créer un onglet.”
- #2 (0:07) “Non, ce n'est pas le cas.”
- #3 (0:10) ⚑ “Cela dit que Commande Maj B crée un nouvel onglet.”
- #4 (0:18) cliqué (x 0.51, y 0.93)
  • La première ligne indique la durée, l'application et la fenêtre enregistrées, ainsi que le chemin du bundle.
  • La ligne suivante vous demande d'ouvrir les images en premier. Faites-le : le texte n'est que ce qui a été dit et fait, et un problème peut apparaître dans une image sans être marqué ou mentionné.
  • Chaque ligne #N (M:SS) est une image-clé : ce qu'ils ont fait à ce moment entre crochets, puis ce qu'ils ont dit pendant que c'était à l'écran. Une ligne sans citation contient uniquement l'action.
  • ⚑ signifie qu'ils ont délibérément signalé ce moment. ⟨Nom⟩ signifie que l'application a signalé un nouvel écran. Les lignes commençant par · sont des événements ou des valeurs enregistrés par l'application.
  • Lignes facultatives en haut : Pour session: (où Scrawl l'a envoyé), Écran: avec le contexte de l'application, Note:, et Recadré à:.
  • Les coordonnées sont des fractions de la zone capturée, à partir du coin supérieur gauche (x 0.51 est juste à droite du centre).

Lorsque vous répondez, référez-vous aux moments de la même manière, comme dans "#3 (0:10)", afin que la personne puisse les retrouver sur la feuille de contact.

Lire un bundle

  1. Regardez d'abord contact-sheet.png dans le bundle (elle est souvent déjà jointe). Elle montre chaque image-clé dans l'ordre chronologique, de gauche à droite et de haut en bas, chacune avec son numéro N dans un petit cercle blanc dans un coin supérieur (le #N dans summary.md).
  2. Lisez ensuite les lignes de transcription à côté. La reconnaissance vocale comprend mal les noms et les termes de code, alors faites confiance à l'écran lorsque les deux ne sont pas d'accord.
  3. Ouvrez frames/frame-NN.png pour toute image-clé dont vous avez besoin en taille réelle (frame-03.png est #3). Lorsque le résumé dit Recadré à:, les écrans non recadrés se trouvent dans frames-full/.

Ce que signifient les dessins :

  • Les traits rouges, les cercles, les soulignements et les flèches sont les marques de la personne, et ils pointent vers le problème. Les marques dessinées sur le même écran apparaissent toutes sur une seule image-clé. Lorsqu'il y en a plusieurs, le texte les numérote dans l'ordre du dessin (✎① 0:06 …, ✎② 0:09 …) ; l'image ne montre que l'encre, utilisez donc scrawl zoom --mark pour voir quelle encre est laquelle.
  • Une ondulation autour du curseur indique un clic ou un tap, et une traînée de doigt indique un balayage.
  • Une traînée rouge lumineuse qui s'estompe est le pointeur laser, utilisé pour pointer sans laisser de marque.

Autres fichiers : scrawl.json est le manifeste complet (images-clés, marks avec forme et boîte, events, transcript.words avec les temps, context de l'application, et autocrop). recording.mp4 ou recording.mov et audio.wav sont les médias sources. Un fichier .media-pending signifie que la vidéo est encore en cours de copie depuis un autre Mac.

Le CLI scrawl

scrawl est le binaire de l'application Scrawl. Si command -v scrawl ne trouve rien, utilisez /Applications/Scrawl.app/Contents/MacOS/scrawl (ou le même chemin sous ~/Applications), et dites à la personne qu'elle peut le mettre dans PATH via Install dans les Paramètres de Scrawl › Agents. Il ne fonctionne que sur le Mac avec Scrawl installé. Ailleurs, lisez directement contact-sheet.png, frames/ et scrawl.json. Chaque commande prend un chemin de bundle, et la plupart utilisent par défaut latest, la capture la plus récente. Mettez le chemin entre guillemets, car il contient généralement Application Support.

Regarder de plus près un instant

Utilisez zoom lorsque le problème est un mouvement (une animation, un saut, un scintillement) ou se produit entre les images-clés, ou lorsque vous ne pouvez pas dire vers quoi pointe une marque :

scrawl zoom <bundle> --at 0:21                 # un temps, M:SS ou secondes
scrawl zoom <bundle> --at "la largeur change"  # ou une phrase qu'ils ont dite
scrawl zoom <bundle> --at 0:21 --span 1 --frames 16 --full
scrawl zoom <bundle> --mark 2                  # la marque indiquée par ✎② dans le texte
scrawl zoom <bundle> --mark 1 --frame 4        # ✎① de l'image-clé #4, quand plusieurs ont un ✎①

Cela imprime le chemin d'une feuille PNG d'images autour de ce moment, le temps de chaque cellule, et ce qui a été dit. Ouvrez le PNG et regardez-le avant d'agir sur les retours. --span est la durée couverte en secondes (par défaut 2, un quart avant le moment), --frames le nombre de cellules (par défaut 12), et --full montre tout l'écran au lieu du recadrage. Les cellules sont numérotées de #1 dans la feuille, donc ces numéros ne sont pas des numéros d'image-clé.

--mark prend le numéro d'une marque dans le texte ou son id (m2) et centre la feuille sur le moment où elle a été dessinée, avec seulement l'encre de cette marque, dessinée dans son intégralité depuis le moment où elle commence. scrawl inspect <bundle> --marks liste chaque marque (#2 ✎② 0:09 marqué (2 traits) · m2 : image-clé, numéro, temps, forme, support sur lequel elle a été dessinée, id), et --marks --json donne la même chose en JSON.

Autres commandes

scrawl inspect <bundle>               # summary.md, le texte ci-dessus
scrawl inspect <bundle> --json        # scrawl.json
scrawl inspect <bundle> --marks       # les marques, numérotées comme dans le texte [--json]
scrawl frames <bundle> --from 0:04 --to 0:06 [--fps 4]   # PNG simples d'une plage ; imprime leurs chemins
scrawl send <bundle> --session ses_…  # met la capture dans une session OpenCode
scrawl send <bundle> --clipboard      # copie le texte du résumé dans le presse-papiers
scrawl export <bundle> [--out demo.mp4] [--zoom] [--crop auto|full|x,y,w,h] [--size 1920]
  • zoom et frames écrivent dans <bundle>/zoom/. Laissez le reste du bundle tel quel, car Scrawl gère ces fichiers et les nettoie.
  • send sans --session va à la session à laquelle la capture était destinée (la ligne Pour session:), et sinon à la session la plus récemment active. Avec une destination enregistrée, il refuse un --session différent sauf si vous passez --reroute, vérifiez donc auprès de la personne avant de rediriger.
  • export écrit un fichier .mp4 avec l'encre et les clics incrustés et l'audio synchronisé (par défaut ~/Movies/Scrawl/<bundle>.mp4). --zoom effectue un zoom progressif vers l'activité. --no-ink, --no-clicks, --hevc et --fps sont également disponibles.
  • La vidéo et l'audio vont à la Corbeille 7 jours après une capture, sauf si la personne a modifié cela dans les Paramètres. Après cela, zoom, frames et export ne peuvent pas lire la vidéo, mais frames/, la feuille de contact et scrawl.json restent.
  • scrawl <commande> --help liste tous les drapeaux, et scrawl skill imprime ce guide tel que la version installée le connaît.

Skills associés