vvedantb/eva

eva Feature-Aufnahme

Ein Screenshot einer ausgelieferten Funktion + ein Tweet. Kein Remotion, keine Musik, kein Schnitt, keine in das Bild eingebrannten Untertitel – die Produkt-UI ist das Asset.

Zwei Dateien landen im screenshots/-Verzeichnis im Repository-Stammverzeichnis (bereits gitignoriert):

Datei	Beschreibung
<YYYY-MM-DD>-<slug>.png	Rohaufnahme mit 2560×1440 – behalten, sie ist die Quelle ohne erneute Aufnahme
<YYYY-MM-DD>-<slug>-framed.png	Diese posten – 3200×1800, mit Branding-Rahmen

Die gerahmte Version platziert die Rohaufnahme auf Evas Markenverlauf mit abgerundeten Ecken, einem Eva-Symbol und dem Wortmarken-"Eva" darüber. Dadurch wirkt die Aufnahme wie eine Produktankündigung und nicht wie ein Fehlerbericht-Screenshot.

Nicht verhandelbare Vorgaben

1. 1280-Layout, aufgenommen in HD bei 2560×1440 (16:9). Die Skripte steuern einen echten Chrome mit deviceScaleFactor 2 und erfassen mit scale:"device", sodass die App in ihrer nativen Breite von 1280 Pixeln layoutet (lesbare Elementgrößen), das PNG aber die doppelte Pixeldichte aufweist – scharf auf einem Retina-Timeline. 16:9 ist das, was X im Timeline ohne Zuschneiden anzeigt. Die gerahmte Ausgabe hat 3200×1800 – ebenfalls 16:9, daher kostet der Rahmen nichts im Timeline. agent-browser kann das nicht: Dessen screenshot erfasst mit CSS-Pixeln und ignoriert den DPR, daher gibt er immer 1280×720 aus. Verwenden Sie die HD-Skripte.

2. Nie als ganze Seite. Eine Ganzseitenaufnahme einer dichten App wird zu einem hohen Streifen, der im Timeline in Miniaturansicht dargestellt wird. Ein Viewport, eine Idee.

3. Entwicklerüberlagerungen vor der Aufnahme ausblenden. react-scan und agentation werden beide in die Seite gerendert. scripts/hd-shot.mjs übernimmt das – verwenden Sie die Skripte anstelle einer manuellen Kette.

4. Das tatsächliche Design der App verwenden. Was auch immer der Benutzer ausführt (set media dark für dunkel). Gestalten Sie die App für das Foto nicht neu.

5. Die Funktion muss das visuelle Motiv sein. Ein 200-Pixel-Panel in der Ecke einer überfüllten Seite ist nicht geeignet. Navigieren Sie zu einer Ansicht, in der es dominiert, oder öffnen Sie die Oberfläche, die es enthält (Modal, Blatt, Detailbereich), damit es in der Timeline-Größe lesbar ist.

   Die Seitenleiste wird automatisch eingeklappt. shot.sh (und eine einfache hd-shot.mjs --path-Aufnahme) klappt die Navigationsleiste vor der Aufnahme ein – sie verbraucht ~250 Pixel eines 1280-Pixel-Bildrahmens und nichts darin ist jemals die Funktion. Übergeben Sie --no-collapse nur, wenn die Seitenleiste selbst DIE Funktion ist. In einem --recipe rufen Sie ctx.collapseSidebar(page) selbst auf (Rezepte verwalten ihre eigene Vorbereitung).

   Gleiche Regel für jede sekundäre Listenspalte (Bewertungsliste, Einstellungsnavigation), wenn die Oberfläche eine Möglichkeit bietet, sie auszublenden. Überprüfen Sie im rohen PNG: Wenn eine Spalte mit nicht zusammenhängenden Navigationselementen erhalten bleibt, nehmen Sie es neu auf.

6. Rahmen setzen, aber nicht kommentieren. Führen Sie immer Schritt 6 aus – der Farbverlauf + das Wortmarke sind der Hausstil. Fügen Sie niemals Pfeile, rote Kreise, Hinweistexte oder einen gefälschten Browser-Chrome hinzu, es sei denn, Sie werden dazu aufgefordert.

7. Nie absenden. Nur tippen. Füllen Sie Eingabefelder, öffnen Sie Auswahlen, bereiten Sie den Zustand vor – dann aufnehmen. Kein Enter in einem Editor, kein Senden-Pfeil, Erstellen, Speichern, Ausführen oder Starten, und starten Sie niemals eine echte Sitzung oder einen Agentenlauf, nicht einmal für eine bessere Aufnahme. Das Absenden verändert den echten Arbeitsbereich des Benutzers und verbraucht echte Rechenleistung; der vorbereitete Zustand ist das, was Sie fotografieren. Enter ist nur dort erlaubt, wo es nur die Eingabe selbst bestätigt und nichts anderes (Akzeptieren einer @-Erwähnung aus einer geöffneten Auswahl) – wenn Sie nicht sicher sein können, dass es nur das tut, klicken Sie stattdessen auf die Auswahlzeile.

8. Wenn die Daten hässlich sind, korrigieren Sie die Daten – nehmen Sie nicht um sie herum neu auf. Standard 7 hindert Sie daran, die App zu steuern, um einen Zustand zu erzeugen; es hindert Sie nicht daran, den Zustand zu schreiben. Echte Entwicklerdaten sind der übliche Grund, warum eine Aufnahme fehlschlägt: Fehlerwände ("Failed to stop sandbox" ×8), Untitled session-Zeilen, eine zur Hälfte migrierte Runde, ein Repository, in dem die Funktion drei benötigt. Das Bearbeiten der eigenen Entwicklerdaten der App für die Aufnahme ist besser, als nach einer Sitzung zu suchen, die zufällig gut aussieht, und besser, als die App neu zu gestalten (Standard 4 gilt weiterhin – ändern Sie die Daten, niemals das CSS).

   Schreiben Sie direkt in die Entwicklungsumgebung: eine einmalige internal/screenshotStaging.ts-Mutation, die mit npx convex run ausgeführt wird, oder die Convex-Oberfläche. Geben Sie Sitzungen echte, lesbare Titel, löschen Sie die Fehler-/Systemnachrichten im Rahmen, fügen Sie die zweite und dritte Zeile ein, die die Funktion benötigt.

   Regeln dafür:

   • Nur Entwicklungsumgebung. Bestätigen Sie das Ziel vor dem Schreiben (npx convex env get CONVEX_URL oder lesen Sie .env.local) und richten Sie eine Staging-Mutation niemals auf die Produktion.
   • Zuerst additiv und umkehrbar. Bevorzugen Sie das Patchen eines Titels oder das Einfügen einer Demozeile gegenüber dem Löschen echter Verlaufsdaten. Wenn Sie löschen müssen, betrachten Sie zuerst die Zeilen und sagen Sie, was Sie entfernt haben.
   • Plausibel, nicht spezifisch erfunden. Titel und Eingabeaufforderungen, die wie echte Arbeit wirken. Erfinden Sie niemals Metriken, Kundennamen oder Zahlen, die der Tweet dann als Tatsache wiederholt.
   • Löschen Sie die Staging-Mutation, wenn die Aufnahme abgeschlossen ist – dieselbe Bereinigungsregel wie bei jeder Migration.
   • Teilen Sie dem Benutzer mit, was Sie geändert haben, in der Übergabe.

9. Vertraulichkeit. Verwenden Sie das eigene Repository des Benutzers vvedantb/eva. Niemals Client-Repositories (evalucom/carepulse, eprocurement) und niemals die "Codebases"-Startseite, die diese auflistet. Überprüfen Sie Dokument-/Aufgaben-/Sitzungslisten im Rahmen auf nach Clients benannte Elemente – bereiten Sie eine saubere Demozeile vor, wenn die Liste verschmutzt ist. Wecken Sie niemals Bedenken bezüglich personenbezogener Daten zu Namen oder E-Mail-Adressen auf dem Bildschirm – Einstellungen → Experimentell hat einen Unscharf-PID-Umschalter, der jedes [data-pii]-Element unscharf macht, daher wird dies im Produkt gehandhabt. Melden Sie Fehlerbereiche, die Umgebungsvariablemannen oder Projekt-IDs preisgeben.

Arbeitsablauf

1. Bestimmen, was ausgeliefert wurde. Wenn der Benutzer nicht gesagt hat, um welche Funktion es sich handelt, fragen Sie – eine Frage, keine Umfrage. git log --oneline -15, git diff --stat oder internal/changelog/ (neueste Monatsdatei) nennen sie normalerweise. Sie benötigen die Funktion und die URL, die sie zeigt.

2. Starten Sie die App. Nur den Entwicklungsserver – die HD-Skripte starten ihren eigenen Chrome und melden sich als Agent-Benutzer an (/?agent=true) selbst, in einem frischen Kontext mit deviceScaleFactor 2. Sie steuern agent-browser nicht zum Aufnehmen.

   pnpm dev   # vom Repository-Stammverzeichnis → localhost:5173
   

3. Aufnehmen. Für eine einfache URL-Aufnahme navigiert shot.sh, klappt die Seitenleiste ein, blendet Überlagerungen aus und erfasst mit 2560×1440:

   bash .claude/skills/eva-feature-screenshot/scripts/shot.sh /vvedantb/eva/web/sessions sessions
   

   Benötigt einen URL-Pfad + Slug (+ optional Verweildauer in ms, + optional --no-collapse).

   Für eine vorbereitete Aufnahme (Menü öffnen, Eingabeaufforderung eingeben, dann aufnehmen) schreiben Sie ein Rezept – eine .mjs, die export async function stage(page, ctx) exportiert – und übergeben Sie es an hd-shot.mjs. Das Rezept übernimmt Navigation, Seitenleiste einklappen und Vorbereitung; ctx gibt Ihnen { BASE, hideOverlays, collapseSidebar, settle }. Verwenden Sie page.getByRole(...) (Playwright)-Locators. Um die genauen barrierefreien Namen zu finden, steuern Sie agent-browser zuerst interaktiv und verwenden Sie snapshot -i / read_page.

   // recipe.mjs – den Modus-Auswahl geöffnet mit einer eingegebenen Eingabeaufforderung vorbereiten
   export async function stage(page, ctx) {
     await page.goto(`${ctx.BASE}/vvedantb/eva/web/sessions`, {
       waitUntil: "networkidle",
     });
     await ctx.settle(3000);
     await ctx.collapseSidebar(page);
     await page.getByRole("textbox", { name: /Ask Eva/ }).click();
     await page.keyboard.type("Redesign the sessions sidebar…");
     await page.getByRole("button", { name: "Edit", exact: true }).click();
     await ctx.settle(600);
   }
   

   node .claude/skills/eva-feature-screenshot/scripts/hd-shot.mjs --slug session-modes --recipe /abs/path/recipe.mjs
   

   Bereiten Sie saubere, lesbare Eingaben vor – ein ordentlicher Demo-Titel ist besser als ein echter unordentlicher. Niemals absenden (Standard 7).

4. Lesen Sie das PNG zurück und beurteilen Sie es. Hier werden schlechte Aufnahmen erkannt:

   • Ist die Funktion das offensichtliche Motiv oder in der Benutzeroberfläche verloren?
   • Haben Überlagerungen/Symbolleisten überlebt? Ist noch ein Skelett, ein Ladebalken oder ein —-Platzhalter auf dem Bildschirm? (Erhöhen Sie die Verweildauer und nehmen Sie neu auf.)
   • Alle vier Kanten: abgeschnittene Beschriftungen, halb gerenderte Schaltflächen, eine abgeschnittene Spalte?
   • Etwas Vertrauliches gemäß Standard 9?
   • Leere Zustände: Ein leeres Board, das "Kanban-Aufgaben" beweist, ist eine schlechte Aufnahme. Befüllen oder wählen Sie eine andere Ansicht.

   Wenn der Rahmen aufgrund der Daten fehlschlägt – Fehlerwände, Untitled session, eine Zeile, in der die Funktion drei benötigt – bereiten Sie die Entwicklerdaten vor (Standard 8), anstatt nach einem glücklicheren Bildschirm zu suchen.

5. Rahmen setzen.

   bash .claude/skills/eva-feature-screenshot/scripts/frame.sh <slug> "Eva"
   

   Schreibt screenshots/<heute>-<slug>-framed.png (3200×1800). Es rendert templates/frame.html durch seinen eigenen Chrome mit deviceScaleFactor 2 – ein separater Browser von der Aufnahme, also muss nichts wiederhergestellt werden. Lesen Sie auch das gerahmte PNG zurück – überprüfen Sie, ob der Farbverlauf die Benutzeroberfläche an den Ecken nicht ausgewaschen hat und das Wortmarke nicht abgeschnitten ist. Ein drittes Argument rahmt ein rohes PNG von einem anderen Pfad ein. templates/frame.html ist der einzige Ort, an dem die Markenfarben dieser Fähigkeit leben.

6. Schreiben Sie den Tweet. Rufen Sie die Fähigkeit eva-tweet auf – Hook, optionale Positionierungsfragment, → Funktionsliste, optionaler Schluss. Der Screenshot trägt den Beweis, daher gibt der Tweet an, was jetzt existiert, anstatt das Bild zu beschreiben. Verweisen Sie niemals auf das Bild.

7. Übergeben. Den gerahmten Dateipfad als Markdown-Link, den Tweet in einem umschlossenen Block und alles im Rahmen, was der Benutzer vor dem Posten überprüfen sollte.

Kurzreferenz

Benötigt	Befehl
URL aufnehmen (HD)	bash .claude/skills/eva-feature-screenshot/scripts/shot.sh <path> <slug> [settle-ms]
Seitenleiste im Bild behalten	bash .claude/skills/eva-feature-screenshot/scripts/shot.sh <path> <slug> <settle-ms> --no-collapse
Vorbereitete Aufnahme (Menü/Eingabe)	node .claude/skills/eva-feature-screenshot/scripts/hd-shot.mjs --slug <slug> --recipe <abs.mjs>
Rahmen setzen (diesen posten)	bash .claude/skills/eva-feature-screenshot/scripts/frame.sh <slug> [title] [raw-png]
Barrierefreie Namen finden	agent-browser interaktiv steuern, dann agent-browser snapshot -i
Leere/defekte Seite debuggen	agent-browser console · agent-browser errors

Stolperfallen

• HD lebt in Playwright, nicht in agent-browser. agent-browsers screenshot erfasst mit CSS-Pixeln und ignoriert devicePixelRatio, daher begrenzt es auf 1280×720. hd-shot.mjs / hd-frame.mjs verwenden den playwright-core, der im globalen agent-browser-Installation gebündelt ist; setzen Sie PW_CORE, wenn es woanders ist. Beide starten mit channel:"chrome", daher muss systemweit Chrome installiert sein.
• Die Skripte melden sich selbst an bei /?agent=true (ein Boolean; /?agent wirft einen zod SearchParamError) in einem frischen Browserkontext. Keine agent-browser-Sitzung zum Aufnehmen erforderlich.
• Die Entwicklerüberlagerungen sind drei Knoten, die alle an <html> hängen, nicht an <body>. Das Verstecken von #react-scan-root allein reicht nicht: react-scan zeichnet seine Komponentenumrisse und -beschriftungen auf einem bloßen html > canvas ohne ID oder Klasse, und das ist das, was die Aufnahme ruiniert. hd-shot.mjs tötet alle drei (#react-scan-root, html > canvas, [data-agentation-root]) mit Inline-display:none !important, weil ein Stylesheet gegen ihre Inline-Stile verliert.
• Eine vorbereitete Aufnahme ist ein frischer Browser, nicht der, den Sie erkundet haben. Verwenden Sie agent-browser, um Selektoren zu finden, aber das Rezept navigiert erneut und bereitet von Grund auf im eigenen Kontext von Playwright vor – setzen Sie jeden Schritt in das Rezept. Bevorzugen Sie page.getByRole(...) gegenüber CSS; Referenzen wie @e1 existieren hier nicht.
• Zwei oder mehr Bilder verwässern den Punkt. X rendert ein Bild in voller Breite; ein zweites halbiert beide. Machen Sie nur mehr als eine Aufnahme für einen echten Vorher/Nachher-Vergleich.
• Verwenden Sie nicht video/public/captures/ wieder – das sind Remotion-Assets, die für einen anderen Zweck gerahmt wurden.