design-obs-alert-overlaylisted

# Skill: obs-alert-overlay Produces ONE self-contained `obs-alert-overlay.html` file at 1920×1080 with **transparent background** that streams compositors (OBS, Streamlabs, Twitch Studio) load as a browser source. The page contains four hash-routed scenes — `#follow`, `#sub`, `#donation`, `#raid` — each with its own auto-playing entrance animation. Switching scenes is just changing the URL hash. This is distinct from the `stream-overlay` skill (which produces persistent scene chrome — starting / brb / webcam / lower-third / ending). This skill produces TRANSIENT alert cards triggered per event. ## When to use - User streams on Twitch / YouTube Live / Kick and wants branded alert cards - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug - **Optional:** alert position (default: lower-right corner; alternates: lower-left, upper-right, top-bar) - **Optional:** brand voice for alert copy (e.g. "ack." vs "thanks for the follow." vs "noted." — Shane's brand prefers terse + sentence-case) ## Output `./design/<brand-slug>/artifacts/obs-alert-overlay.html` (single file — overwrite OK; canonical alert overlay for the brand) ## Scenes (default 4) | Hash | Trigger | Default copy | |---|---|---| | `#follow` | new follower | "<name> just followed." | | `#sub` | new subscriber | "<name> subscribed." | | `#donation` | tip / donation | "<name> sent $<amount>." | | `#raid` | incoming raid | "<name> raided with <count>." | Each scene takes scene parameters via UR