Projekt-Rahmen generieren
Erstellt Screenshots der besten Seiten des aktuellen Projekts und rahmt sie ein. Dieser Skill ist verantwortlich für die Erkennung, Vorbereitung der App und die rohe Screenshot-Qualität; ERFORDERLICHER UNTER-SKILL: generate-frame übernimmt die Rahmung und das Cover. Führen Sie zuerst dessen Schritt 1 aus (finden und prüfen Sie das frame-kit) und brechen Sie ab, wenn dies fehlschlägt. <frame-kit> ist der Pfad, den es auflöst.
Ausgaben, niemals gemischt: roh → ~/Pictures/<projekt>-portfolio/raw/, gerahmt → ~/Pictures/<projekt>-portfolio/framed/.
1. Scannen
Finden Sie benutzerseitige Seiten: Routen, Seiten-/Ansichtskomponenten, Admin-Ressourcen (Filament, Nova…), Navigationsmenüs. Lesen Sie den Code, um zu erfahren, wie die App gestartet wird, welche Rollen existieren und welche Rolle welche Seite sieht. Raten Sie nicht bei Ports, URLs oder Anmeldedaten; überprüfen Sie diese, indem Sie die App starten oder nachfragen.
2. Bis zu 5 vorschlagen
Entscheiden Sie, um welche Art von Produkt es sich handelt, und ordnen Sie die Seiten danach, wie gut sie zeigen, was das Produkt wirklich tut. Die Frage ist: Was würde einem Fremden helfen, dieses Produkt auf einen Blick zu verstehen?
| Produkt | Stärkste Seiten |
|---|---|
| Business-/Admin-App (POS, CRM, Inventar) | Der Kern-Workflow mit echten Zeilen, dann Dashboard, dann datenreiche Listen |
| Dashboard/Analytics | Haupt-Dashboard, eine Drill-Down-Ansicht, ein Bericht |
| Content-/Marketing-/E-Commerce-Seite | Landing-/Hero-Seite, Liste, Detailseite, Warenkorb oder Checkout |
| Editor/Builder/Kreativ-Tool | Die Leinwand mit Inhalt, dann eine Galerie oder Projektliste |
| Entwickler-Tool/Dokumentation | Haupt-UI in Benutzung, eine Ergebnis-/Ausgabeansicht |
Überspringen Sie Login-Seiten, einfache Formulare, Einstellungen, Fehlerseiten und nahezu Duplikate. Weniger als 5 sind in Ordnung. Listen Sie jede Seite mit Name, Pfad, Rolle und einzeiliger Begründung auf.
3. Fragen
AskUserQuestion, multiSelect (max. 4 Optionen pro Frage; teilen Sie es ggf. in zwei Fragen auf). Die Aufnahme darf erst beginnen, nachdem der Benutzer ausgewählt hat. Fragen Sie auch: Hell oder Dunkel (nur wenn die App beides hat) und welche Rolle/Konto verwendet werden soll. Anmeldedaten stammen aus der Umgebung des Benutzers oder einer bestehenden Sitzung; schreiben Sie sie niemals in Skripte, Dateien oder Ausgaben und umgehen Sie keine Zugriffsbeschränkungen (eine Seite, die die gewählte Rolle nicht sehen kann, wird übersprungen, nicht erzwungen).
4. App vorbereiten
- Starten Sie die App, falls sie nicht läuft, auf einem freien Port; denken Sie daran, das Gestartete zu beenden.
- Öffnen Sie die ausgewählten Seiten. Leere oder Platzhalterdaten → sagen Sie dies und bieten Sie realistische Demo-Daten an. Das Seeden erfordert ein explizites Ja, erfolgt in einer separaten oder Wegwerf-Datenbank, und die Entwicklungsdatenbank wird niemals ohne Zustimmung berührt. Bevorzugen Sie Zustände, die die UI selbst erstellen kann (z. B. Artikel in den Warenkorb legen) gegenüber Datenbank-Schreibvorgängen.
- Fügen Sie dem Benutzerprojekt keine Abhängigkeiten oder Dateien hinzu. Skripte leben im Scratchpad.
5. Aufnahme
Schreiben Sie ein Scratchpad-Skript, das capturePages aus <dieser Skill>/scripts/capture.mjs importiert:
import { capturePages } from '<dieser Skill>/scripts/capture.mjs';
const results = await capturePages({
frameKit: '<frame-kit>', outDir: '<rohes Verzeichnis>', colorScheme: 'light', // ein Schema für den Batch
storageState: process.env.APP_STORAGE_STATE, // gespeicherte Sitzung; oder login: async (page) => {...}, das process.env liest
setup: (ctx) => ctx.addInitScript(() => localStorage.setItem('theme', 'light')), // eigener Theme-Schalter der App, falls vorhanden
pages: [{ name: '01-dashboard', url: 'http://localhost:8000/admin', prepare: async (page) => { /* Warenkorb öffnen, Tour abweisen … */ } }],
});
console.log(JSON.stringify(results, null, 2));
Es verwendet einen 1440×900 @2x Kontext für den gesamten Batch (PNGs sind 2880×1800), wartet auf Netzwerkinaktivität, Schriftarten und verzögerten Inhalt und meldet issues pro Seite: Konsolen-/Seitenfehler, HTTP ≥ 400, Weiterleitungen (normalerweise fehlender Login), defekte Bilder, sichtbare Spinner/Skeletons, Overlays/Cookie-Banner, leere Diagrammcontainer. Benennen Sie Dateien NN-<slug>.png in der vorgeschlagenen Reihenfolge. Übergeben Sie die eigenen Selektoren der App über loadingSelectors/overlaySelectors/hideCss (Toasts, Debug-Leisten).
Interaktive Bildschirme (Warenkorb, Editor, Board) benötigen zuerst Beispielinhalte, die in prepare hinzugefügt werden.
Für jede Seite mit Problemen: Beheben Sie das Problem (Overlay schließen, auf Element warten, einloggen) und machen Sie nur diese Seite neu; oder teilen Sie dem Benutzer mit, dass es nicht behebbar ist, und lassen Sie sie weg. Eine Warnung, die Sie für harmlos halten (z. B. ein Favicon 404), ist in Ordnung; sagen Sie dies. Lesen Sie dann jedes PNG: echter Inhalt, nichts halb Geladenes, keine privaten Daten (E-Mails, Tokens, echte Kundennamen), die nicht veröffentlicht werden sollten; fragen Sie beim Benutzer nach, wenn Sie unsicher sind.
6. Rahmung
Führen Sie die Schritte 2–4 von generate-frame mit dem Roh-Ordner als Eingabe aus: --out <gerahmtes Verzeichnis>, --url "<App-Host>/{name}", --resolution (Standard max). Ein teilweiser Fehler wird gemeldet, nicht versteckt: Nehmen Sie nur die fehlgeschlagenen Dateien neu auf oder rahmen Sie sie neu. Melden Sie den Roh-Ordner, den gerahmten Ordner, das Cover-Paar, die entfernten Seiten und warum, sowie etwaige Einschränkungen (z. B. nicht geprüfte Bilder).