Vorhandene Screenshots an einen Vorher-nachher-Block im PR anhängen

Für wen

Diese Skill eignet sich für alle, die bereits Screenshots oder Bildschirmaufnahmen haben und sie in einem GitHub Pull Request als Vorher-nachher-Block anhängen wollen. Es ist eine Agent-Skill: Sie verarbeitet nur vorhandene Medien und holt keine Seite für Sie. Sie passt auch zu Leuten, die agent-browser lokal haben und deren GitHub CLI 2.99+ ist, damit gh --attach nutzbar ist.

Sie eignet sich nicht für Leute ohne Mediendateien, die erwarten, dass sie eine URL öffnet und den Bildschirm aufzeichnet. Die Quelle sagt: Sie wrappt agent-browser nicht, greift keine URLs ab, verwaltet keine Vercel-Authentifizierung, transkodiert kein Video und hostet keine Medien. Wenn Sie npx noch nicht ausführen können oder die CLI-Version zu alt ist, bleiben Sie beim Lesen der Anleitung.

Das offizielle Repository steht unter https://github.com/vercel-labs/before-and-after Folgen Sie den dort bereits geschriebenen Befehlen.

Erster Versuch in 3 Minuten

Gehen Sie nur den einen offiziell beschriebenen Skill-Installationsweg.

Voraussetzungen: Dieser Rechner kann npx ausführen, agent-browser ist installiert, GitHub CLI ist 2.99 oder neuer. Bestätigen Sie zuerst: Der Befehl unten installiert die Skill in den aktuellen Agenten. Wenn Sie das Skill-Verzeichnis des Agenten noch nicht ändern wollen, führen Sie ihn nicht aus. In diesem Schritt hängen Sie nichts an einen echten PR und rufen gh --attach nicht auf.

Installationsort: Nachdem Sie diese Nebenwirkungen bestätigt haben, führen Sie im Projektstamm aus:

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

Prüfung mit geringem Risiko: Bitten Sie den Agenten nach der Installation nur, zu wiederholen, was er tun wird — vorhandene Screenshots und Aufnahmen an einen Vorher-nachher-Block des PR anhängen und nur eine <!-- before-and-after:start/end -->-Markierung idempotent ersetzen, den Rest der Beschreibung unberührt lassen. Lassen Sie ihn den PR nicht ändern. Lassen Sie ihn keine URL öffnen und kein Video konvertieren.

Erfolgssignal: Die Skill-Installation ist fertig, und der Agent kann sagen, dass vorhandene Medien nötig sind, gh --attach nötig ist, und dass er Dateien weder abruft noch hostet. Wenn er mit einer Bildschirmaufnahme beginnt oder andere Installationsbefehle erfindet, halten Sie an.

Anwendungsfälle

Fall 1: Einem PR, der schon Medien hat, einen Vorher-nachher-Vergleich hinzufügen. Der offizielle Installationsbefehl ist npx skills add vercel-labs/before-and-after#main. Nach der Installation bereiten Sie vorhandene Screenshots und Aufnahmen im Kommentar oder in der Beschreibung vor und lassen den Agenten anhängen. gh --attach ändert den Remote-PR; bestätigen Sie vorher, dass dies ein öffentlich besprechbarer Test-PR ist und die Medienpfade wirklich existieren.

Fall 2: Bei Wiederholungen nur den Markierungsblock aktualisieren. Die Quelle sagt, sie ersetzt idempotent einen <!-- before-and-after:start/end -->-Block und lässt den Rest der PR-Beschreibung unberührt. Das passt zu Leuten, die schon einmal angehängt haben und nur den Vergleichsbereich tauschen wollen. Prüfen Sie zuerst nur lesend, ob die Beschreibung die Markierung schon hat; fehlt sie, schreibt die Quelle nicht, wie eine ganz neue Beschreibung erzeugt würde — nehmen Sie das nicht an.

Grenzen

Die Abhängigkeiten sind hart: Sie brauchen agent-browser und GitHub CLI 2.99+ (für gh --attach). Fehlt eine Bedingung, erzwingen Sie kein Anhängen. Sie tut ausdrücklich nicht: agent-browser wrappen, URLs abrufen, Vercel-Authentifizierung verwalten, Video konvertieren, Medien hosten.

Nur ein Installationsbefehl steht in der Quelle, und er trägt #main: npx skills add vercel-labs/before-and-after#main. Ändern Sie ihn nicht in ein nie genanntes Tag oder einen nie genannten Installer. Die offizielle Seite ist https://github.com/vercel-labs/before-and-after Fehlt in einem vorgeschlagenen Befehl #main, gilt diese Seite.