Teach Your Claude Code to Design LinkedIn Carousels

# LinkedIn Carousel Design with Claude Code

## What This Skill File Does

This is a drop-in guide for creating LinkedIn carousels using Claude Code
and a JSON-based carousel system. No Canva. No design tools. Describe your
carousel topic in plain English, and Claude generates pixel-perfect slides
as HTML/CSS stored in a single `carousel.json` file.

## Prerequisites

- Claude Code (or any Claude-powered terminal)
- A monorepo with a `departments/marketing/carousels/` directory
- Optional: Carousel Studio (Vite + React viewer at `tools/carousel-studio/`)

## Carousel JSON Schema

Every carousel lives in a single `carousel.json` file:

    departments/marketing/carousels/
      {project-id}/
        carousel.json          # Source of truth
        .history/              # Auto-snapshots
        slides/
          0/alternatives/      # A/B test versions

### carousel.json structure

    {
      "id": "my-carousel-id",
      "title": "Carousel Title",
      "format": "carousel",              // "carousel" (1080x1350) or "presentation" (1920x1080)
      "theme": {
        "primary_color": "#FEBB02",
        "font_family": "Space Grotesk",
        "css_stylesheet": "/* .slide, .card, .pill-tag, .footer */"
      },
      "components": [
        { "component_type": "footer", "html_template": "{{index}}/{{total}}" }
      ],
      "slides": [
        {
          "id": "slide-01-cover",
          "slide_index": 0,
          "body_content": "<div class=\"slide-content\">...</div>",
          "alternatives": []
        }
      ]
    }

## Step-by-Step: Creating a Carousel

### Step 1: Define Your Topic and Audience

Before generating, decide:
- Topic: What's the carousel about?
- Audience: Who reads this?
- Hook: What stops the scroll?
- CTA: What should they do after reading?

### Step 2: Prompt Claude Code

    Create a LinkedIn carousel about "7 Lessons I Learned
    Spending $50k on AI Tools". Target audience: solopreneurs.
    Format: carousel (1080x1350). Slides: 10 total.
    Style: Bold neo-brutalist, yellow + black.

### Step 3: Preview in Carousel Studio

    cd tools/carousel-studio && pnpm dev
    # Opens http://localhost:5173 -- auto-refreshes every 2s

### Step 4: Edit Visually

- Drag elements to reposition
- Double-click text to edit inline
- Resize images via corner handles
- Layer controls for z-index ordering

### Step 5: Request Alternatives

    "Generate an alternative version of slide 3 that uses
     a terminal-card style instead of a plain card."

Claude adds the alternative to slides[2].alternatives[].
Compare versions in the studio. Pick the winner.

## Component Library

| Class             | What It Does                        |
|-------------------|-------------------------------------|
| .slide            | Outer container (1080x1350)         |
| .slide-content    | Inner flex wrapper                  |
| .card             | White card with border + shadow     |
| .pill-tag         | Rounded label/tag                   |
| .terminal-card    | Dark code-block style card          |
| .footer           | Bottom bar with author + page num   |
| .author-card      | Author info container               |

## Template Variables

| Variable    | Description                         |
|-------------|-------------------------------------|
| {{index}}   | Current slide number (1-based)      |
| {{total}}   | Total number of slides              |
| {{title}}   | Project title                       |

## LinkedIn Carousel Best Practices

1. Hook slide is everything -- bold number, controversial claim, or question
2. One idea per slide -- don't cram
3. Use slide 2 to set stakes -- create emotional investment
4. End with a clear CTA -- one action, not three
5. 8-12 slides is the sweet spot
6. High contrast -- bold colors and heavy fonts
7. Large text -- body 22px+, headlines 48px+
8. Consistent layout -- same header/footer across all slides

## Rules for Claude Code Agents

1. Always write the complete JSON -- never partial writes
2. Respect `is_locked` -- skip locked slides
3. Keep `slide_index` sequential (0, 1, 2...)
4. Update `updated_at` on every modification
5. Never replace `body_content` for alternatives -- use alternatives[] array
6. Use unique IDs: `alt-{8-char-hex}`