create-html-carousel

> **Deprecated:** This skill is superseded by `goose-graphics`. See `skills/composites/goose-graphics/` (install with `npx goose-skills install goose-graphics`). The carousel format is one of seven formats in the newer skill and supports 36 style presets plus image sourcing and PNG export. This skill is retained for one release cycle before removal.

# LinkedIn Carousel Creator

Create stunning LinkedIn carousel posts as PNG images. This skill generates styled HTML slides optimized for square format (1080×1080px), then automatically screenshots each slide for direct upload to LinkedIn.

## Core Philosophy

1. **LinkedIn-First Design** — Square format (1080×1080px), optimized for mobile feed viewing
2. **Informational Content** — Tips, workflows, lists, frameworks (not presentations)
3. **Consistent Styling** — Reuse proven design systems from frontend-slides
4. **Automated Export** — Generate HTML → Screenshot → PNG files ready for LinkedIn
5. **Viewport Perfect** — Every slide must fit exactly in 1080×1080px without scrolling

---

## LinkedIn Carousel Specs

**Format:** Square (1080×1080px)

- **Aspect ratio:** 1:1
- **File format:** PNG (recommended) or JPG
- **File size:** Under 10MB per image
- **Max slides:** 10 images per carousel
- **Ideal slide count:** 5-8 slides (best engagement)

**Content Structure:**

1. **Cover slide** — Hook + title + your brand
2. **Content slides** — One key point per slide (3-6 slides)
3. **Closing slide** — CTA / summary / follow prompt

---

## When to Use This Skill

Use for LinkedIn carousel posts like:

- "5 AI GTM workflows you should be using"
- "How to build X: A step-by-step guide"
- "7 mistakes founders make with Y"
- "The complete framework for Z"
- "Before & After: How we 10x'd our metrics"

**NOT for:**

- Long-form presentations (use frontend-slides)
- Video content
- Single-image posts

---

## Workflow Overview

```
1. Content Input → User provides topic/outline
2. Style Selection → Choose visual style (or preview options)
3. HTML Generation → Create 1080×1080px HTML slides
4. Screenshot → Auto-capture each slide as PNG
5. Delivery → Folder of PNG files ready for LinkedIn upload
```

---

## Phase 1: Content Discovery

### Step 1.1: Get Topic & Structure

Ask the user:

**Question 1: What's the topic?**

- Header: "Topic"
- Question: "What's the main topic of this carousel?"
- (Free text input)

**Question 2: Content Type**

- Header: "Format"
- Question: "What type of post is this?"
- Options:
  - "Numbered list" — "5 ways to...", "7 mistakes...", "3 steps to..."
  - "How-to guide" — Step-by-step tutorial or process
  - "Framework" — Concept explanation with structure
  - "Before/After" — Transformation or case study
  - "Insights/Tips" — Collection of advice or learnings

**Question 3: Slide Count**

- Header: "Length"
- Question: "How many slides?"
- Options:
  - "Short (5-6)" — Quick, punchy (best for mobile scrolling)
  - "Medium (7-8)" — Standard carousel length
  - "Long (9-10)" — Maximum LinkedIn allows

**Question 4: Branding Handle**

- Header: "Brand"
- Question: "What handle or name should appear on each slide?"
- (Free text input — e.g., "@yourhandle", "Acme Inc", or leave blank for none)

**Question 5: Content Ready?**

- Header: "Content"
- Question: "Do you have the content written?"
- Options:
  - "Yes, I have all content" — Paste it in
  - "I have bullet points" — Need light formatting
  - "Just the topic" — Need help outlining

If user has content, ask them to share it.

### Content Density Rules for LinkedIn

Each slide should be **scannable in 2-3 seconds** on mobile:

| Slide Type | Max Content                                              |
| ---------- | -------------------------------------------------------- |
| Cover      | Title (1 line) + subtitle (1 line) + branding            |
| List item  | Number/icon + heading (2 lines max) + body (3 lines max) |
| Framework  | Diagram/visual + 2-4 labels                              |
| Quote/Stat | 1 large stat or quote + context                          |
| CTA        | 1 action + visual element                                |

**If content exceeds limits:** Break into multiple slides or simplify.

---

## Phase 2: Style Selection

Users can choose styles two ways:

### Option A: Direct Selection (Faster)

Show preset picker:

**Question: Pick a Style**

- Header: "Style"
- Question: "Which visual style works best for your content?"
- Options:
  - "Bold Signal" — High-contrast card on dark, confident
  - "Dark Botanical" — Elegant dark with soft abstract shapes
  - "Notebook Tabs" — Editorial cream paper with colorful tabs
  - "Pastel Geometry" — Friendly pastels with decorative pills
  - "Neon Cyber" — Futuristic tech aesthetic
  - "Split Pastel" — Playful two-tone split design

(See STYLE_PRESETS.md for full details on each style)

### Option B: Guided Discovery

If user isn't sure, ask:

**Question: Audience & Tone**

- Header: "Vibe"
- Question: "Who's your audience and what tone?"
- Options:
  - "Professional/Corporate" → Recommend: Bold Signal, Dark Botanical
  - "Creative/Playful" → Recommend: Split Pastel, Pastel Geometry
  - "Technical/Dev-focused" → Recommend: Neon Cyber, Terminal Green
  - "Elegant/Premium" → Recommend: Dark Botanical, Paper & Ink

Then generate 2-3 preview slides and let user pick.

---

## Phase 3: Generate HTML Carousel

### File Structure

All carousel files (HTML source and PNG exports) are saved to the shared assets directory.

```
[carousel-name]/
├── index.html              # Full carousel (all slides)
├── slides/
│   ├── slide-01.html       # Individual slide pages
│   ├── slide-02.html
│   └── ...
└── exports/
    ├── slide-01.png        # Screenshots (generated in Phase 4)
    ├── slide-02.png
    └── ...
```

### HTML Architecture for 1080×1080px

**CRITICAL: LinkedIn carousel slides are SQUARE (1:1 ratio), not widescreen.**

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewpo