Joindre des captures existantes au bloc avant/après d’une PR

À qui ça s’adresse

Cette skill convient à qui a déjà des captures d’écran ou des enregistrements et veut les joindre à une GitHub Pull Request en bloc avant/après. C’est une skill d’agent : elle ne traite que les médias existants et n’ira pas capturer une page pour vous. Elle convient aussi à qui a déjà agent-browser en local, et dont le GitHub CLI est en 2.99+ pour pouvoir utiliser gh --attach.

Elle ne convient pas à qui n’a pas encore de fichiers média et compte qu’elle ouvre une URL et enregistre l’écran. La source dit qu’elle n’enveloppe pas agent-browser, n’aspire pas d’URL, ne gère pas l’authentification Vercel, ne transcode pas la vidéo et n’héberge pas les médias. Si vous ne pouvez pas encore exécuter npx, ou si la version du CLI est insuffisante, arrêtez-vous à la lecture.

Le dépôt officiel est https://github.com/vercel-labs/before-and-after Suivez les commandes déjà écrites sur cette page.

Premier essai en 3 minutes

Suivez uniquement le chemin d’installation de skill écrit par l’officiel.

Prérequis : cette machine peut exécuter npx, agent-browser est installé, GitHub CLI est en 2.99 ou plus. Confirmez d’abord : la commande ci-dessous installera la skill dans l’agent actuel. Si vous ne voulez pas encore modifier le répertoire de skills de l’agent, ne l’exécutez pas. À cette étape, n’attachez rien à une vraie PR et n’appelez pas gh --attach.

Lieu d’installation : après avoir confirmé ces effets de bord, exécutez à la racine du projet :

npx skills add vercel-labs/before-and-after#main

Vérification à faible risque : une fois installée, demandez à l’agent seulement de reformuler ce qu’il fera — joindre captures et enregistrements existants au bloc avant/après de la PR, et ne remplacer de façon idempotente qu’un marqueur <!-- before-and-after:start/end -->, le reste de la description restant intact. Ne le laissez pas modifier la PR. Ne le laissez pas ouvrir une URL ni convertir une vidéo.

Signal de succès : l’installation de la skill se termine, et l’agent peut dire qu’il faut des médias existants, qu’il faut gh --attach, et qu’il n’aspirera ni n’hébergera de fichiers. S’il commence à enregistrer l’écran ou invente d’autres commandes d’installation, arrêtez.

Cas d’usage

Cas 1 : ajouter un avant/après à une PR qui a déjà des médias. La commande d’installation officielle est npx skills add vercel-labs/before-and-after#main. Une fois installée, préparez captures et enregistrements existants dans le commentaire ou la description, puis laissez l’agent les joindre. gh --attach modifiera la PR distante ; avant d’exécuter, confirmez qu’il s’agit d’une PR de test discutable en public et que les chemins média existent vraiment.

Cas 2 : en relançant, ne mettre à jour que le bloc marqueur. La source dit qu’elle remplace de façon idempotente un bloc <!-- before-and-after:start/end --> et laisse le reste de la description de PR intact. Cela convient à qui a déjà joint une fois et veut seulement changer la zone de comparaison. Vérifiez d’abord en lecture seule si la description a déjà ce marqueur ; s’il n’y en a pas, la source n’écrit pas comment une description entière serait créée — ne supposez pas.

Limites d’usage

Les dépendances sont strictes : il faut agent-browser et GitHub CLI 2.99+ (pour gh --attach). S’il manque l’un des deux, n’attachez pas de force. Elle ne fait explicitement pas : envelopper agent-browser, aspirer des URL, gérer l’authentification Vercel, convertir la vidéo, héberger les médias.

Une seule commande d’installation est écrite dans la source, avec #main : npx skills add vercel-labs/before-and-after#main. Ne la changez pas en étiquette ou installateur absent du texte. La page officielle est https://github.com/vercel-labs/before-and-after Si un agent propose une commande sans #main, c’est cette page qui fait foi.