Communitygithub.com

gcrft123/tailr

Annotez et itérez vos projets en direct avec votre agent.

Qu'est-ce que tailr ?

Tailr est un plugin MCP qui permet de boucler rapidement la revue visuelle d'une application en cours de développement. Le réviseur peut annoter directement l'interface dans le navigateur (cliquer sur un élément, écrire un commentaire), puis envoyer toutes les marques en un seul lot à l'agent. L'agent applique les modifications et signale l'avancement de chaque marque. Le plugin expose des outils MCP (`tailr_wait`, `tailr_pull`, `tailr_progress`, `tailr_done`, `tailr_fail`) qui remplacent les commandes CLI et évitent de devoir installer Tailr dans le projet. Le protocole est simple : 1) lancer une session Tailr qui proxyie le serveur de développement, 2) attendre qu'un lot soit prêt (`wait`), 3) récupérer les marques (`pull`), 4) appliquer les changements en signalant chaque marque (`progress`), 5) terminer par `done` ou `fail`. Une règle cruciale est de ne jamais demander au réviseur de dire que le lot est arrivé : la commande `wait` bloque jusqu'à réception. Ce plugin fonctionne avec tout agent supportant MCP (Claude Code, Cursor, VS Code Agents, etc.).

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add gcrft123/tailr

Demander à votre IA préférée

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

Documentation

Tailr — la boucle de révision

Tailr permet à la personne avec qui vous travaillez d'annoter son serveur de développement en cours d'exécution dans le navigateur — cliquer sur un élément, dire ce qui ne va pas — et de vous remettre toutes les marques en un seul lot. Vous appliquez le lot et signalez chaque marque au fur et à mesure.

Les règles ci-dessous constituent l'ensemble du protocole. Ce sont les mêmes règles que tailr init écrit dans le AGENTS.md / CLAUDE.md du projet ; ce plugin les porte à la place, de sorte que rien dans le dépôt de l'utilisateur n'a besoin d'être modifié.

Tailr — annotation visuelle par le réviseur

Le réviseur annote l'application en cours dans le navigateur et vous remet les modifications en un seul lot. Une session est active lorsque .tailr/session.json existe ; si ce n'est pas le cas, démarrez-en une en tant que processus d'arrière-plan de longue durée — elle doit rester active, donc ne bloquez pas votre tour en l'attendant :

npx tailr --target http://localhost:<port du serveur de développement>

Elle affiche une URL de révision (généralement http://localhost:4100). Dites au réviseur d'utiliser cette URL, pas le port d'origine. Tailr agit comme proxy de l'application et injecte sa superposition ; la source n'est pas modifiée.

La boucle est wait → pull → progress par marque → done ou fail.

CommandeOutil MCP
npx tailr statustailr_statusun lot est-il en attente ? code 0 oui · 3 session active, rien en attente · 2 pas de session
npx tailr waittailr_waitbloquer jusqu'à ce que Envoyer soit pressé ; code 0 un lot est en attente · 3 temporisation dépassée, relancez-la · 2 session terminée
npx tailr pulltailr_pullprendre le lot en leasing, affiché en JSON
npx tailr progress <ref>tailr_progresssignaler une marque comme appliquée
npx tailr donetailr_donel'exécution est terminée
npx tailr fail "raison"tailr_failelle est retournée incomplète

Chaque marque porte un ref ("01"), un type, la route sur laquelle elle a été faite, une adresse source address (au mieux), un sélecteur CSS selector, le texte de l'élément et le comment du réviseur.

  • comment — modifier cet élément comme décrit
  • remove — supprimer cet élément
  • text — porte before/after ; remplacer le texte par after
  • point — porte les coordonnées x/y de la page au lieu d'un élément. Le réviseur a marqué un endroit, pas un objet : il peut vouloir quelque chose de nouveau à cet endroit, ou simplement noter l'emplacement. Son commentaire le précise.

Règles importantes

  • Exécutez wait comme un processus d'arrière-plan de longue durée et traitez sa sortie comme la notification. Ne demandez jamais au réviseur de vous dire qu'un lot est arrivé, et ne faites jamais de scrutation. Relancez-le après chaque exécution que vous fermez.
  • Signalez chaque marque avec progress au fur et à mesure que vous l'appliquez, pas toutes à la fin. Le réviseur les voit se vider à l'écran ; les regrouper donne l'impression que rien ne se passe.
  • Terminez toujours l'exécution par done ou fail. Jusque-là, le réviseur ne peut pas envoyer un autre lot. Si vous rencontrez quelque chose que vous ne pouvez pas faire, fail avec ce qui a réellement mal tourné — Tailr n'invente pas d'explication, il vous renvoie la balle.
  • Lorsque l'adresse source et le sélecteur ne sont pas d'accord, faites confiance à l'adresse source.
  • Une marque avec "orphaned": true a perdu son élément avant d'être envoyée. Ne devinez pas ce qui était voulu — soulevez-le avec le réviseur.
  • Si une marque est ambiguë, demandez plutôt que de choisir une interprétation.
  • Exécutez ces commandes depuis le répertoire du projet ; c'est ainsi que Tailr trouve la session.

Exécuter les commandes depuis ce plugin

Ce plugin enregistre le serveur MCP de Tailr, de sorte que tailr_status, tailr_wait, tailr_pull, tailr_progress, tailr_done et tailr_fail vous sont directement disponibles. Préférez-les à la CLI : ils sont toujours présents, alors que le raccourci npx tailr ne se résout que dans un projet qui a installé Tailr.

Lorsque vous utilisez la CLI, utilisez le nom complet du package pour qu'il fonctionne dans un projet qui n'a rien installé :

npx -y @gcrft123/tailr <commande>

Démarrer une session est la seule étape sans outil MCP, car la session est le serveur auquel ces outils parlent. Démarrez-la comme un processus d'arrière-plan de longue durée — elle doit rester active, donc ne bloquez pas votre tour en l'attendant :

npx -y @gcrft123/tailr --target http://localhost:<port du serveur de développement>

Si le projet a Tailr comme dépendance, le simple npx tailr est équivalent et plus court.

Skills associés