design-blog-herolisted

# Skill: blog-hero Produces a single self-contained HTML file containing TWO pixel-exact canvases: 1. **OG card** (1200×630) — Open Graph / Twitter card dimensions for social link unfurls 2. **In-page hero** (1440×600) — wide format for the article's header section on the site The same headline + meta render in both canvases at appropriate proportions. Screenshot each canvas separately for its respective use. ## When to use - Publishing a blog post / field note that needs both an OG meta image and a page header asset - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, post title / hero headline (1 sentence, ending in period per brand voice) - **Optional:** dek (1 supporting sentence), category label, dateline, optional type-accent word (one word in the headline to set in `--color-accent`) ## Output `./design/<brand-slug>/artifacts/blog-hero-YYYY-MM-DD-<slug>.html` — single file, two canvases stacked vertically with a labeled header above each so it's clear which to screenshot for which use. ## Steps ### 1. Verify brand exists ```bash test -f ./design/<brand-slug>/tokens.css ``` If missing, stop and tell the user to run `/design-system <brand-slug>` first. ### 2. Gather the brief Ask in one message: ``` 1. Hero headline — the post's title, sentence-case ending in period (max ~12 words for legibility at OG thumbnail size) 2. Optional dek — 1 supporting sentence (max ~18 words) 3. Category label — short string (e.g. "field notes", "strategi