Social Carousel Skill
SkillMediaThis skill lets your agent build an instagram carousel of three 1080×1080 square cards whose headlines flow as one message. It produces a single self-contained HTML file with three cinematic panels on a shared dark stage, using gradients instead of photos. Each card carries a brand mark, a number out of the total, a caption, and a loop affordance, and the headlines connect across the series.
Use Social Carousel Skill in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Social Carousel Skill and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Social Carousel Skill skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
No other account needed.
Have the design system file with the fonts and colors to follow.
What your AI can do with it
- Build a three-card carousel as one self-contained HTML file
- Lay out each card as a 1080×1080 square panel
- Connect display headlines across the series as one message
- Add a brand mark, number out of total, caption, and loop affordance
- Use gradients instead of photos on a shared dark stage
- Follow a design system file for fonts and colors
Getting started
- Have the design system file with the fonts and colors to follow.
- Ask the agent to build a three-card carousel with the headlines and captions you want.
- Let the agent produce the single self-contained HTML file.
- 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
- 99k
- Forks
- 11k
- Last commit
- Oct 2026
Questions
- What does the skill produce?
- A single self-contained HTML file holding a three-panel carousel post, with each panel laid out as a 1080×1080 square.
- How do the headlines work across the cards?
- The display headlines connect across the series as one message, and the captions read as one sentence across the three panels.
- Does it use photos?
- No. The panels use gradients instead of photos, on a shared dark stage.
- What does each card include?
- A brand mark, a number out of the total, a caption, and a loop affordance.
- How are fonts and colors chosen?
- The skill follows a design system file for fonts and colors, then checks that each panel has a distinct palette and consistent branding.
Advanced
- Item type
- skill
- Key
social-carousel-2- Source
- github.com/nexu-io/open-design