SkillProof tested Claude skills

Editorial Card Screenshot

Génère des cartes d'information HTML de style magazine et les rend en PNG à ratio fixe via Chrome headless

par shaom · shaom/infocard-skills

Testé · Fonctionne ★ 8.8/10

Editorial Card Screenshot — Génère des cartes d'information HTML de style magazine et les rend en PNG à ratio fixe via Chrome headless

Ce que fait

Transforme un texte source en une carte d'information HTML éditoriale haute densité de style suisse/magazine, puis la capture en PNG à ratio fixe (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) à l'aide d'un script Chrome headless intégré. Se déclenche lorsqu'un utilisateur fournit du texte et souhaite une carte d'information conçue, une couverture ou une mise en page prête pour capture d'écran dans un rapport d'aspect spécifique. La génération HTML ne nécessite aucune dépendance ; l'étape PNG nécessite un binaire Chrome ou Chromium local.

Rapport de test

Récupéré SKILL.md et les fichiers référencés via raw GitHub. capture_card.sh, references/ratios.md et assets/card-template.html renvoient tous HTTP 200 ; le scripts/trim_card_bottom.sh référencé renvoie 404 (manquant). J'ai écrit deux cartes 4:3 à partir du même texte source ("Three Rules for Better Code Review") : une base naïve et une suivant le corps de la compétence, puis exécuté le propre capture_card.sh de la compétence avec le vrai Chrome local (trouvé au chemin macOS par défaut). Les deux PNG ont été rendus à exactement 2000x1500. La base n'a rempli que les ~18% supérieurs du canevas, laissant ~80% d'espace blanc ; l'artefact de la compétence l'a rempli bord à bord avec un fond papier chaud #f5f3ed, un bloc héros sombre asymétrique plus deux modules latéraux plus clairs, un titre Oswald, des règles d'accent rouge et des chiffres surdimensionnés, et une bande de pied de page — le squelette 4:3 exact prescrit par le corps. Phrases de déclenchement jugées : DEVRAIT se déclencher — "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" ; NE DEVRAIT PAS — "build a responsive marketing landing page with pricing", "take a screenshot of example.com". Aucune faille de sécurité (le script n'exécute que Chrome headless local ; Google Fonts chargés via le réseau, documenté).

Testé le: 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).

Commandes et exemples de prompts

  • /editorial-card-screenshotGénère des cartes d'information HTML de style magazine et les rend en PNG à ratio fixe via Chrome headless

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 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

Rapport complet →