<Brand> — Carousel

# Design Carousel Slide > Generate a LinkedIn / Instagram multi-slide carousel — single HTML file with N square 1080×1080 .canvas divs, each representing one slide. Default N=5 (cover + 3 content + closing CTA). Cover and closing always use the brand's most distinctive treatments; middle slides are content-led. Reads ./design//DESIGN.md, tokens.css, and components.html. Triggers include "carousel for X", "linkedin carousel", "instagram carousel", "carousel slides", "/carousel-slide". - Skill: `slogsdon/design-carousel-slide` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add slogsdon/design-carousel-slide` - Raw SKILL.md: https://api.skillmd.com/api/skills/slogsdon/design-carousel-slide/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: slogsdon (https://skillmd.com/u/slogsdon) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/slogsdon/design-carousel-slide --- # Skill: carousel-slide Produces a single self-contained HTML file containing N pixel-exact 1080×1080 canvas divs. Each canvas is an individual carousel slide; screenshot each separately at native dimensions to upload as a multi-slide post on LinkedIn or Instagram. The carousel format is high-leverage for editorial brands — it lets the brand's longer-form thinking land in a feed that otherwise rewards single posts. The discipline: cover and closing slides do the visual work; middle slides do the content work. ## When to use - User wants a multi-slide carousel post (LinkedIn or Instagram) - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, post topic / thesis - **Optional:** number of slides (default 5: cover + 3 content + closing), CTA text for closing slide - **Optional:** content for each middle slide (or leave for the agent to draft from the topic) ## Output `./design//artifacts/carousel-YYYY-MM-DD-.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design//tokens.css ``` ### 2. Gather the brief Ask in one message: ``` 1. Topic / thesis — the carousel's argument in one sentence (sentence-case ending in period per brand voice) 2. Number of slides — default 5 (1 cover + N content + 1 closing CTA); valid range 3–9 (carousel max) 3. Per-slide content — optional. If omitted, the agent drafts from the topic. 4. Closing CTA — the action you want readers to take (e.g. "read the full piece at shane.logsdon.io") ``` ### 3. Pick variations — DIFFERENT archetypes for cover, content, closing Carousel formats reward visual variation between cover and content. The discipline: **Cover slide** (slide 1) — picks from the most distinctive archetypes: - `single-word` — one massive Fraunces serif word - `inverse-text` — full canvas dark inversion with the carousel's claim as the headline - `number-led` — the topic's defining stat dominates the cover - `type-only` — the topic statement at maximum scale, no chrome **Content slides** (slides 2 through N-1) — picks from CONSISTENT archetypes (slides should feel like a series, not a deck of mismatched cards): - `chrome-led` — running head + numbered headline + brief body - `object-of-content` — looks like a fragment from the brand's actual writing - `pattern-led` — typographic pattern with a punctum **Closing slide** (slide N) — picks from action-oriented archetypes: - `chrome-led` with explicit CTA - `inverse-text` with the CTA as the carved headline - `single-word` ("more.") with URL beneath **Color treatment** must hold across all slides for series coherence: `cream-page` | `inverted-feature-on-cover` (cover dark, body cream, closing dark to bookend) | `full-cream`. **Cross-artifact rule:** if a recent carousel for this brand used a particular cover archetype, vary it. ### 4. Generate the HTML Template: ```html <Brand> — Carousel — <topic> → Slide 1 / N · COVER · 1080×1080

01 / 05

→ Slide 2 / N · CONTENT

02 / 05

→ Slide N / N · CLOSING

05 / 05

``` ### 5. Per-slide content guidance - **Cover (slide 1)**: the carousel's claim or topic, set at maximum scale per chosen archetype. NO chrome (no eyebrow, no body text). The cover IS the hook. - **Content slides (slides 2..N-1)**: each carries ONE point. Format: small running head + headline (24–48px) + brief body (1–3 sentences). Numbered ordinal in marginalia. Slides build on each other. - **Closing (slide N)**: the action — read the full piece, subscribe, follow, etc. Either chrome-led with explicit CTA OR inverse-text with the CTA carved as the dominant element. ### 6. Verify - [ ] All N canvases at exact 1080×1080 - [ ] Cover archetype documented AND distinct from content archetype - [ ] Content slides consistent in archetype (so they read as a series) - [ ] Closing slide has clear action / next step - [ ] Slide folios (01/05, 02/05, etc.) on every slide for orientation - [ ] **Read `../../design-anti-patterns.md` and verify the artifact violates none of its rules.** Pay special attention to sections 2 (no italics-emphasis OR single-word color emphasis), 4 (architecture must reach inner blocks; no top-metadata-row eyebrow disguise), 5 (no editorial-cosplay markers unless brand-earned), and 7 (cross-artifact rules) - [ ] Type-accent (one word in `--color-accent`) appears AT MOST once across the whole carousel — typically on the cover or closing - [ ] Companion text drafted (LinkedIn post or IG caption) accompanies the file in an HTML comment > Carousel artifact at `./design//artifacts/carousel-YYYY-MM-DD-.html`. > > Variations: cover `` · content `` · closing `` · color ``. > > Export: open in browser → DevTools → device toolbar → 1080×1080 viewport → screenshot each `.canvas` separately. Upload as multi-slide post in LinkedIn or Instagram in slide-folio order. ## Anti-Slop Rules Governed by three shared canonical references — read them, do not restate them: - **`../../design-anti-patterns.md`** — the hard floor. Wins every conflict. - **`../../design-principles.md`** — the craft floor (typographic hierarchy, spatial rhythm, color theory, layout logic, visual tension). - **`../../design-variation-sop.md`** — the named-aesthetic roster + the procedure for varying every invocation. **Forbidden (fast scan — the references hold the full list):** - Indigo/violet/purple as default accent or primary — the `hsl(230–280)` family on a near-white surface. The single loudest AI tell. - Purple→blue / "aurora" / gradient-mesh backgrounds; gradient-fill text. - Glassmorphism without an explicit AA-contrast scrim; floating gradient "blobs" as atmosphere. - The three-up icon-card feature grid; the "hero → 3 cards → CTA" median skeleton. - One global border-radius on every element; timid evenly-weighted low-contrast palette. - Inter / Roboto / Arial / Open Sans / Lato / Helvetica / system as the primary family (Space Grotesk = yellow flag). Use a category-matched stack from the variation roster. - Value-free CTAs ("Get Started", "Learn More", "Sign Up"); the two-CTA hero. Name the real action and its value. **Required variation (every invocation):** - Make at least **two** intentional decisions that differ from the safe defaults (palette, layout structure, typographic voice, or spatial density) AND from the most recent artifact in this brand. - Never default to "clean / minimal / modern" — that is the absence of a direction (variation-sop Rule 1). - Sketch **three distinct directions**, offer them as a one-line menu, generate the best-fit by default, all three only if asked (variation-sop Rule 3). **Authenticity:** prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders. ## Rules - **Pixel exactness on every slide.** 1080×1080, no flex. - **Cover and closing get the most distinctive treatments.** Middle slides serve content; bookends serve attention. - **Slide folios mandatory.** Each slide gets its position marker (01/05, 02/05) — readers need orientation in carousel UIs. - **Companion text included.** LinkedIn or IG caption drafted for the post body. - **Token-pure.** Every visual value via `var(--*)` from tokens.css. - **Anti-pattern compliance.** This skill defers to three shared canonical references: `../../design-anti-patterns.md` (the hard floor — wins every conflict), `../../design-principles.md` (the craft floor), and `../../design-variation-sop.md` (direction roster + offer-3 procedure). The anti-patterns file is the canonical anti-tell list.