agentsclimarketplace

Linkedin carousel forge

Skill fullREFIT/skills/skills/linkedin-carousel-forge

Practical open-source agent skills with working examples, validation, and guides for first-time users and technical operators

Install
npx -y skills add fullREFIT/skills --skill linkedin-carousel-forge

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 12 days oldThe repository was created 12 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.md

26.4 KB, ~7.0k tokens by cl100k_base, as published. Nobody here has run it

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
  2. Output Types
  3. Carousel Production Workflow
  4. Infographic Production Workflow
  5. Slide Architecture
  6. Rendering Pipeline
  7. Quality Verification
  8. Bundled Resources

Prerequisites

Required tools: Python 3, Playwright (Chromium), img2pdf (pip).

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 <link> tag in every slide. Playwright fetches them at render time. Fallbacks: Poppins → DejaVu Sans Mono.


Default Brand System

Color Palette

ElementHexUsage
Carbon (Primary Dark)#121010Dark backgrounds, typography on light
Forge Red (Accent)#D43B2AHeadlines, CTAs, emphasis
Forge Gold (Highlight)#FFB400Accent bars, highlights (dark backgrounds only)
Ash (Light)#F2F0EELight backgrounds, negative space
Forge Dark (Medium)#333130Secondary text, borders

Typography

ElementFontWeightUsage
HeadlinesOutfitBold (700)Slide titles, major statements
BodyOutfitRegular (400)Body text, descriptions
MonospaceJetBrains MonoRegularCode, 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

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
  <style>
    /* BRAND TOKENS — update from config.example.md to match your brand */
    :root {
      --carbon: #121010;
      --forge-red: #D43B2A;
      --forge-gold: #FFB400;
      --ash: #F2F0EE;
      --off-white: #F2F0EE; /* canonical alias — same value as --ash */
      --dark: #333130;
      --echo: #878E88;
    }
    /* CRITICAL COLOR RULE: body text is ALWAYS --ash (#F2F0EE). Never --echo (#878E88).
       Echo is only for slide counter and structural navigation labels.
       To de-emphasize text: use smaller font size at off-white, not grey at same size. */
    body {
      font-family: Outfit, sans-serif;
      background-color: var(--carbon);
      color: white;
      margin: 0;
      padding: 40px;
      width: 1080px;
      height: 1080px;
    }
    h1 {
      color: var(--forge-red);
      font-weight: 700;
    }
    .accent-bar {
      background-color: var(--forge-gold);
      height: 4px;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <!-- Slide content here -->
</body>
</html>

Output Types

This skill produces two output types:

TypeFormatLinkedIn Upload MethodDimensions
CarouselMulti-page PDF (8-12 slides per post)New post → Document icon → Upload PDF1080x1080px per slide
InfographicSingle-page PDF or PNGNew post → Image icon → Upload1080x1350px (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 PositionPurposeTemplate 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 problemdata-reveal or comparison — Stats, before/after, what's broken
Slide 3 (Mechanism)Show what the solution looks likesystem-display or list-steps — How it works, what was built
Slide 4 (Proof)Evidence it works — stories, numbers, outcomesstory-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 layerAny 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 section. Use the component library in 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:

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

TypeBest ForDimensionsLayout
Data SnapshotStats, metrics, comparisons1080x1350px (portrait)2-3 data blocks with headline
Process MapStep-by-step workflows1080x1350px (portrait)Numbered steps with icons/descriptions
ComparisonBefore/after, option A vs B1080x1080px (square)Two-column layout
ChecklistActionable lists, evaluation criteria1080x1350px (portrait)Numbered or checked items
Quote CardThesis statement, key insight1080x1080px (square)Large centered text, minimal elements
Proof PointCase result, engagement metric1080x1080px (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

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):

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { width:1080px; height:1080px; overflow:hidden; font-family:Outfit,sans-serif; }
</style>
</head>
<body>
<div style="width:1080px; height:1080px; background:#121010; position:relative;">

  <!-- HEADER -->
  <div style="position:absolute; top:60px; left:80px; right:80px; display:flex; justify-content:space-between; align-items:center;">
    <!-- Wordmark left, slide counter right -->
  </div>

  <!-- CONTENT ZONE — vertically centered via flex -->
  <div style="position:absolute; top:140px; left:80px; right:80px; bottom:140px; display:flex; align-items:center;">
    <div style="width:100%;">
      <!-- Slide-specific content here -->
    </div>
  </div>

  <!-- FOOTER -->
  <div style="position:absolute; bottom:60px; left:80px; right:80px; display:flex; justify-content:space-between; align-items:flex-end;">
    <!-- Wordmark left, tagline right -->
  </div>

</div>
</body></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):

<span style="font-family:Outfit,sans-serif; font-weight:400; font-size:22px; letter-spacing:-0.01em; color:#F2F0EE;">
  <span style="font-weight:400;">full</span><span style="color:#D43B2A;">/</span><span style="font-weight:700; letter-spacing:0.1em;">REFIT</span>
</span>

Slide counter (top right):

<div style="font-family:'JetBrains Mono',monospace; font-weight:600; font-size:18px; color:#878E88; letter-spacing:0.04em;">01 / 05</div>

Footer tagline — SYSTEMS BUILT. in Ash white, TEAMS EQUIPPED. in Forge Gold:

<div style="font-family:'JetBrains Mono',monospace; font-weight:500; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;">
  <span style="color:#F2F0EE;">SYSTEMS BUILT.</span> <span style="color:#FFB400;">TEAMS EQUIPPED.</span>
</div>

Gold label (section category, JetBrains Mono):

<div style="font-family:'JetBrains Mono',monospace; font-weight:600; font-size:20px; letter-spacing:0.12em; color:#FFB400; text-transform:uppercase; margin-bottom:26px;">LABEL TEXT</div>

Red divider bar:

<div style="width:100px; height:6px; background:#D43B2A; margin-bottom:44px;"></div>

Template Types

Five production-ready slide templates.


1. hook — The scroll-stopper. Gold label + big headline + red bar + grey sub + gold statement.

<!-- Gold label -->
<div style="font-family:'JetBrains Mono',monospace; font-weight:600; font-size:20px; letter-spacing:0.12em; color:#FFB400; text-transform:uppercase; margin-bottom:26px;">AI OPERATIONS</div>
<!-- Headline: 92px, weight 900 -->
<div style="font-family:Outfit,sans-serif; font-weight:900; font-size:92px; color:#F2F0EE; letter-spacing:-0.03em; line-height:1.06; margin-bottom:32px;">9 subscriptions.<br>Zero workflows.</div>
<!-- Red bar -->
<div style="width:100px; height:6px; background:#D43B2A; margin-bottom:44px;"></div>
<!-- Sub text: 40px, off-white (#F2F0EE) — body text is never grey -->
<div style="font-family:Outfit,sans-serif; font-weight:400; font-size:40px; color:#F2F0EE; line-height:1.4; margin-bottom:28px;">The pattern at every 10–30 person company.</div>
<!-- Gold statement: 34px -->
<div style="font-family:Outfit,sans-serif; font-weight:700; font-size:34px; color:#FFB400; line-height:1.4;">Zero of them are actually inside the business.</div>

Font sizes: label 20px, headline 92px/900, sub 40px/400/off-white (#F2F0EE), gold 34px/700.


2. bullets — Problem/insight with arrow-bulleted list. Gold label + headline + 3 arrow items + gold statement.

<!-- Headline: 50px, weight 700 -->
<div style="font-family:Outfit,sans-serif; font-weight:700; font-size:50px; color:#F2F0EE; letter-spacing:-0.02em; line-height:1.15; margin-bottom:40px;">Three costs. One invoice.</div>
<!-- Arrow item (repeat 3×) -->
<div style="display:flex; align-items:flex-start; margin-bottom:30px;">
  <div style="color:#D43B2A; font-size:30px; margin-right:18px; margin-top:2px; flex-shrink:0;">→</div>
  <div style="font-family:Outfit,sans-serif; font-weight:400; font-size:30px; color:#F2F0EE; line-height:1.4;">The subscription — visible, budgeted, accepted</div>
</div>
<!-- Gold statement: 32px -->
<div style="margin-top:10px; font-family:Outfit,sans-serif; font-weight:700; font-size:32px; color:#FFB400; line-height:1.4;">The subscription is always the cheapest part.</div>

Font sizes: headline 50px/700, arrow 30px, gold 32px/700.


3. system — Mechanism/how-it-works. Gold label + headline + 3 left-bordered items with sub-text + gold statement.

<!-- Headline: 54px, weight 700, multi-line -->
<div style="font-family:Outfit,sans-serif; font-weight:700; font-size:54px; color:#F2F0EE; letter-spacing:-0.02em; line-height:1.12; margin-bottom:36px;">Tools require workflows.<br>Workflows require owners.</div>
<!-- Border item (repeat 3×, border color alternates Red/Red/Red or Red/Gold) -->
<div style="border-left:5px solid #D43B2A; padding-left:24px; margin-bottom:30px;">
  <div style="font-family:Outfit,sans-serif; font-weight:700; font-size:28px; color:#F2F0EE; line-height:1.3;">Name the specific workflow each tool lives inside</div>
  <div style="font-family:Outfit,sans-serif; font-weight:400; font-size:22px; color:#F2F0EE; line-height:1.4; margin-top:8px;">Not 'sales productivity' — actual documented steps</div>
</div>
<!-- Gold statement: 32px -->
<div style="margin-top:10px; font-family:Outfit,sans-serif; font-weight:700; font-size:32px; color:#FFB400; line-height:1.4;">If you can't name the workflow, you're paying for a placeholder.</div>

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.

<!-- Headline: 52px, weight 700 -->
<div style="font-family:Outfit,sans-serif; font-weight:700; font-size:52px; color:#F2F0EE; letter-spacing:-0.02em; line-height:1.12; margin-bottom:36px;">Pull your subscription list.</div>
<!-- Dark card -->
<div style="background:#333130; border-radius:16px; padding:44px; border-left:6px solid #D43B2A; margin-bottom:30px;">
  <div style="font-family:Outfit,sans-serif; font-weight:700; font-size:30px; color:#F2F0EE; line-height:1.3; margin-bottom:16px;">For every tool without a named workflow:</div>
  <div style="font-family:Outfit,sans-serif; font-weight:400; font-size:26px; color:#F2F0EE; line-height:1.5;">Cut it or build the workflow around it now.</div>
</div>
<!-- Red closing statement: 32px -->
<div style="font-family:Outfit,sans-serif; font-weight:700; font-size:32px; color:#D43B2A; line-height:1.4;">Two choices per tool. No third option.</div>

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.

<div style="text-align:center;">
  <!-- Large wordmark: 40px -->
  <div style="margin-bottom:32px;"><!-- wordmark at 40px --></div>
  <!-- Bar centered -->
  <div style="width:100px; height:6px; background:#D43B2A; margin:0 auto 36px auto;"></div>
  <!-- Headline: 52px, weight 700 -->
  <div style="font-family:Outfit,sans-serif; font-weight:700; font-size:52px; color:#F2F0EE; letter-spacing:-0.02em; line-height:1.2; max-width:840px; margin:0 auto;">Find out what your AI tools are actually costing you.</div>
  <!-- Body: 28px, off-white (#F2F0EE) — body text is never grey -->
  <div style="font-family:Outfit,sans-serif; font-size:28px; color:#F2F0EE; margin-top:28px; line-height:1.5; max-width:760px; margin-left:auto; margin-right:auto;">The Team AI Cost Calculator. Enter your tools, team size, and usage patterns.</div>
  <!-- Red button: 28px -->
  <div style="display:inline-block; margin-top:44px; padding:24px 56px; background:#D43B2A; border-radius:14px; font-family:Outfit,sans-serif; font-weight:700; font-size:28px; color:#FFFFFF;">Run the free calculation</div>
  <!-- Gold link line: 26px -->
  <div style="margin-top:26px; font-family:Outfit,sans-serif; font-weight:600; font-size:26px; color:#FFB400;">(Link in the first comment)</div>
</div>

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 <link> tag (with 500ms wait before screenshot)
  • gap, grid, any modern CSS

Always:

  • Inline styles on every element (no <style> blocks in body, no external CSS)
  • wait_for_timeout(500) in Playwright before screenshot (allows fonts to load)
  • overflow:hidden on the body to prevent any bleed

Rendering Pipeline

Requirements

DependencyInstallPurpose
Python 3Pre-installedScript runtime
Playwrightpip install playwright && playwright install chromiumHTML → PNG rendering
img2pdfpip install img2pdfPNG → PDF assembly

Production Script Pattern

#!/usr/bin/env python3
import img2pdf
from pathlib import Path
from datetime import datetime
from playwright.sync_api import sync_playwright

RUN_DIR = Path(f"_runs/run-{datetime.now().strftime('%Y%m%d-%H%M%S')}")

def render_slides(post_id, slides_dir, html_files):
    """Render a list of HTML files to PNGs and return PNG paths."""
    pngs = []
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": 1080, "height": 1080})
        for html_path in html_files:
            page.goto(f"file://{Path(html_path).absolute()}")
            page.wait_for_timeout(500)  # Google Fonts load time
            png_path = Path(html_path).with_suffix(".png")
            page.screenshot(path=str(png_path),
                            clip={"x": 0, "y": 0, "width": 1080, "height": 1080})
            pngs.append(png_path)
        browser.close()
    return pngs

def build_pdf(pngs, output_path):
    with open(output_path, "wb") as f:
        f.write(img2pdf.convert([str(p) for p in pngs]))

Run Structure

Each generation run is isolated in a timestamped directory:

_runs/
  run-20260421-005613/
    F01-ai-subscriptions-zero-workflows/
      slides/
        slide-01.html
        slide-01.png
        ...
      F01-carousel.pdf

Output is copied to output-v1/ after generation. Each post folder in output-v1 should contain:

  • F##-carousel.pdf — the upload-ready carousel
  • F##-post.md — the LinkedIn post text (frontmatter + body)
  • slides/ — individual PNG slides for reference

Quality Verification

Legibility Test

Open the PDF at 50% zoom. If any text is unreadable, it will be unreadable in the LinkedIn feed. Fix before delivery.

Stranger Test

Show any slide to someone who has never heard of full/REFIT. Ask: "What is this about?" If they can't answer in 5 seconds, the slide fails. Rewrite.

Brand Compliance

ElementRequirementVerification
BackgroundCarbon Core #121010Visual check
Card backgroundsForge Dark #333130Used inside story/system cards only
Primary accentForge Red #D43B2AArrow bullets, bar, card borders, CTA button
Secondary accentForge Gold #FFB400Labels, gold statements, link-in-comment, TEAMS EQUIPPED.
Ash white#F2F0EEPrimary text, SYSTEMS BUILT. in footer tagline
Echo grey#878E88Slide counter, t-label only — never body text
Primary fontOutfit (fallback: Poppins)Weight 400/700/900
Mono fontJetBrains Mono (fallback: DejaVu Sans Mono)Labels, slide counter, footer tagline
Wordmark"full" Outfit Regular (400) full-opacity white + "/" in Forge Red + "REFIT" Outfit Bold (700)In header AND footer of every slide
Footer tagline"SYSTEMS BUILT." in #F2F0EE + "TEAMS EQUIPPED." in #FFB400Every slide
Gold on every slideAt least one Forge Gold element per slideLabels, gold statements, or tagline counts
No italicsAnywhereZero tolerance
No emojisAnywhereZero tolerance
No gradientsAs primary treatmentsZero tolerance

Bundled Resources

FilePurposeWhen to Load
references/slide-system.mdComplete HTML/CSS for all 7 slide templates, component library, wkhtmltoimage-compatible patternsEvery carousel or infographic build
references/content-strategy-guide.mdPain point → narrative arc mapping, CTA assignment rules, ICA symptom cluster targetingWhen planning carousel content strategy
references/manual-render-guide.mdStep-by-step rendering without the script (browser screenshots, external tools)When wkhtmltoimage is unavailable
scripts/render-carousel.pyPython script: HTML → PNG → PDF pipelineEvery render operation
assets/post-text-templates.mdLinkedIn post caption templates with CTA formatting and hashtag rulesWhen writing the post text that accompanies the carousel
(your own production reference)Governing production reference: folder structure, frontmatter schema, CTA rotation rules, quality checklist, publishing stepsWhen producing a complete paired post package (PDF + text)

LinkedIn Carousel Forge v2.1 — May 2026 Updated: Playwright rendering, 5-template system, correct font scales, footer color split Conformant to agentskills.io open standard (December 2025)

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.