Des captures avant/après dans chaque pull request
oct. 2026 Un changement visuel se relit mal dans du code. Des captures avant/après, limitées à ce qui change et jointes à la demande de relecture, font gagner du temps à tout le monde.Le problème
Beaucoup de modifications d'interface sont purement visuelles : un libellé raccourci, un espacement corrigé, un élément déplacé. Pourtant, la personne qui relit ne voit que du code. Pour juger du résultat, elle doit récupérer la version modifiée, lancer le projet, retrouver le bon écran et comparer de mémoire avec ce qui est en ligne. En pratique, c'est rarement fait : la modification attend, ou elle est validée sans vérification.
Montrer plutôt que décrire
J'ai écrit un skill pour l'IA qui produit les captures à ma place :
- il capture l'écran concerné avec ma modification (l'après)
- il refait les mêmes captures avec la version en ligne (l'avant)
- il ne garde que les zones qui changent, recadrées avec un peu de contexte
- il ajoute un tableau avant/après à la pull request
La relecture se résume alors à un tableau :
| Avant | Après |
|---|---|
 |  |
Ce qui rend les captures fiables
- Ne garder que ce qui change : une capture pleine page de 6 000 pixels de haut n'est jamais lue.
- Vérifier que deux captures du même état sont identiques. Sinon, une animation, une police ou une donnée aléatoire fausse la comparaison.
- Prendre l'avant dans la version en ligne, rechargée pour l'occasion, jamais de mémoire.
- Tout garder au même endroit : les images sont jointes à la pull request, pas dans un outil externe.
Ce que ça change
Le premier gain est pour la personne qui relit : elle voit le résultat sans rien installer, et peut valider ou commenter tout de suite.
Le second gain est pour celle qui écrit la modification. Les captures, le recadrage et la mise en page du tableau, qui prenaient du temps à chaque fois, sont faits automatiquement. Et comme les captures existent avant même la pull request, je repère souvent mes propres erreurs en premier : un libellé qui passe sur deux lignes, un élément qui saute.
Cet outillage sert aussi à produire des planches comparatives : le même composant sur une vingtaine d'écrans, pour repérer ceux qui s'écartent de la règle. L'outil reste taillé pour notre produit, mais l'idée vaut pour n'importe quelle interface.
Ce skill s'inspire très largement de before-and-after, le skill de James Clements chez Vercel Labs, qui capture l'avant et l'après d'une page web.