design-instagram-postlisted

# Skill: instagram-post Produces a pixel-exact HTML canvas for Instagram. Three canvas modes: - **`portrait`** (default, 1080×1350) — feed post in 4:5 ratio, the maximum vertical real estate Instagram allows - **`square`** (1080×1080) — classic feed square, useful for grid coherence - **`story`** (1080×1920) — vertical 9:16 for Stories and Reels covers Plus an optional caption suggestion (2200-char limit; first 125 chars visible before "more"). ## When to use - User wants a visual asset for Instagram (feed post, carousel cover, story, reel cover) - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, post topic / title (1 line) - **Optional:** mode (`portrait` | `square` | `story`, default `portrait`), supporting line, attribution, caption style, hashtag set ## Output `./design/<brand-slug>/artifacts/instagram-<mode>-YYYY-MM-DD-<slug>.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design/<brand-slug>/tokens.css ``` ### 2. Pick mode Default `portrait` (1080×1350) — gets the most feed space and converts best. Use `square` if user explicitly asks for grid coherence with existing square posts. Use `story` for Stories or Reel covers. ### 3. Gather the brief Ask in one message: ``` 1. Headline — the dominant text on the canvas (max 8 words for portrait/square, max 6 for story) 2. Optional supporting line (max 12 words) 3. Attribution — name + handle, or leave blank 4. Caption style: insight | story | announcement | carousel-intro |