# instagram-carousel

Builds an Instagram carousel as a swipeable HTML preview and exports every slide as a ready 1080×1350 PNG.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 817 installs · ★ 67
- Author: marcolang
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/marcolang/Marketing-Skills/tree/HEAD/instagram-carousel/SKILL.md
- Updated: 2026-04-07
- HTML: https://affpapa.org/en/nevibecode/skills/instagram-carousel

## What it does

The skill walks the whole path. First it asks for brand details: name, Instagram handle, primary color, logo, font preference, tone, images and slide language. From that single color it derives a six-token palette — accent, a lighter and a darker shade, light slide background, dividers, dark slide background. Heading and body fonts come from Google Fonts, picked from a style table that runs from Playfair Display with DM Sans to Bricolage Grotesque.

Then it generates a self-contained swipeable HTML file and runs it through Playwright on export, turning each slide into its own 1080×1350 PNG. Images are embedded as base64 `data:` URIs. Relative paths like `gestante.png` break everywhere except the exact folder the HTML sits in, so the skill avoids them. It also recommends writing the HTML with Python `Path.write_text()`, because a shell heredoc interpolates `$` and backticks and corrupts the base64 string.

Ask for a carousel without brand details and it asks first instead of guessing. The default format is a standard 7-slide sequence, and slides come out in Portuguese (BR) unless you name another language. Export needs Playwright available.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/instagram-carousel/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/instagram-carousel/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/instagram-carousel/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/instagram-carousel/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install marcolang/Marketing-Skills instagram-carousel
```

2. **Manually: put the files in place**
- File: `.github/skills/instagram-carousel/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/marcolang/Marketing-Skills --path instagram-carousel
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/instagram-carousel/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/marcolang/Marketing-Skills/tree/HEAD/instagram-carousel/SKILL.md

## When to use it
- turn one brand color into a full slide palette
- build a 7-slide carousel for a single brand
- match heading and body fonts to a tone
- embed a photo in a slide without broken paths
- export each slide as a 1080×1350 PNG

## Example prompts
- make an Instagram carousel about our product launch, I'll give you the brand colors
- generate the HTML carousel preview and export the slides as PNG with Playwright
- build a carousel in Portuguese, friendly tone

## Similar
- [carousel-writer-sms](https://affpapa.org/en/nevibecode/skills/carousel-writer-sms.md) — skill · 2300 installs
- [carousel-writer](https://affpapa.org/en/nevibecode/skills/carousel-writer.md) — skill · 755 installs
- [ig-carousel](https://affpapa.org/en/nevibecode/skills/ig-carousel.md) — skill · 493 installs
- [finding-instagram-creators-by-location](https://affpapa.org/en/nevibecode/skills/finding-instagram-creators-by-location.md) — skill · 833 installs
- [benchmarking-instagram-influencer-engagement](https://affpapa.org/en/nevibecode/skills/benchmarking-instagram-influencer-engagement.md) — skill · 757 installs
- [cuboid-carousel](https://affpapa.org/en/nevibecode/skills/cuboid-carousel.md) — skill · 10000 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md