design-twitch-panelslisted

Generate a bundled Twitch channel asset set — single HTML file containing 1 offline banner (1920×1080) + 6 info panels (320×160 each, labeled About / Schedule / Commands / Socials / Specs · Setup / Support). Each canvas is screenshotted individually and uploaded to the appropriate Twitch channel slot. The offline banner uses the brand's most distinctive architecture; panels use a CONSISTENT register so they read as a set. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "twitch panels", "stream channel art", "twitch banner + panels", "/twitch-panels".
slogsdon/skills-design · ★ 2 · Web & Frontend · score 73

Install: claude install-skill slogsdon/skills-design

# Skill: twitch-panels Produces a single self-contained HTML file containing **7 pixel-exact canvases**: 1. **Offline banner** (1920×1080) — shown when the channel is offline. The page's most visible asset; uses the brand's strongest treatment. 2. **About panel** (320×160) — short bio 3. **Schedule panel** (320×160) — stream cadence 4. **Commands panel** (320×160) — chat commands 5. **Socials panel** (320×160) — handles 6. **Specs · Setup panel** (320×160) — gear/equipment 7. **Support panel** (320×160) — donations / merch / sponsorship All panels share visual treatment so they read as a coherent set in the channel sidebar. Only the offline banner takes liberties with the variation matrix. ## When to use - User runs a Twitch channel and needs the channel's static assets (offline banner + sidebar panels) as a coherent set - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug - **Required:** offline banner copy (max ~10 words; sentence-case ending in period per brand voice) - **Required:** per-panel content (bio for About, schedule string, command list, social handles, gear list, support links) ## Output `./design/<brand-slug>/artifacts/twitch-panels.html` (single file — overwrite OK; canonical channel asset set for the brand) ## Steps ### 1. Verify brand exists ```bash test -f ./design/<brand-slug>/tokens.css ``` ### 2. Gather the brief Ask in one message: ``` 1. Offline banner copy — max 10 words (e.g. "Live coding on payments. Tuesdays 2pm.