Editorial Card Screenshot
Generate magazine-style HTML info cards and render them as ratio-fixed PNGs via headless Chrome
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Jul 21, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · 3ee1d91
Fetched SKILL.md and referenced files via raw GitHub. capture_card.sh, references/ratios.md, and assets/card-template.html all return HTTP 200; the referenced scripts/trim_card_bottom.sh returns 404 (missing). I wrote two 4:3 cards from the same source text ("Three Rules for Better Code Review"): a naive baseline and one following the skill body, then ran the skill's own capture_card.sh with the real local Chrome (found at the default macOS path). Both PNGs rendered at exactly 2000x1500. Baseline filled only the top ~18% of the canvas leaving ~80% blank white space; the skill artifact filled it edge-to-edge with a warm #f5f3ed paper background, an asymmetric dark hero block plus two lighter side modules, Oswald headline, red accent rules and oversized numbers, and a footer band — the exact 4:3 skeleton the body prescribes. Trigger phrasings judged: SHOULD fire — "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"; should NOT — "build a responsive marketing landing page with pricing", "take a screenshot of example.com". No security smells (script only runs local headless Chrome; Google Fonts loaded over network, documented).
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 4/5
- Triggers reliably 5/5
- Output vs. baseline 9/10
- Docs & honesty 4/5
What Editorial Card Screenshot does
Turns source text into a high-density editorial HTML info card in a Swiss/magazine style, then captures it as a fixed-ratio PNG (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) using a bundled headless-Chrome script. Triggers when a user supplies text and wants a designed info card, cover, or screenshot-ready layout in a specific aspect ratio. HTML generation needs no dependencies; the PNG step requires a local Chrome or Chromium binary.
How to install Editorial Card Screenshot
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).
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Editorial Card Screenshot
-
/editorial-card-screenshotGenerate magazine-style HTML info cards and render them as ratio-fixed PNGs via headless Chrome
It also activates on plain-language prompts like these:
-
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
Frequently asked questions
- Is the Editorial Card Screenshot skill free?
- Yes. The skill itself is free from shaom/infocard-skills. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Editorial Card Screenshot work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 21, 2026. Verdict: Tested · Works. Fetched SKILL.md and referenced files via raw GitHub. capture_card.sh, references/ratios.md, and assets/card-template.html all return HTTP 200; the referenced scripts/trim_card_bottom.sh returns 404 (missing). I wrote two 4:3 cards from the same source text ("Three Rules for Better Code Review"): a naive baseline and one following the skill body, then ran the skill's own capture_card.sh with the real local Chrome (found at the default macOS path). Both PNGs rendered at exactly 2000x1500. Baseline filled only the top ~18% of the canvas leaving ~80% blank white space; the skill artifact filled it edge-to-edge with a warm #f5f3ed paper background, an asymmetric dark hero block plus two lighter side modules, Oswald headline, red accent rules and oversized numbers, and a footer band — the exact 4:3 skeleton the body prescribes. Trigger phrasings judged: SHOULD fire — "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"; should NOT — "build a responsive marketing landing page with pricing", "take a screenshot of example.com". No security smells (script only runs local headless Chrome; Google Fonts loaded over network, documented).
- What is the Editorial Card Screenshot SkillProof Score?
- 8.8/10 — installs cleanly 4/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 4/5.
- How do I install Editorial Card Screenshot?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Editorial Card Screenshot with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.