Communitygithub.com

gcrft123/tailr

Markieren Sie Ihre Projekte live und iterieren Sie mit Ihrem Agenten.

Was ist tailr?

Tailr ist ein Werkzeug, das den visuellen Rückmeldekreislauf zwischen einer Person, die eine Web-App überprüft, und einem KI-Agenten, der die Änderungen umsetzt, optimiert. Es ermöglicht dem Prüfer, Elemente auf dem laufenden Entwicklungsserver zu markieren, Kommentare hinzuzufügen und alle Markierungen als einen Batch an den Agenten zu senden. Der Agent wendet die Änderungen einzeln an und meldet den Fortschritt – der Prüfer sieht live, welche Markierungen bereits erledigt sind. Die Kommunikation läuft über ein klares Protokoll mit Befehlen wie `wait`, `pull`, `progress`, `done` und `fail`, die entweder über die CLI oder via MCP-Tools aufgerufen werden. Dieses Plugin registriert den MCP-Server, sodass die Tools direkt verfügbar sind und keine manuelle Installation im Projekt erforderlich ist. Tailr ist besonders nützlich für iterative Frontend-Entwicklung mit KI-Assistenten wie Claude Code, Cursor oder Codex, da es den Kontextwechsel minimiert und eine klare, nachvollziehbare Rückmeldeschleife schafft.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add gcrft123/tailr

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Tailr – der Rückmeldekreislauf

Tailr ermöglicht es der Person, mit der Sie zusammenarbeiten, ihren laufenden Entwicklungsserver im Browser zu markieren – ein Element anklicken, sagen, was falsch ist – und Ihnen alle Markierungen auf einmal als Batch zu übergeben. Sie wenden den Batch an und melden jede Markierung, sobald sie erledigt ist.

Die folgenden Regeln bilden das gesamte Protokoll. Es sind dieselben Regeln, die tailr init in die AGENTS.md / CLAUDE.md eines Projekts schreibt; dieses Plugin führt sie stattdessen mit, sodass nichts im Repository des Benutzers bearbeitet werden muss.

Tailr – visuelle Markierungen vom Prüfer

Der Prüfer markiert die laufende App im Browser und übergibt Ihnen die Änderungen als einen Batch. Eine Sitzung ist aktiv, wenn .tailr/session.json existiert; falls nicht, starten Sie eine als langlebigen Hintergrundprozess – sie muss aktiv bleiben, blockieren Sie also nicht Ihren Zug, während Sie darauf warten:

npx tailr --target http://localhost:<Port des Entwicklungsservers>

Es wird eine Prüf-URL ausgegeben (normalerweise http://localhost:4100). Sagen Sie dem Prüfer, diese URL zu verwenden, nicht den ursprünglichen Port. Tailr proxyt die App und injiziert sein Overlay; die Quelle wird nicht verändert.

Der Kreislauf ist wait → pull → progress pro Markierung → done oder fail.

BefehlMCP-Tool
npx tailr statustailr_statuswartet ein Batch? Exit 0 ja · 3 Sitzung aktiv, nichts wartet · 2 keine Sitzung
npx tailr waittailr_waitblockieren, bis „Senden“ gedrückt wird; Exit 0 ein Batch wartet · 3 Zeitüberschreitung, starten Sie es erneut · 2 Sitzung beendet
npx tailr pulltailr_pullBatch leasen, als JSON ausgegeben
npx tailr progress <ref>tailr_progresseine Markierung als erledigt melden
npx tailr donetailr_doneder Durchlauf ist abgeschlossen
npx tailr fail "Grund"tailr_failes wurde unvollständig zurückgegeben

Jede Markierung trägt eine ref („01“), einen type, die route, auf der sie erstellt wurde, eine bestmögliche Quell-address, einen CSS-selector, den Text des Elements und den comment des Prüfers.

  • comment – Element wie beschrieben ändern
  • remove – Element löschen
  • text – trägt before/after; Text in after ändern
  • point – trägt Seiten-x/y anstelle eines Elements. Der Prüfer hat eine Stelle markiert, kein Objekt: Möglicherweise möchte er dort etwas Neues, oder er möchte nur die Stelle notieren. Sein Kommentar sagt, was gemeint ist.

Wichtige Regeln

  • Führen Sie wait als langlebigen Hintergrundprozess aus und behandeln Sie seinen Exit als Benachrichtigung. Bitten Sie den Prüfer niemals, Ihnen mitzuteilen, dass ein Batch eingetroffen ist, und fragen Sie niemals ab. Starten Sie ihn nach jedem abgeschlossenen Durchlauf erneut.
  • Melden Sie jede Markierung mit progress, sobald Sie sie umsetzen, nicht alle auf einmal am Ende. Der Prüfer sieht, wie sie auf dem Bildschirm verschwinden; durch Bündelung sieht es so aus, als ob nichts passiert.
  • Schließen Sie den Durchlauf immer mit done oder fail ab. Solange Sie das nicht tun, kann der Prüfer keinen weiteren Batch senden. Wenn Sie auf etwas stoßen, das Sie nicht umsetzen können, melden Sie fail mit dem, was tatsächlich schiefgelaufen ist – Tailr erfindet keine Erklärung, es verweist den Prüfer zurück an Sie.
  • Wenn die Quelladresse und der Selektoren nicht übereinstimmen, vertrauen Sie der Quelladresse.
  • Eine Markierung mit "orphaned": true hat ihr Element verloren, bevor sie gesendet wurde. Raten Sie nicht, was gemeint war – sprechen Sie es mit dem Prüfer an.
  • Wenn eine Markierung mehrdeutig ist, fragen Sie nach, anstatt eine Interpretation zu wählen.
  • Führen Sie diese Befehle aus dem Projektverzeichnis aus; so findet Tailr die Sitzung.

Befehle über dieses Plugin ausführen

Dieses Plugin registriert Tailrs MCP-Server, sodass tailr_status, tailr_wait, tailr_pull, tailr_progress, tailr_done und tailr_fail Ihnen direkt zur Verfügung stehen. Bevorzugen Sie sie gegenüber der CLI: Sie sind immer vorhanden, während die npx tailr-Kurzform nur in einem Projekt funktioniert, das Tailr installiert hat.

Wenn Sie doch zur CLI greifen, verwenden Sie den vollständigen Paketnamen, damit es in einem Projekt funktioniert, das nichts installiert hat:

npx -y @gcrft123/tailr <Befehl>

Das Starten einer Sitzung ist der einzige Schritt ohne MCP-Tool, da die Sitzung der Server ist, mit dem diese Tools sprechen. Starten Sie sie als langlebigen Hintergrundprozess – sie muss aktiv bleiben, blockieren Sie also nicht Ihren Zug, während Sie darauf warten:

npx -y @gcrft123/tailr --target http://localhost:<Port des Entwicklungsservers>

Wenn das Projekt Tailr als Abhängigkeit hat, ist das einfache npx tailr gleichwertig und kürzer.

Verwandte Skills