design-newsletter-headerlisted

# Skill: newsletter-header Produces a 600×200 pixel-exact HTML canvas for use as a newsletter email header. The canvas is small — typography choices must be ruthless. Display sizes top out around 36–48px; meta around 11–14px. The artifact is meant to be screenshot to PNG and embedded as `<img>` in the email — the email client never sees raw HTML, so font and CSS quirks don't matter for delivery. ## When to use - User publishes a newsletter and needs a branded header banner image - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, newsletter title or issue identifier (e.g. "Working notes — May 2026") - **Optional:** issue number, dateline, tagline (max 6 words) ## Output `./design/<brand-slug>/artifacts/newsletter-header-YYYY-MM-DD-<slug>.html` ## 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. Header text — the masthead string (max 6 words) 2. Optional issue number / dateline (e.g. "Issue 003 · 2026.05.02") 3. Optional tagline / subtitle (max 6 words) ``` If the user gives 8+ words, push back: "600×200 won't hold that legibly. Cut to the masthead + meta." Don't proceed until they agree. ### 3. Pick variation — ARCHITECTURE FIRST Pick ONE. Newsletter headers favor restraint — pick the simplest archetype that carries the brand register: - `chrome-led` — masthead title + me