SkillProof tested Claude skills

Editorial Card Screenshot

Genera schede informative HTML in stile rivista e le renderizza come PNG a rapporto fisso tramite Chrome headless

di shaom · shaom/infocard-skills

Promosso ★ 8.8/10

Editorial Card Screenshot — Genera schede informative HTML in stile rivista e le renderizza come PNG a rapporto fisso tramite Chrome headless

Cosa fa

Trasforma il testo sorgente in una scheda informativa HTML editoriale ad alta densità in stile svizzero/rivista, quindi la cattura come PNG a rapporto fisso (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) utilizzando uno script Chrome headless incluso. Si attiva quando un utente fornisce testo e desidera una scheda informativa progettata, una copertina o un layout pronto per lo screenshot in un rapporto d'aspetto specifico. La generazione HTML non richiede dipendenze; il passaggio PNG richiede un binario locale di Chrome o Chromium.

Rapporto di test

Recuperato SKILL.md e i file referenziati tramite GitHub raw. capture_card.sh, references/ratios.md e assets/card-template.html restituiscono tutti HTTP 200; lo script referenziato scripts/trim_card_bottom.sh restituisce 404 (mancante). Ho scritto due schede 4:3 dallo stesso testo sorgente ("Three Rules for Better Code Review"): una baseline ingenua e una che seguiva il corpo della skill, quindi ho eseguito il capture_card.sh della skill con il vero Chrome locale (trovato nel percorso predefinito di macOS). Entrambi i PNG sono stati renderizzati esattamente a 2000x1500. La baseline riempiva solo il ~18% superiore della tela lasciando il ~80% vuoto e bianco; l'artefatto della skill lo riempiva da bordo a bordo con uno sfondo di carta caldo #f5f3ed, un blocco hero scuro asimmetrico più due moduli laterali più chiari, titolo Oswald, regole di accento rosse e numeri sovradimensionati, e una banda a piè di pagina — l'esatto scheletro 4:3 che il corpo prescrive. Frasi trigger giudicate: DOVREBBE attivarsi — "crea una scheda informativa editoriale 4:3 da questo testo di roadmap", "trasforma questo paragrafo in una copertina di rivista e renderizza un PNG 16:9", "scheda informativa 1:1 in stile svizzero ad alta densità come immagine"; NON DOVREBBE — "costruisci una landing page di marketing responsiva con prezzi", "fai uno screenshot di example.com". Nessun problema di sicurezza (lo script esegue solo Chrome headless locale; Google Fonts caricati tramite rete, documentato).

Testato il: 2026-07-21 · Claude Code 2.x (agent harness)

Installazione

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).

Comandi e prompt di esempio

  • /editorial-card-screenshotGenera schede informative HTML in stile rivista e le renderizza come PNG a rapporto fisso tramite Chrome headless

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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

Rapporto completo →