wardiva/blog-skills

Turn blog article URLs into **premium, article-specific featured images** (1600×900 plus crops) in three families plus originals: calm card layouts on grainy light backgrounds (plus a vibrant deep-blue field), Chatbase-style headline layouts for comparisons (facing pills, connected logos, black slash, black duo panels) and single products (black + brand colour, or a black logo on cream), Gumloop-style layouts (bold type vs, tilted app-icon tiles, a frosted wordmark bar, a switch arrow, a figure badge), and originals (a receipt for costs, a dictionary entry for "what is", a notepad shortlist and a frosted logo lineup for best-of lists, frosted glass logo tiles and a bento grid for X vs Y). It's free: everything renders with headless Chrome, with **no AI image generation**.
*A selection from the finalized reference set: card layouts (top), the six headline layouts (middle), and Gumloop layouts with the newest originals (bottom). The same images ship in references/approved/, and the renderer's defaults reproduce this look.*
Every image:
- **mirrors the blog title** and uses **only the article's own facts**
- is **minimal**: at most 15 words, labels not sentences (enforced)
- sits on a **background chosen to flatter its illustration** (enforced)
- **looks different**: a layout not used yet goes first, and a used layout never comes back in the same category, only in a different one (enforced)
- shows **real, balanced product logos** where products are named
- is **checked by two independent QA agents** side by side, one for looks (visual appeal is a hard gate) and one for facts
---
Install
Add -g to install it for all your projects.
One-time setup
| Need | Why | How |
|---|---|---|
| **Node 18+** and **Chrome or Edge** | Renders the images | Set the CHROME env var if Chrome isn't found automatically |
| sharp | Crops and exports | Run npm install in the skill's scripts/ folder (Claude does this on first use) |
| **agent-browser** (recommended) | Reads every article URL in parallel, in seconds | npm i -g agent-browser. It uses your existing Chrome; without it, Claude falls back to WebFetch |
| **Brandfetch client ID** (optional) | Sharper official logos | Free at brandfetch.com/developers. Keep it **local**, never in a repo |
Save your Brandfetch client ID in ~/.blog-featured-images/config.json:
or set the BRANDFETCH_CLIENT_ID env var. Without an ID, logos still work through the free Iconify and Simple Icons libraries.
Use
In Claude Code:
> Make featured images for these articles: https://example.com/blog/post-1/ https://example.com/blog/post-2/
Or invoke /blog-featured-images. Each article gets a featured-images/ / folder:
| File | Use |
|---|---|
| master.png | 1600×900 master |
| 16x9-1200.webp | Social and OG image |
| 7x5.webp | Theme crop |
| card-350x250.png | Thumbnail check |
---
How it works
**Four roles, in one fast batch** (an agent never both makes and approves an image):
1. **Orchestrator** (Claude): reads every URL at once (read-articles.mjs), checks which logo-dependent layouts each brand can use (logo-check.mjs), picks the best free layout per article (not used yet first, then used only in other categories) and which ones go on the vibrant blue, and reserves them all (plan.mjs).
2. **Makers** (parallel subagents): write each spec from the article's facts and render it.
3. **Visual QA** (an independent subagent): judges the whole batch on one contact sheet (sheet.mjs): visually appealing, background fits, no layout reused in a category, 2-second scan, minimal, balanced, clean logos.
4. **Fact QA** (an independent subagent, running at the same time): checks every word and number against the article text: the heading mirrors the title, every figure keeps its qualifier, nothing contradicts or is invented.
Failures go back to their own Maker and are re-checked only by the QA agent that failed them; an image is delivered only when both pass.
5. **Finalize** (finalize.mjs): delivered images become permanent. They stay stored (plus a copy in ~/.blog-featured-images/delivered/), keep counting as used in their category, and can never be re-created or overwritten.