Agent skill · design visual · nexu-io
social-carousel
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 "三连发".
Why this skill is useful
Provides a detailed design workflow for creating a cinematic social media carousel, including specific layout and styling instructions that the AI wouldn't generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/social-carousel