card-news for Claude Code: a skill that builds mobile card news decks from one JSON file

card-news is a single skill that turns one content JSON file into card news PNGs sized for a phone screen. This post covers the problem it solves, who it suits, how to install it and run the example build, and the one setting worth changing before you build your own deck.

What problem it solves

Summarizing a long document as a set of cards sounds simple, but every new deck tends to reopen the same design questions. Font sizes drift, a card ends up with too many items, and text that looked fine on a desktop monitor becomes unreadable once a 1080px card shrinks to the width of a phone. The skill removes those questions by fixing the design in code. The look lives in template.html, the checks live in build.py, and the only file that changes from deck to deck is the content JSON. For a new deck you duplicate the example and edit the cards.

The checks are what make the output dependable. A card may use no more than three font sizes, no text smaller than 30.5px, contrast of at least 4.5:1, and no more than six items. That font size floor is not arbitrary. It comes from the ratio of a 1080px card shrinking to 390px wide in a messaging app. If any check fails, the build reports the reasons and writes no images at all, so a PNG only exists when the card passed.

Who it fits

The chapter rates four situations. Three are enough to decide.

Situation	Fit	Reason
Summarizing long documents as cards for a messaging app	Good fit	Includes summarization and narrative design
Repeating the same design for Instagram carousels	Good fit	Specifications fixed in code
Automatically posting cards to social media	Poor fit	Publishing and uploading are outside its scope

Square 1080x1080 cards sit in the middle. The code supports them, but that format has not been tested by hand.

Install and first run

Clone the claude-playbook repository, then copy the four skill files and build the bundled example.

# Clone the claude-playbook repository in Sources, then copy four skill files from its root
mkdir -p ~/.claude/skills/card-news
cp 02-skills/card-news/{SKILL.md,build.py,template.html,content.example.json} ~/.claude/skills/card-news/

# Build the example. PASS and six PNGs mean success
python3 ~/.claude/skills/card-news/build.py ~/.claude/skills/card-news/content.example.json

After the example passes, call the skill by name with a topic and the number of cards you want.

/card-news Turn the document summarizing this quarter's meeting rules into five cards

The run follows three steps. It reads and summarizes the source material and designs a narrative that runs from the cover card to a next action. It writes the content JSON and runs the build checks, fixing the reported reasons and building again on a failure. Finally it reviews at least three cards by eye for line breaks and spacing, then opens the folder with a delivery message.

What trips people up

The example’s output path points to a folder on the author’s desktop. Change meta.outdir to a folder in your own environment before your first real build, and pick that folder with care. On a successful build the skill deletes the existing card files there and writes new ones, so do not point it at a folder that holds cards you want to keep. The build also needs Chrome, Chromium, or Edge, because both rendering and checking run in a browser’s headless mode. If your browser lives outside the default paths, set its path in an environment variable.

Where this comes from

This post adapts part of chapter 02-08 of The Claude Code & Codex Skills Guidebook. The full chapter covers a file-by-file map of what to edit and what to leave alone, and the remaining cautions about the Korean-language skill file and the single verified install location, and the book has 52 more skills like this one. Read the full chapter in The Claude Code & Codex Skills Guidebook on Gumroad.