design-quote-cardlisted

# Skill: quote-card Produces a single self-contained HTML file containing TWO pixel-exact canvases: 1. **Square** (1080×1080) — Instagram feed / LinkedIn / generic social 2. **Story** (1080×1920) — Instagram Story / Reel cover / vertical share Both render the same quote at proportional scale for their format. Screenshot each separately for the appropriate platform. This is the artifact format most prone to AI-default tells: large opening quotation mark glyph (❝), centered alignment as default, color-gradient backgrounds behind text. **All three are explicitly banned in this skill.** The quote IS the artifact — typography carries everything. ## When to use - User wants to share a single insight, claim, or pull-quote as a standalone card - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, the quote text (1 sentence, sentence-case ending in period per brand voice; max ~25 words) - **Optional:** attribution (e.g. "Shane Logsdon, 2026" — usually omitted if the brand IS the speaker) - **Optional:** source — link to the longer piece the quote is from - **Optional:** type-accent — one word in the quote to set in `--color-accent` ## Output `./design/<brand-slug>/artifacts/quote-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. Quote text — 1 sentence, sentence-case ending in period (max ~25 words; push back if longer) 2. Optional