Mmcp.market

social-carousel skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

A three-card social-media carousel laid out as 1080×1080 squares — three cinematic, on-brand panels with display headlines that connect across the series ("onwards." → "to the next one." → "looking ahead."). Each card has a brand mark, a number / total, a caption, and a "loop" affordance. Use when the brief asks for a "carousel post", "social carousel", "Instagram carousel", "LinkedIn series", "X thread cards", or "三连发".

A100/100content scan

Is the social-carousel skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the social-carousel skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/social-carousel ~/.claude/skills/social-carousel
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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

token for the headline lockups and a mono token for stamps / counters.

  1. Read the active DESIGN.md (injected above). Pick the loudest serif

as one sentence when stacked: ("onwards." → "to the next one." → "looking ahead." or "input." → "iterate." → "ship.").

  1. Pick the theme + 3 captions from the brief. The captions must read
  1. Stage — full-bleed dark page. Top header strip:

· cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series.").

  • Left: serif italic display "Three posts. One beat."
  • Just below the title: a one-line description in muted mono ("1080×1080
  • Right: small mono badge "SERIES · 01 → 03".

viewports). Each card is aspect-ratio: 1 / 1 with rounded 12px corners and a subtle 1px border, plus a soft drop shadow.

  1. Cards — 3 squares in a horizontal row (wraps to stack on narrow

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.

  • Background: a layered gradient that suggests a cinematic photo — for

small accent dot.

  • Top-left chip: brand wordmark in serif italic ("Jerrod Lew") with a

on one word.

  • Top-left below chip: micro mono index "AI · 01 / 03" (and 02, 03).
  • Bottom-left: the headline lockup in white serif display, italic accent

("Man, walking forward — close.", "Woman, stepping into frame.", "Woman, overlooking the city.").

  • Bottom-right corner: a 1× LOOP mono stamp inside a thin border.
  • Bottom strip caption: small caps mono describing the imagined frame
  1. Write a single HTML document:

comfortably across most desktops and stack at < 1100px.

  • <!doctype html> through , CSS inline.
  • Cards are sized via width: clamp(280px, 30vw, 380px) so 3 fit
  • data-od-id on stage, each card, each headline.
  1. Self-check:

bottom captions. The headlines stay serif.

  • The three headlines together form one sentence and feel cinematic.
  • Mono is used only for the wordmark index, the loop stamp, and the
  • Each panel's color story is distinct — no two share a dominant hue.

Output contract

Emit between tags:

<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers