SkillProof tested Claude skills

Editorial Card Screenshot

Generiert HTML-Infokarten im Magazin-Stil und rendert sie als verhältnis-feste PNGs über headless Chrome

von shaom · shaom/infocard-skills

Getestet · Funktioniert ★ 8.8/10

Editorial Card Screenshot — Generiert HTML-Infokarten im Magazin-Stil und rendert sie als verhältnis-feste PNGs über headless Chrome

Was es kann

Wandelt Quelltext in eine hochdichte redaktionelle HTML-Infokarte im Schweizer/Magazin-Stil um und erfasst diese dann als PNG mit festem Seitenverhältnis (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) mithilfe eines gebündelten Headless-Chrome-Skripts. Wird ausgelöst, wenn ein Benutzer Text liefert und eine gestaltete Infokarte, ein Cover oder ein Screenshot-fertiges Layout in einem bestimmten Seitenverhältnis wünscht. Die HTML-Generierung benötigt keine Abhängigkeiten; der PNG-Schritt erfordert eine lokale Chrome- oder Chromium-Binärdatei.

Testbericht

SKILL.md und referenzierte Dateien über raw GitHub abgerufen. capture_card.sh, references/ratios.md und assets/card-template.html geben alle HTTP 200 zurück; das referenzierte scripts/trim_card_bottom.sh gibt 404 zurück (fehlt). Ich habe zwei 4:3-Karten aus demselben Quelltext ("Three Rules for Better Code Review") geschrieben: eine naive Baseline und eine, die dem Skill-Text folgte, und dann das eigene capture_card.sh des Skills mit dem echten lokalen Chrome (gefunden unter dem Standard-macOS-Pfad) ausgeführt. Beide PNGs wurden exakt mit 2000x1500 gerendert. Die Baseline füllte nur die oberen ~18% der Leinwand und ließ ~80% leeren weißen Raum; das Skill-Artefakt füllte sie randlos mit einem warmen #f5f3ed Papierhintergrund, einem asymmetrischen dunklen Hero-Block plus zwei helleren Seitenmodulen, Oswald-Überschrift, roten Akzentregeln und überdimensionierten Zahlen sowie einem Fußband – genau das 4:3-Skelett, das der Text vorschreibt. Trigger-Formulierungen beurteilt: SOLLTE auslösen – "make a 4:3 editorial info card from this roadmap text", "turn this paragraph into a magazine cover and render a 16:9 PNG", "high-density Swiss-style 1:1 info card as an image"; sollte NICHT – "build a responsive marketing landing page with pricing", "take a screenshot of example.com". Keine Sicherheitsmängel (Skript führt nur lokalen Headless Chrome aus; Google Fonts werden über das Netzwerk geladen, dokumentiert).

Getestet am: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

git clone --depth 1 https://github.com/shaom/infocard-skills.git /tmp/editorial-card-screenshot-src
mkdir -p ~/.claude/skills
cp -R /tmp/editorial-card-screenshot-src/skills/editorial-card-screenshot ~/.claude/skills/editorial-card-screenshot
# HTML card generation needs no deps.
# PNG capture (scripts/capture_card.sh <in.html> <out.png> <ratio>) requires a local Chrome/Chromium.
# Script respects $CHROME_BIN, else defaults to /Applications/Google Chrome.app/... (macOS).
# Note: SKILL.md references scripts/trim_card_bottom.sh, which is MISSING from the repo (404).

Befehle & Beispiel-Prompts

  • /editorial-card-screenshotGeneriert HTML-Infokarten im Magazin-Stil und rendert sie als verhältnis-feste PNGs über headless Chrome

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • Make an editorial info card for this article
  • Create a 16:9 card image from this text
  • Generate an HTML card and export it as PNG

Vollständiger Testbericht (Englisch) →