Social Carousel Skill
SkillMediasocial-carousel is a skill that lets an AI agent build an Instagram carousel of three 1080×1080 square cards whose headlines flow as one message across the series. It produces a single self-contained HTML file with gradient-based cinematic panels, brand marks, numbering, captions, and loop stamps, following a design system file for fonts and colors.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a design system file (DESIGN.md) covering color, typography, layout, and components available to the agent.
Then ask your AI: use the Social Carousel Skill skill
What your AI can do with it
- Produces a three-panel carousel post as one self-contained HTML file
- Lays out three 1080×1080 square cards in a row that stacks on narrow viewports
- Writes captions that read as one sentence when the cards are stacked
- Builds cinematic backgrounds using only radial and linear gradients, no images
- Follows a DESIGN.md file for color, typography, layout, and component tokens
- Adds brand marks, index chips, and 1× LOOP stamps to each card
Getting started
- Have a design system file (DESIGN.md) covering color, typography, layout, and components available to the agent.
- Provide a brief with a theme and captions, or ask the agent to pick captions that read as one sentence across the three cards.
- Ask for a carousel post, social carousel, Instagram carousel, LinkedIn series, or X thread cards.
- Preview the generated index.html to check that each panel has a distinct palette and consistent branding.
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/social-carousel/SKILL.md and read by ahel’s review.
Produce a 3-panel social carousel on a single dark stage. Each panel is a 1080×1080 cinematic still — connected as a series, but each readable on its own.
Workflow
- Read the active DESIGN.md (injected above). Pick the loudest serif token for the headline lockups and a mono token for stamps / counters.
- Pick the theme + 3 captions from the brief. The captions must read as one sentence when stacked: ("onwards." → "to the next one." → "looking ahead." or "input." → "iterate." → "ship.").
- Stage — full-bleed dark page. Top header strip:
- Left: serif italic display "Three posts. One beat."
- Just below the title: a one-line description in muted mono ("1080×1080 · cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series.").
- Right: small mono badge "SERIES · 01 → 03".
- Cards — 3 squares in a horizontal row (wraps to stack on narrow
viewports). Each card is
aspect-ratio: 1 / 1with rounded 12px corners and a subtle 1px border, plus a soft drop shadow.- Background: a layered gradient that suggests a cinematic photo — for
example, panel 1 = warm dawn meadow (stacked greens with a cyan sky
wash); panel 2 = forest dusk (warm oranges fading into deep teals);
panel 3 = pink-mountain ridge (rosy peaks against a dim violet sky).
Use
radial-gradient+linear-gradientonly — no images. - Top-left chip: brand wordmark in serif italic ("Jerrod Lew") with a small accent dot.
- Top-left below chip: micro mono index "AI · 01 / 03" (and 02, 03).
- Bottom-left: the headline lockup in white serif display, italic accent on one word.
- Bottom-right corner: a
1× LOOPmono stamp inside a thin border. - Bottom strip caption: small caps mono describing the imagined frame ("Man, walking forward — close.", "Woman, stepping into frame.", "Woman, overlooking the city.").
- Background: a layered gradient that suggests a cinematic photo — for
example, panel 1 = warm dawn meadow (stacked greens with a cyan sky
wash); panel 2 = forest dusk (warm oranges fading into deep teals);
panel 3 = pink-mountain ridge (rosy peaks against a dim violet sky).
Use
- Write a single HTML document:
<!doctype html>through</html>, CSS inline.- Cards are sized via
width: clamp(280px, 30vw, 380px)so 3 fit comfortably across most desktops and stack at < 1100px. data-od-idon stage, each card, each headline.
- Self-check:
- The three headlines together form one sentence and feel cinematic.
- Mono is used only for the wordmark index, the loop stamp, and the bottom captions. The headlines stay serif.
- Each panel's color story is distinct — no two share a dominant hue.
Output contract
Emit between <artifact> tags:
<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
Signals
- GitHub stars
- 98k
- Forks
- 11k
- Last commit
- Sep 2026
Others that do the same job
Questions
- What size are the cards?
- Each card is a 1080×1080 square, sized for drop-in use on Instagram, LinkedIn, or X.
- Does it use photos?
- No. Backgrounds are layered radial and linear gradients that suggest cinematic stills, so the output needs no image assets.
- What does the agent deliver?
- A single self-contained HTML file with an index.html entry point that previews the three cards.
Advanced
- Item type
- skill
- Key
social-carousel-2- Source
- github.com/nexu-io/open-design