design-youtube-thumbnaillisted

# Skill: youtube-thumbnail Produces a pixel-exact 1280×720 HTML canvas. The defining constraint: it must read clearly at 240×135px (typical mobile feed thumbnail) — not just at full size. Bias toward fewer words, larger type, higher contrast than other platform skills. ## When to use - User has (or is about to publish) a YouTube video and wants a thumbnail asset - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, video title (the ACTUAL video title, not the on-thumbnail text) - **Required:** thumbnail text — the 2–4 words that go ON the image (this is NOT the video title; it's the visual hook) - **Optional:** episode/series number, supporting micro-text (max 6 words) ## Output `./design/<brand-slug>/artifacts/youtube-YYYY-MM-DD-<slug>.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design/<brand-slug>/tokens.css ``` ### 2. Gather the brief Ask in one message: ``` 1. Video title (full title that goes in YouTube's title field) 2. Thumbnail text — 2–4 words MAX that appear ON the image. This is your visual hook, not your title. Examples: "Built it wrong" / "Faster than you'd think" / "Why I quit Vim" / "Day 47" 3. Optional episode/series marker (e.g. "EP. 12" or "PART 3 / 5") 4. Optional supporting micro-text under the hook (max 6 words) ``` If the user gives you 8+ words for thumbnail text, push back: "That's too many for legibility at mobile size. Pick the 3–4 words that carry the hook." Don't proceed until they agree. ### 3