carousels

name

carousels

description

Turns a piece of Craig's content (an email, a YouTube script, an essay, or pasted text) into a polished image carousel publishable to both LinkedIn and Instagram from one set of 1080x1350 slides. Distills the source into 5-8 one-idea-per-slide beats, generates hand-drawn infographic illustrations with GPT Image (OpenAI), renders pixel-perfect on-brand slides via headless browser, assembles a LinkedIn PDF, and writes a caption. Triggers: 'make a carousel,' 'carousel from this email/script,' 'turn this into LinkedIn slides,' 'Instagram carousel from X.' Brand is locked to context/brand/03-visual-identity.md — output is identical styling every run.

LinkedIn + Instagram Carousel Generator

Turn one strong piece of source content into a swipeable image carousel. One set of 4:5 slides serves both platforms — PNGs for Instagram, an assembled PDF for LinkedIn.

The brand is locked, not configurable: off-white #F5F1E8, ink #0F0F0F, muted teal #2A6F6A, Inter type, hand-drawn infographic illustrations. Every run comes out visually identical. Don't ask the user about themes, colors, or fonts.

Skill files (paths relative to repo root /Users/craighewitt/Coding/second-brain):

• output/cowork-context/skills/carousels/assets/carousel.css — brand stylesheet
• output/cowork-context/skills/carousels/references/slide-layouts.md — HTML patterns
• output/cowork-context/skills/carousels/scripts/generate-image.mjs — GPT Image (OpenAI)
• output/cowork-context/skills/carousels/scripts/render.mjs — slides → PNG + PDF

---

Phase 0 — Preflight

Run these checks before anything else. If a check fails, surface the fix and stop until it's resolved — don't proceed with a broken environment.

1. Node — node -v (need v18+; repo has v22).

2. Headless browser — render.mjs launches puppeteer. If puppeteer or its browser is missing, the script prints the install command. Don't pre-empt it; just run the render step and act on any error.

3. OPENAI_API_KEY — only needed if the carousel will have image slides. Check with [ -n "$OPENAI_API_KEY" ] && echo set || echo missing. If missing, tell the user:

   GPT Image (OpenAI) needs an OpenAI API key. Create one at platform.openai.com/api-keys, add billing, then run export OPENAI_API_KEY="sk-..." in your shell (never commit it).

   If the user can't set a key right now, offer to build a type-only carousel (no image slides) — the skill still works fully without the key.

---

Phase 1 — Intake

Get the source content. Accept either:

• Pasted text — an email, a section of a script, notes.
• A local file path — e.g. a script in output/, an essay draft.

Do not scrape URLs. If the user gives a URL, ask them to paste the content (per CLAUDE.md).

Then read, once:

• context/brand/02-voice.md — for the caption voice.
• context/brand/03-visual-identity.md — confirm brand-surface palette/type.

Ask the user only for things that genuinely change the output (one short batch):

• Any specific angle to pull from the source? (optional)
• A CTA word for the final slide — what should people comment? (optional; default to a relevant word from the topic)
• A lead magnet to point to? (optional)

If the user already gave direction in their prompt, skip the questions.

Create the run folder: output/carousels/<source-slug>-<YYYY-MM-DD>/ with images/ and publish/ subfolders. Copy carousel.css into the run folder (render needs it next to slides.html).

---

Phase 2 — Editorial pass

This is the hard part — carousels live or die on editing, not rendering.

Distill the source into 5-8 beats, one idea per slide. Let the source decide the count: a tight 4-tip article is 7 slides; a dense essay might be 8. Never pad.

Structure:

• Slide 1 — cover/hook. The scroll-stopper. A promise or a provocative claim.
• Slides 2 to N-1 — content. One idea each. No slide explains two things.
• Slide N — CTA. Save / follow / comment-the-word.

For each content slide decide: is it type-only or an image slide? Image slides are for ideas that are clearer drawn than written — a process, a relationship, a before/after, a system. Aim for 2-4 image slides, not every slide. Type-only slides use the big-stat, steps, quote, comparison, or statement layouts.

Write 01-slide-plan.md in the run folder: for each slide, its number, role, layout, one-line idea, and image/type-only flag.

---

Phase 3 — Slide copy

Write the visible copy for every slide. Rules:

• Headline ≤ 12 words. Body ≤ 30 words. Social attention is short.
• One idea per slide — if copy needs two sentences of setup, split into two slides.
• Craig's voice: direct, practical, no hype, no "crushing it / game-changer."
• The cover earns the swipe; the CTA asks for the save + comment word.

---

Phase 4 — Image generation

For image slides only. Skip entirely if building a type-only carousel.

For each image slide, write a two-paragraph prompt:

Paragraph 1 (locked — brand illustration style, paste verbatim):

Hand-drawn minimalist infographic, black ink linework on a solid flat warm off-white background (hex #F5F1E8), single muted teal accent color (#2A6F6A), clean whiteboard sketch style, confident pen strokes, hand-lettered text, simple geometric icons, lots of white space.

Paragraph 2: describe the specific diagram — the concept, layout, labels, and flow for that slide. Be concrete ("a 3-step horizontal flow: Draft → Review → Publish, each a labeled box connected by arrows"). No stock-photo realism, no gradients, no people. Always end paragraph 2 with: "The entire diagram, including every icon and label, sits well within the frame with generous empty margins on all four sides — nothing is cropped and nothing touches the edges." The model otherwise tends to draw edge-to-edge and clip the outer labels.

Generate each one:

node output/cowork-context/skills/carousels/scripts/generate-image.mjs \
  --prompt-file <run>/images/slide-04-prompt.txt \
  --out <run>/images/slide-04.png

Write the prompt to a .txt file first to avoid shell-escaping issues. After generating, the script normalizes the image background to exactly #F5F1E8 (the --bg-hex default) so the illustration sits seamlessly on a light slide — no visible panel edge. Default size 1024x1024, quality medium. Name each PNG slide-NN.png matching its slide number. Because the linework is black, image slides must use the light slide background, not the teal variant. (If you ever need an image slide on a different background, pass --bg-hex #RRGGBB to match.)

---

Phase 5 — Build slides.html + sample approval

Author <run>/slides.html using the patterns in references/slide-layouts.md. One .slide div per slide, in order. Link carousel.css (the copy in the run folder). Reference illustrations as images/slide-NN.png.

Sample-approval checkpoint: before rendering the whole set, render just the cover so the user sees the styling:

node output/cowork-context/skills/carousels/scripts/render.mjs \
  --slides <run>/slides.html --out <run>/publish

Show the user publish/slide-01.png. If they want changes (copy, layout), edit slides.html and re-render. Only continue once the cover is approved.

---

Phase 6 — Render

Run the full render (same command as above — it renders every .slide):

node output/cowork-context/skills/carousels/scripts/render.mjs \
  --slides <run>/slides.html --out <run>/publish

Produces publish/slide-01.png … slide-NN.png (Instagram) and publish/carousel.pdf (LinkedIn). All PNGs are exactly 1080×1350.

---

Phase 7 — Caption

Write publish/caption.md with a caption that works for both platforms:

• Hook line that mirrors the cover slide.
• 2-4 short lines of value — what the carousel teaches, why it matters.
• CTA: save the post, follow @thecraighewitt, comment the CTA word.
• Craig's voice. No hashtag soup — 3-5 relevant tags max at the end, optional.

If a LinkedIn vs Instagram split is worth it (different length/tone), write both under clear headings. Otherwise one shared caption is fine.

---

Phase 8 — Review + delivery

Open the rendered PNGs and check each against the brand:

• Only #F5F1E8 / #0F0F0F / #2A6F6A (plus rare #C75A2C data callout).
• Inter only. No gradients, no drop shadows, no emoji in slide chrome.
• One teal element per slide.
• One idea per slide; text legible at phone size.
• Footer (handle + number) on every slide except the cover.
• Slide numbers in footers match actual count (03 / 07).

Fix any off-spec slide in slides.html and re-render. Then report the run folder and tell the user: upload the PNGs to Instagram as a carousel, upload carousel.pdf to LinkedIn as a document post, use caption.md for both.

Final deliverables in output/carousels/<slug>-<date>/publish/:

• slide-01.png … slide-NN.png
• carousel.pdf
• caption.md