design-link-in-biolisted

# Skill: link-in-bio Produces a deliverable mobile-first HTML page at 375px primary design width (with a centered-on-desktop fallback that maintains the column constraint). This is **NOT** a screenshot artifact — it's a real page meant to be deployed to a static host (GitHub Pages, Netlify, Vercel) as a `link-in-bio` destination from social profiles. The format is functionally identical to a Linktree-style page, but the visual treatment commits to the brand's editorial register rather than the rounded-button-stack template that all link-in-bio services produce by default. ## When to use - User wants a link-in-bio page (replaces or complements Linktree, Beacons, etc.) - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, name (or wordmark text), tagline (1 line, max ~10 words) - **Required:** array of links — each with `label` + `url`, optional `meta` (e.g. "GitHub" + "github.com/shane" + "Open source") - **Optional:** social handles for footer (Twitter/X, GitHub, etc.) - **Optional:** "current" indicator — one link can be marked as "current" (e.g. the latest piece, the next event) ## Output `./design/<brand-slug>/artifacts/link-in-bio.html` (single file — overwrite OK; canonical bio page 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. Name / wordmark — how the brand displays at the top 2. Tagline — 1 line, max 10 words, sentence-case en