# Linkedin Carousel Forge
> Produce LinkedIn carousel PDFs and infographic PDFs using a configurable design system. Handles the full pipeline: content strategy (pain point mapping, narrative arc, slide sequencing), slide design (typographic posters, data comparisons, before/after layouts, CTA slides), HTML rendering, and PDF export. Outputs are upload-ready for LinkedIn's document carousel format. Also creates standalone infographic PDFs for single-image posts. Self-contained with complete brand system included — configure brand tokens in config.example.md. MANDATORY TRIGGERS: LinkedIn carousel, carousel post, carousel PDF, LinkedIn slides, infographic, infographic PDF, social graphic, LinkedIn graphic, carousel design, LinkedIn PDF, slide deck, branded slides, social media graphic, branded carousel.
- Skill: `fullrefit/linkedin-carousel-forge` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add fullrefit/linkedin-carousel-forge`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fullrefit/linkedin-carousel-forge/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: fullREFIT (https://skillmd.com/u/fullrefit)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fullrefit/linkedin-carousel-forge
---
# LinkedIn Carousel Forge
Produce upload-ready LinkedIn carousel PDFs and infographic PDFs with your brand design system. Handles content strategy, slide design, rendering, and PDF assembly.
## Table of Contents
1. [Prerequisites](#prerequisites)
2. [Output Types](#output-types)
3. [Carousel Production Workflow](#carousel-production-workflow)
4. [Infographic Production Workflow](#infographic-production-workflow)
5. [Slide Architecture](#slide-architecture)
6. [Rendering Pipeline](#rendering-pipeline)
7. [Quality Verification](#quality-verification)
8. [Bundled Resources](#bundled-resources)
---
## Prerequisites
**Required tools:** Python 3, Playwright (Chromium), `img2pdf` (pip).
```bash
pip install playwright img2pdf
playwright install chromium
```
**Rendering engine:** Playwright Chromium screenshot at 1080×1080px. `wkhtmltoimage` is deprecated, removed from Homebrew, and must NOT be used. Playwright supports flexbox, grid, Google Fonts CDN — use them freely.
**Brand system:** Default design system included below. Configure brand tokens in `config.example.md` to match your brand.
**Fonts:** Load Outfit + JetBrains Mono via Google Fonts `` tag in every slide. Playwright fetches them at render time. Fallbacks: Poppins → DejaVu Sans Mono.
---
## Default Brand System
### Color Palette
| Element | Hex | Usage |
|---------|-----|-------|
| **Carbon** (Primary Dark) | `#121010` | Dark backgrounds, typography on light |
| **Forge Red** (Accent) | `#D43B2A` | Headlines, CTAs, emphasis |
| **Forge Gold** (Highlight) | `#FFB400` | Accent bars, highlights (dark backgrounds only) |
| **Ash** (Light) | `#F2F0EE` | Light backgrounds, negative space |
| **Forge Dark** (Medium) | `#333130` | Secondary text, borders |
### Typography
| Element | Font | Weight | Usage |
|---------|------|--------|-------|
| **Headlines** | Outfit | Bold (700) | Slide titles, major statements |
| **Body** | Outfit | Regular (400) | Body text, descriptions |
| **Monospace** | JetBrains Mono | Regular | Code, data, technical content |
**Google Fonts:** Load Outfit from Google Fonts CDN. Fallback: Poppins.
### Design Rules
- **No italics** in any text
- **No emojis** anywhere
- **Dark backgrounds** use Forge Gold sparingly (accent bars only)
- **Light backgrounds** use Carbon for text
- **Minimum contrast:** 4.5:1 (WCAG AA)
- **Logo:** PNG with transparent background, black text with red accent slash
### Example HTML Template
```html
```
---
## Output Types
This skill produces two output types:
| Type | Format | LinkedIn Upload Method | Dimensions |
|------|--------|----------------------|------------|
| **Carousel** | Multi-page PDF (8-12 slides per post) | New post → Document icon → Upload PDF | 1080x1080px per slide |
| **Infographic** | Single-page PDF or PNG | New post → Image icon → Upload | 1080x1350px (portrait) or 1080x1080px (square) |
Both types use the configured design system exclusively. No deviations.
---
## Carousel Production Workflow
```
STEP 1: CONTENT STRATEGY
Input: Topic, pain point(s), target cluster
Output: Slide-by-slide narrative arc
↓
STEP 2: SLIDE DESIGN
Input: Narrative arc
Output: HTML files (one per slide, 1080x1080px)
↓
STEP 3: RENDER
Input: HTML files
Output: PNG images (via wkhtmltoimage)
↓
STEP 4: ASSEMBLE
Input: PNG images
Output: Single PDF file (upload-ready)
↓
STEP 5: VERIFY
Input: PDF + original brief
Output: Pass/fail against quality checklist
```
### Step 1: Content Strategy
**Slide density rule:** Target 8-12 slides per carousel. Optimal is 10. Split multi-point slides — a hook + problem comparison + 3 mechanism items should be 3 slides, not 1. Every slide covers exactly one idea. When in doubt, split.
Every carousel tells a story across 8-12 slides. Map the narrative arc before designing:
| Slide Position | Purpose | Template Type |
|---------------|---------|---------------|
| **Slide 1** (Hook) | Stop the scroll. Name the pain. Create tension. | `hook` — Bold statement, big typography, minimal elements |
| **Slide 2** (Problem) | Quantify or dramatize the problem | `data-reveal` or `comparison` — Stats, before/after, what's broken |
| **Slide 3** (Mechanism) | Show what the solution looks like | `system-display` or `list-steps` — How it works, what was built |
| **Slide 4** (Proof) | Evidence it works — stories, numbers, outcomes | `story-card` or `data-reveal` — Real results, specific examples |
| **Slide 5** (CTA) | Clear next step with "(Link in the first comment)" | `cta` — Headline + description + button + gold link-in-comment line |
| **Slide 6** (Optional) | Additional proof or the enablement layer | Any template type |
**Narrative arc rules:**
- Slide 1 must be understood by a total stranger in 2 seconds
- No internal jargon anywhere (no pain point numbers, no cluster labels, no "Layer 1/Layer 2" naming)
- Every slide must pass the stranger test: a CEO scrolling LinkedIn at 7am understands it without context
- The Forge Red / Forge Gold color encoding communicates the two-layer model visually without naming it
- Final slide always includes "(Link in the first comment)" in Forge Gold text below the CTA button
### Step 2: Slide Design
Design each slide as self-contained HTML. Follow the slide architecture in the [Slide Architecture](#slide-architecture) section. Use the component library in [`references/slide-system.md`](references/slide-system.md) for exact CSS patterns.
**Critical design rules:**
- Minimum text size: 18px at 1080px render width (anything smaller is illegible in LinkedIn feed)
- Maximum text per slide: ~40 words (this is a visual medium, not a document)
- Dark backgrounds only (Carbon Core `#121010` or Forge Dark `#333130`)
- No gradients, no stock imagery, no AI clichés
- Section labels in JetBrains Mono uppercase only when buyer-facing (never internal taxonomy)
- Wordmark + tagline in footer of every slide
### Step 3-4: Render and Assemble
Use Playwright to render each HTML slide to PNG, then assemble with img2pdf:
```python
from playwright.sync_api import sync_playwright
import img2pdf
from pathlib import Path
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={"width": 1080, "height": 1080})
for html_file in sorted(Path("slides/").glob("slide-*.html")):
page.goto(f"file://{html_file.absolute()}")
page.wait_for_timeout(500) # allow Google Fonts to load
page.screenshot(path=str(html_file.with_suffix(".png")),
clip={"x": 0, "y": 0, "width": 1080, "height": 1080})
browser.close()
pngs = sorted(Path("slides/").glob("slide-*.png"))
with open("carousel.pdf", "wb") as f:
f.write(img2pdf.convert([str(p) for p in pngs]))
```
The `wait_for_timeout(500)` is required to let Google Fonts load before the screenshot.
### Step 5: Verify
Run the quality checklist against every carousel before delivery:
- [ ] Every slide legible at 550px width (LinkedIn desktop feed size)
- [ ] No text below 20px at 1080px render
- [ ] Content fills ~65-75% of the available slide area — no large dead zones
- [ ] No internal jargon — passes stranger test
- [ ] Brand palette exact (hex values from config.example.md)
- [ ] At least one accent color element on every slide
- [ ] Brand wordmark in header AND footer of every slide — see config.example.md for your wordmark format
- [ ] Footer tagline matches your brand config
- [ ] CTA slide includes "(Link in the first comment)" in Forge Gold
- [ ] PDF opens correctly and each page is a separate slide
- [ ] Total file size under 10MB (LinkedIn limit for document uploads)
---
## Infographic Production Workflow
Infographics are single-page visual assets for LinkedIn image posts (not carousels).
### Infographic Types
| Type | Best For | Dimensions | Layout |
|------|----------|-----------|--------|
| **Data Snapshot** | Stats, metrics, comparisons | 1080x1350px (portrait) | 2-3 data blocks with headline |
| **Process Map** | Step-by-step workflows | 1080x1350px (portrait) | Numbered steps with icons/descriptions |
| **Comparison** | Before/after, option A vs B | 1080x1080px (square) | Two-column layout |
| **Checklist** | Actionable lists, evaluation criteria | 1080x1350px (portrait) | Numbered or checked items |
| **Quote Card** | Thesis statement, key insight | 1080x1080px (square) | Large centered text, minimal elements |
| **Proof Point** | Case result, engagement metric | 1080x1080px (square) | Big number + context |
### Infographic Design Rules
All carousel design rules apply, plus:
- Portrait infographics (1080x1350) get more vertical breathing room — use it
- The infographic must communicate one idea completely in one image
- Include your brand wordmark and tagline in footer (see config.example.md)
- For text-heavy infographics (checklists, process maps), use JetBrains Mono for numbering and Outfit for body text
- Always include a CTA line at the bottom: "(Link in the first comment)" in your accent color, plus your CTA URL from config.example.md when the CTA is a resource (lead magnet, tool, prompt kit).
### Rendering Infographics
```bash
python scripts/render-carousel.py --input-dir ./html/ --output infographic-name.pdf --height 1350
```
Use `--height 1350` for portrait format, omit for square (defaults to 1080).
---
## Slide Architecture
### Slide System
Every slide is a 1080×1080px HTML page with this base structure:
```
┌──────────────────────────────────────┐
│ HEADER (wordmark + slide counter) │ top: 60px
│ │
│ ┌────────────────────────────────┐ │
│ │ │ │
│ │ CONTENT ZONE │ │ top:140px → bottom:140px
│ │ (vertically centered │ │ display:flex; align-items:center
│ │ via flexbox) │ │
│ │ │ │
│ └────────────────────────────────┘ │
│ │
│ FOOTER (wordmark + tagline) │ bottom: 60px
└──────────────────────────────────────┘
Background: Carbon Core #121010
Side padding: 80px left/right
```
**Base HTML skeleton (Playwright-compatible):**
```html
```
**Why this layout:** `position:absolute` with fixed top/bottom creates a bounded content zone (800px tall). `display:flex; align-items:center` vertically centers the content block, distributing dead space equally above and below — the correct design pattern for minimal typographic posters.
### Shared Components
**Wordmark** (header and footer):
```html
full/REFIT
```
**Slide counter** (top right):
```html
01 / 05
```
**Footer tagline** — SYSTEMS BUILT. in Ash white, TEAMS EQUIPPED. in Forge Gold:
```html
Not 'sales productivity' — actual documented steps
If you can't name the workflow, you're paying for a placeholder.
```
Font sizes: headline 54px/700, item title 28px/700, item sub 22px/400/off-white (#F2F0EE), gold 32px/700.
---
**4. `story`** — Proof/test. Gold label + headline + dark card + red closing statement.
```html
Pull your subscription list.
For every tool without a named workflow:
Cut it or build the workflow around it now.
Two choices per tool. No third option.
```
Font sizes: headline 52px/700, card title 30px/700, card body 26px/400, red close 32px/700.
---
**5. `cta`** — Call to action. Centered layout with wordmark, bar, headline, body, button, gold link line.
```html
Find out what your AI tools are actually costing you.
The Team AI Cost Calculator. Enter your tools, team size, and usage patterns.
Run the free calculation
(Link in the first comment)
```
Font sizes: wordmark 40px, headline 52px/700, body 28px/off-white (#F2F0EE), button 28px/700, link-in-comment 26px/gold.
---
### Layout Rules (Playwright)
Playwright uses a full modern Chromium engine. All standard CSS works:
**Use freely:**
- `display:flex` and `flex-direction`, `align-items`, `justify-content`
- `position:absolute` with pixel offsets
- Google Fonts via `` tag (with 500ms wait before screenshot)
- `gap`, `grid`, any modern CSS
**Always:**
- Inline styles on every element (no `