design-ui-componentslisted

# Skill: ui-components Produces `./design/<brand-slug>/components/components.html` — a single self-contained HTML library where every reusable atom is rendered using the brand's `tokens.css`. Platform skills (linkedin-post, twitter-card, youtube-thumbnail, stream-overlay, instagram-post) read this library to compose artifacts without re-deriving primitive markup. ## When to use - After `/design-system <brand-slug>` has produced `DESIGN.md` + `tokens.css` - Before any platform artifact skill — they reference component snippets from this file - When you've added a new component category (e.g. data viz callouts) that platform skills need ## Inputs - `./design/<brand-slug>/DESIGN.md` (read for component prose guidance) - `./design/<brand-slug>/tokens.css` (embedded via `<style>` block in the output) ## Output `./design/<brand-slug>/components/components.html` — single file, no external CSS dependencies (Google Fonts `<link>` is allowed for the type families declared in `DESIGN.md`). ## Steps ### 1. Read inputs ```bash test -f ./design/<brand-slug>/tokens.css && test -f ./design/<brand-slug>/DESIGN.md ``` If either is missing, stop and tell the user to run `/design-system <brand-slug>` first. ### 2. Pick component variations For each component category below, pick ONE primary variation that fits the brand's visual direction. Show the alternates in the library too, but mark the primary explicitly so platform skills know which to default to. ### 3. Generate components.