design-stream-overlaylisted

# Skill: stream-overlay Produces ONE self-contained `stream-overlay.html` file at 1920×1080 that contains all the standard live-stream scenes. JavaScript reads the URL hash and shows only the matching scene. OBS / Streamlabs / Twitch Studio loads the file once as a browser source; switching scenes is just changing the hash (e.g. `file://.../stream-overlay.html#brb`). ## When to use - User streams on Twitch, YouTube Live, Kick, etc. and needs branded overlay scenes - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug - **Optional:** stream name / show title, social handles to display, scene customization (which scenes to include — defaults to all 5) ## Output `./design/<brand-slug>/artifacts/stream-overlay.html` (single file — overwrite OK; the file is the brand's canonical overlay) ## Scenes (default 5) | Hash | Purpose | Layout | |---|---|---| | `#starting` | "Starting Soon" pre-stream waiting screen | Full-canvas headline + countdown placeholder + brand mark | | `#brb` | "Be Right Back" mid-stream pause | Full-canvas message + small brand mark, intentionally calm | | `#webcam` | Webcam frame — sized + positioned for the streamer's webcam capture | Cam window region defined as a transparent cutout with frame around it; rest of canvas shows brand chrome (sidebar with stream title, lower-third with handles) | | `#lower-third` | Just a lower-third name plate at the bottom — for code-only segments | Bottom 20% of canvas: name + role + handles, rest