CrziDev/claude-skills

Rahmen generieren

Vorhandene Screenshots in gerahmte PNGs umwandeln mit frame-kit, welches die gesamte Darstellung übernimmt. Dieser Skill lokalisiert das Tool, führt es aus, prüft die Ergebnisse und wählt ein Titelbild aus. Um zuerst die Seiten eines Projekts zu screenshoten, verwende generate-project-frames.

1. frame-kit lokalisieren und prüfen

Nenne den Ordner <frame-kit>. Verwende den ersten, der cli.mjs und eine package.json mit dem Namen frame-kit enthält:

1. $FRAME_KIT_DIR
2. den Ordner hinter einem frame-kit-Befehl im PATH (readlink -f "$(command -v frame-kit)", dessen Ordner)
3. eine Suche in ~/projects ~/code ~/dev ~, Tiefe ≤ 4, node_modules überspringen (mehrere Treffer → frage nach)
4. den Benutzer fragen; falls keiner vorhanden ist, git clone https://github.com/CrziDev/frame-kit vorschlagen

Dann:

• Fehlt node_modules → npm install in <frame-kit> ausführen.
• Führe node <frame-kit>/cli.mjs --help aus und erstelle Befehle nur aus den aufgelisteten Optionen. Fehlt --resolution oder --fit, ist die Installation älter: lasse sie weg und sage dem Benutzer, er solle git pull ausführen.
• "Chromium nicht gefunden" → npx playwright install chromium in <frame-kit> ausführen oder CHROME_PATH setzen.

Schreibe den Pfad nicht in eine Skill-Datei.

2. Rahmen erstellen

node <frame-kit>/cli.mjs single <Bild|Ordner> --out <Rahmen-Verzeichnis> [Optionen]

• --out: immer übergeben. Standard ist <Eingabe-Verzeichnis>/framed/, was innerhalb eines Roh-Ordners verschachtelt wird. Halte gerahmte Bilder getrennt von Quellen.
• --url "<Host>/{name}": Adressleiste-Text; {name} = Dateiname ohne das NN--Präfix. Verwende den echten Host und Pfad der App, wenn bekannt, sonst weglassen.
• --style paper: Quittungen, Rechnungen, Ausdrucke. Ein Ordnerlauf verwendet einen Stil, daher führe nur diese Dateien einzeln mit --style paper und dem gleichen --out erneut aus.
• --resolution standard|high|max: Standard max (3840×2400). Verwende standard (1920×1200) für READMEs und schnelle Vorschauen, high (2560×1600) für Web und Präsentationen. Größere Ausgabe bedeutet schärferer Rahmen und Text, nicht mehr Details im Screenshot. Verwende eine Auflösung pro Durchlauf.
• --fit auto|contain|cover: Standard auto (ganzer Screenshot; sehr lange Seiten von oben beschnitten). Nur ändern, um einen schlechten Zuschnitt zu korrigieren.

Exit-Code 1 bedeutet, dass einige Dateien fehlgeschlagen sind; die anderen werden trotzdem geschrieben und die Fehler werden auf stderr aufgelistet. Behebe die Ursache (nicht lesbares oder beschädigtes Bild, nicht unterstützter Typ, über 50 MB) und führe nur diese Dateien erneut aus. Wenn jede Datei fehlschlägt, vermute Chromium.

3. Titelbild (nur bei Ordnereingabe)

Betrachte die Bilder und wähle zwei, die sich ergänzen:

• Rückseite: Übersicht über das Produkt (Dashboard, Analysen, Startseite), Querformat, in Miniaturansicht lesbar.
• Vorderseite: Der Bildschirm, der zeigt, was die App tut, mit echtem Inhalt, ein anderer Aufbau als die Rückseite.
• Niemals: Login, leere Zustände, Fehlerseiten, sehr lange Vollseiten-Aufnahmen, Quittungen oder derselbe Bildschirm zweimal.

node <frame-kit>/cli.mjs cover <Rückseite> <Vorderseite> --back-url "…" --front-url "…" --out <Rahmen-Verzeichnis>/00-cover.png (gleicher --resolution). Übergib die Quell-Screenshots, nicht die gerahmten. Nur ein Bild zeigenswert, oder der Benutzer möchte eine Überschrift? Verwende headline (siehe --help).

4. Überprüfen und berichten

1. node <dieser Skill>/scripts/verify-frames.mjs <Eingabe> <Rahmen-Verzeichnis> --resolution <Voreinstellung> überprüft, ob jede Eingabe ein gültiges PNG der richtigen Größe hat, plus das Cover. Es bewertet nicht das Aussehen.
2. Lese jedes Ausgabe-PNG (und das Cover). Suche nach einem leeren oder teilweise geladenen Screenshot, abgeschnittenem Inhalt, unlesbar kleiner Schrift, falschem Stil (Quittung in einem Browser-Fenster), falscher Adressleiste. Führe nur die betroffenen Dateien mit angepassten Optionen erneut aus und überprüfe erneut. Wenn du Bilder nicht ansehen kannst, sage es.
3. Bericht: Das gerahmte Verzeichnis, fehlgeschlagene oder wiederholte Dateien, das Titelpaar und in einem Satz, warum sich die beiden ergänzen.