New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Social Carousel

Free

Create engaging 3-panel social media carousels.

by nexu-io84.9k stars on nexu-io/open-design
6 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Social Carousel does

The Social Carousel skill allows designers and developers to create visually appealing three-panel social media posts, specifically formatted for platforms like Instagram, LinkedIn, and X. Each panel is designed as a 1080x1080 square, ensuring that they are both cinematic and cohesive, while also being able to stand alone as individual posts. This skill is particularly useful for marketing teams, social media managers, and content creators who need to produce high-quality carousel content that communicates a unified message across multiple panels.

To use the Social Carousel skill, users follow a structured workflow that begins with reading the active design document to select appropriate typography for the headlines and captions. The skill emphasizes the importance of visual storytelling, guiding users to create captions that flow together when stacked, enhancing the narrative across the carousel. The design elements include a full-bleed dark stage, rounded card corners, and a soft drop shadow, all contributing to a polished, professional look.

Each card features a unique background gradient that suggests a cinematic feel, with specific color stories for each panel to maintain distinctiveness. The skill also incorporates branding elements and a structured layout for captions and stamps, ensuring that each carousel post is both informative and aesthetically pleasing. By following the provided guidelines, users can produce a carousel that not only meets design standards but also engages viewers effectively.

This skill is ideal for anyone looking to enhance their social media presence with visually striking carousel posts that tell a story and maintain brand consistency. It streamlines the design process, allowing users to focus on creativity while adhering to best practices in social media content creation.

When to use it

Use this skill when you need to create a three-part social media carousel that is visually connected and tells a story.

When not to use it

This skill may not be suitable for users looking for more complex animations or interactive elements beyond static images.

What you can build with it

Marketing Campaigns

Utilize the Social Carousel skill to create a series of posts that promote a new product launch, enhancing engagement through storytelling.

Brand Awareness

Design a carousel that showcases brand values and mission, effectively communicating your message across multiple panels.

Event Promotion

Create a visually appealing carousel to promote an upcoming event, with each panel highlighting different aspects such as speakers, schedule, and registration.

How to install Social Carousel

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/social-carousel --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Social Carousel Skill

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

  1. Read the active DESIGN.md (injected above). Pick the loudest serif token for the headline lockups and a mono token for stamps / counters.
  2. 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.").
  3. 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".
  4. Cards — 3 squares in a horizontal row (wraps to stack on narrow viewports). Each card is aspect-ratio: 1 / 1 with 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-gradient only — 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× LOOP mono 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.").
  5. 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-id on stage, each card, each headline.
  6. 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.

Frequently asked questions about Social Carousel

Similar skills

Excalidraw Diagram Generator

Transform natural language into Excalidraw diagrams.

Draw.io Diagram Generator

Easily create and validate draw.io diagrams.

Image Annotations

Easily annotate images with callouts and highlights.

Banner Design

Create stunning banners for any platform effortlessly.

Scientific Schematics

Generate publication-quality scientific diagrams effortlessly.

Infographics

Create professional infographics with ease and accuracy.