design-speaker-bio-cardlisted

# Skill: speaker-bio-card Produces a single self-contained HTML file containing **two pixel-exact canvases**: 1. **Main card** (800×600) — full speaker bio for CFP applications, conference apps, sponsor pages 2. **Compact card** (400×200) — condensed for event programs, list views, social cards Both render the same speaker identity at appropriate proportions. Screenshot each separately for the format the venue requires. ## When to use - User has a CFP submission, conference profile, or sponsor-deck speaker page that needs a bio card - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, speaker name, title/role - **Required:** 2-line bio (max ~30 words across the two lines combined; sentence-case ending in period per brand voice) - **Required:** social handle (1 primary; optional secondary) - **Optional:** talk title — if provided, gets prominent placement on the main card - **Optional:** headshot URL — if not provided, the skill renders a typographic placeholder (initials in a circle) ## Output `./design/<brand-slug>/artifacts/speaker-bio-card-YYYY-MM-DD-<slug>.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design/<brand-slug>/tokens.css ``` ### 2. Gather the brief Ask in one message: ``` 1. Speaker name + title/role (e.g. "Shane Logsdon, technical product leader") 2. Bio — 2 lines, sentence-case ending in period (max ~30 words combined) 3. Social handle — primary (e.g. @shanelogsdon) 4. Optional talk title — "What I look for i