SkillProof tested Claude skills

Editorial Card Screenshot

Genereert HTML-infokaarten in tijdschriftstijl en rendert deze als PNG's met vaste verhouding via headless Chrome.

Door shaom · shaom/infocard-skills

Getest · Werkt ★ 8.8/10

Editorial Card Screenshot — Genereert HTML-infokaarten in tijdschriftstijl en rendert deze als PNG's met vaste verhouding via headless Chrome.

Wat het doet

Zet brontekst om in een high-density redactionele HTML-infokaart in een Zwitserse/tijdschriftstijl, en legt deze vervolgens vast als een PNG met vaste verhouding (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) met behulp van een gebundeld headless-Chrome script. Activeert wanneer een gebruiker tekst aanlevert en een ontworpen infokaart, omslag of screenshot-klare lay-out wil in een specifieke beeldverhouding. HTML-generatie heeft geen afhankelijkheden nodig; de PNG-stap vereist een lokale Chrome- of Chromium-binary.

Testrapport

SKILL.md en gerefereerde bestanden opgehaald via raw GitHub. capture_card.sh, references/ratios.md, en assets/card-template.html retourneren allemaal HTTP 200; de gerefereerde scripts/trim_card_bottom.sh retourneert 404 (ontbreekt). Ik schreef twee 4:3-kaarten van dezelfde brontekst ("Three Rules for Better Code Review"): een naïeve baseline en een die de skill-body volgde, en voerde vervolgens de eigen capture_card.sh van de skill uit met de echte lokale Chrome (gevonden op het standaard macOS-pad). Beide PNG's werden gerenderd op exact 2000x1500. Baseline vulde slechts de bovenste ~18% van het canvas, waardoor ~80% blanco witruimte overbleef; het skill-artefact vulde het van rand tot rand met een warme #f5f3ed papieren achtergrond, een asymmetrisch donker hero-blok plus twee lichtere zijmodules, Oswald-kop, rode accentregels en oversized nummers, en een voettekstband — het exacte 4:3-skelet dat de body voorschrijft. Trigger-formuleringen beoordeeld: MOET activeren — "maak een 4:3 redactionele infokaart van deze roadmaptekst", "verander deze paragraaf in een tijdschriftomslag en render een 16:9 PNG", "high-density Zwitserse-stijl 1:1 infokaart als afbeelding"; MOET NIET — "bouw een responsieve marketing landingspagina met prijzen", "maak een screenshot van example.com". Geen beveiligingsrisico's (script draait alleen lokale headless Chrome; Google Fonts geladen via netwerk, gedocumenteerd).

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

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

Commando's en voorbeeldprompts

  • /editorial-card-screenshotGenereert HTML-infokaarten in tijdschriftstijl en rendert deze als PNG's met vaste verhouding via headless Chrome.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • 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

Volledig rapport (Engels) →