# Carousel Creator > Generate LinkedIn carousel slides as structured HTML files with brand styling - Skill: `ekatasingh1107/carousel-creator` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add ekatasingh1107/carousel-creator` - Raw SKILL.md: https://api.skillmd.com/api/skills/ekatasingh1107/carousel-creator/raw - Safety review: PASS (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: ekatasingh1107 (https://skillmd.com/u/ekatasingh1107) - Updated: 2026-08-19 - Page: https://skillmd.com/skills/ekatasingh1107/carousel-creator --- # Carousel Creator Generates LinkedIn carousel content structured as 8-12 slides with a hook, value slides, and CTA. Outputs each slide as a standalone HTML file with inline brand-color styling, sized for LinkedIn carousel dimensions (1080x1350px). The HTML files can be screenshot'd to PNG for upload. ## Prerequisites - `agency.config.json` at repo root with `agency`, `outreach`, `services`, and `case_studies` sections - Topic, raw content, or a brief describing what the carousel covers - Optional: brand colors override (defaults to config or neutral palette) - Optional: output directory for HTML files ## Phase 0: Intake 1. Read `agency.config.json` from the project root. 2. Extract: - `agency.name` -- for branding on final slide - `agency.founder` -- for attribution - `agency.domain` -- for CTA slide link - `outreach.tone` -- voice and style for copy - `outreach.banned_phrases` -- phrases to avoid - `services[]` -- for contextual relevance - `case_studies[]` -- for data-backed slides 3. Accept parameters: - `topic` -- (required) the carousel topic or headline - `source_content` -- (optional) raw text, blog post, or notes to structure into slides - `slide_count` -- number of slides. Default: 10. Range: 8-12 - `brand_colors` -- (optional) object with `primary`, `secondary`, `background`, `text` hex values. Default: dark background (#1a1a2e), white text (#ffffff), accent (#e94560) - `font_family` -- (optional) Google Font name. Default: "Inter" - `output_dir` -- directory to write HTML files. Default: `./carousel-output/` - `style` -- visual style: `dark` | `light` | `gradient` | `minimal`. Default: `dark` - `cta` -- call-to-action for final slide. Default: "Follow for more" + agency domain ## Phase 1: Content Structuring Transform the topic or source content into a slide-by-slide structure. Each slide must carry exactly one idea. **Slide architecture:** | Slide | Purpose | Content Rules | |-------|---------|---------------| | 1 | Hook | Bold statement, question, or surprising stat. Must stop the scroll. Max 10 words. | | 2 | Context | Set up the problem or frame the topic. 15-25 words. | | 3-8 | Value | One point per slide. Title (3-6 words) + body (15-30 words). | | 9-10 | Proof | Data point, case study result, or before/after. Numbers prominent. | | 11 | Summary | Key takeaway in one sentence. Optional: numbered recap. | | 12 | CTA | Clear action: follow, visit, DM, book a call. Brand name + handle. | **Content rules (non-negotiable):** - No slide exceeds 40 words total (title + body combined) - Hook slide (slide 1) must work without any context - Every value slide has a clear title that summarizes the point - Data slides lead with the number in large format - CTA slide includes agency name, domain, and specific next step - No filler slides -- every slide must deliver standalone value - If source content is provided, extract and restructure; do not summarize **Copy quality checks:** - Each slide must pass the "screenshot test" -- readable in a 2-second glance - Titles should be parallel in structure (all imperatives, all questions, or all statements -- pick one) - Remove all unnecessary words: no "that", "very", "really", "just", "basically" - Prefer concrete specifics over abstract generalities Compile the content plan: ``` CAROUSEL PLAN: --- Topic: [headline] Style: [dark/light/gradient/minimal] Slide count: [N] Title structure: [imperative/question/statement] --- Slide 1 (Hook): [text] Slide 2 (Context): [title] | [body] Slide 3 (Value): [title] | [body] ... Slide N (CTA): [text] ``` ## Phase 2: Visual Design System Define the design tokens for the carousel before generating HTML: **Color palette by style:** | Style | Background | Text | Accent | Secondary BG | |-------|-----------|------|--------|-------------| | dark | #1a1a2e | #ffffff | #e94560 | #16213e | | light | #ffffff | #1a1a2e | #e94560 | #f5f5f5 | | gradient | #0f0c29 to #302b63 | #ffffff | #24d2b5 | #24243e | | minimal | #fafafa | #2d2d2d | #0066ff | #eeeeee | Override with `brand_colors` if provided. **Typography scale:** - Hook slide title: 64px, font-weight 800 - Slide title: 42px, font-weight 700 - Slide body: 24px, font-weight 400, line-height 1.5 - Slide number: 18px, font-weight 600, accent color - CTA text: 36px, font-weight 700 - Attribution: 20px, font-weight 400 **Layout rules:** - Canvas size: 1080px x 1350px (4:5 LinkedIn ratio) - Padding: 80px on all sides - Content vertically centered - Slide number in top-right corner (except hook and CTA slides) - Agency logo/name in bottom-left corner (all slides except hook) - Accent bar (4px) at bottom of each slide ## Phase 3: HTML Generation Generate one HTML file per slide. Each file is self-contained with inline CSS. **HTML template structure per slide:** ```html
{{number}}/{{total}}
{{slide_title}}
{{slide_body}}
{{agency_name}}
``` **Slide-type variations:** - **Hook slide**: No slide number, no branding. Title at 64px, centered. Optional subtitle at 24px below. - **Value slides**: Slide number visible. Title + body layout. Optional icon placeholder. - **Data slides**: Large number (80px, accent color) centered, with context line below (24px). - **CTA slide**: Agency name at 36px, domain below, CTA text prominent, optional "Follow for more" or "DM me" text. No slide number. **File naming:** `slide-01.html`, `slide-02.html`, ..., `slide-12.html` Write all files to `output_dir`. ## Phase 4: Slide Variants Generate two variant options for the hook slide (slide 1), since the hook determines carousel performance: **Hook variant types:** 1. **Question hook**: Pose a provocative question the audience wants answered 2. **Stat hook**: Lead with a surprising number or data point 3. **Contrarian hook**: Challenge a common belief in the audience's space 4. **List hook**: "X things that..." or "X mistakes that..." Generate the top 2 most compelling variants. Output both as separate HTML files: `slide-01-a.html` and `slide-01-b.html`. ## Phase 5: Output Return structured JSON and write HTML files: ```json { "carousel_metadata": { "topic": "The carousel headline", "slide_count": 10, "style": "dark", "brand_colors": { "background": "#1a1a2e", "text": "#ffffff", "accent": "#e94560" }, "font": "Inter", "output_dir": "./carousel-output/" }, "slides": [ { "slide_number": 1, "type": "hook", "title": "Hook text here", "body": null, "word_count": 8, "file": "slide-01.html" }, { "slide_number": 2, "type": "context", "title": "Context Title", "body": "Context body text here", "word_count": 22, "file": "slide-02.html" }, { "slide_number": 3, "type": "value", "title": "Point Title", "body": "Supporting detail for this point", "word_count": 18, "file": "slide-03.html" } ], "hook_variants": [ {"variant": "A", "type": "question", "text": "Are you making these CRO mistakes?", "file": "slide-01-a.html"}, {"variant": "B", "type": "stat", "text": "73% of Shopify stores lose revenue here", "file": "slide-01-b.html"} ], "files_written": [ "slide-01.html", "slide-01-a.html", "slide-01-b.html", "slide-02.html", "slide-03.html", "slide-04.html", "slide-05.html", "slide-06.html", "slide-07.html", "slide-08.html", "slide-09.html", "slide-10.html" ], "content_quality": { "max_words_per_slide": 35, "parallel_titles": true, "screenshot_test_passed": true, "banned_phrases_clear": true } } ``` ## Phase 6: Review Present the slide plan to the user before writing HTML files: 1. Show the full slide-by-slide content plan 2. Show both hook variants 3. Ask if any slides need adjustment 4. After approval, write the HTML files 5. Suggest next step: screenshot the HTML files to PNG, or hand off to `content-repurposer` for multi-channel distribution ## Example Usage Trigger phrases: - "Create a LinkedIn carousel about [topic]" - "Turn this blog post into carousel slides" - "Make a 10-slide carousel on CRO tips" - "Build carousel slides from these notes" - "Generate a carousel for LinkedIn" ``` User: Create a LinkedIn carousel about 5 CRO mistakes D2C brands make on Shopify Assistant: [reads config, structures 10 slides, generates HTML files with dark theme, presents 2 hook variants, writes files to carousel-output/] ``` ``` User: Turn this blog post into a carousel [pastes content] Assistant: [extracts key points from content, structures into 8-12 slides, generates HTML with brand colors, returns slide plan + files] ```