design-twitter-cardlisted

# Skill: twitter-card Produces a pixel-exact HTML canvas for Twitter/X. Two canvas modes: - **`feed`** (default, 1600×900) — in-timeline post image at the recommended max-quality 16:9 ratio - **`og`** (1200×630) — Open Graph link card for shared URLs from your site Plus an optional companion tweet (280-char limit) or thread starter. ## When to use - User wants a visual asset for a tweet, an X thread cover, or an Open Graph card on their site - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, post headline / title (1 line) - **Optional:** mode (`feed` | `og`, default `feed`), supporting line, attribution, companion tweet style ## Output `./design/<brand-slug>/artifacts/twitter-<mode>-YYYY-MM-DD-<slug>.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design/<brand-slug>/tokens.css ``` If missing, stop and instruct the user to build the design system first. ### 2. Pick the canvas mode If user said "OG card" or "link card", use `og` (1200×630). Otherwise default to `feed` (1600×900) — sharper, larger, displays better in-timeline. ### 3. Gather the brief Ask in one message: ``` 1. Headline — the dominant text on the canvas (max 10 words for feed mode, max 6 for OG) 2. Optional supporting line 3. Attribution — name + role, or leave blank 4. Companion tweet style: claim | thread-starter | quote | question | none ``` ### 4. Pick variation — ARCHITECTURE FIRST Pick ONE architecture archetype before any other axis. The single bigge