instagram-carousel — Claude Code skill: HTML carousels for Instagram
Builds an Instagram carousel as a swipeable HTML preview and exports every slide as a ready 1080×1350 PNG.
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a claude-codeWhat instagram-carousel 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.
What it helps with
- 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 for the agent
- 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
How to install instagram-carousel
1Skills CLI (Vercel)
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a claude-code2Manually: put the files in place
~/.claude/skills/instagram-carousel/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/instagram-carousel/
1Skills CLI (Vercel)
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a codex2Manually: put the files in place
.agents/skills/instagram-carousel/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a cursor2Manually: put the files in place
.cursor/skills/instagram-carousel/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install marcolang/Marketing-Skills instagram-carousel2Manually: put the files in place
.github/skills/instagram-carousel/SKILL.md1Skills CLI (Vercel)
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a gemini-cli2Platform CLI
gemini skills install https://github.com/marcolang/Marketing-Skills --path instagram-carouselManually: put the files in place
.devin/skills/instagram-carousel/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about instagram-carousel
How do I install instagram-carousel in Claude?
Run npx skills add marcolang/Marketing-Skills --skill instagram-carousel -a claude-code. The skill lands at ~/.claude/skills/instagram-carousel/SKILL.md.
What does instagram-carousel do?
It generates an Instagram carousel as a swipeable HTML preview and exports each slide as a 1080×1350 PNG. Along the way it sets up the brand palette, fonts and slide copy.
What do I need to export the slides?
Export runs through Playwright, so it has to be available in your environment. Images are embedded as base64 data: URIs and the HTML is written with Python.
