Design & Medialow risk

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 "三连发".

nexu-io/open-design·design-templates/social-carousel/SKILL.md
61/ 100Recommendation
↓

Install this skill

Choose your coding agent and copy a project or personal installation command.

Pinned to the indexed commit
Project installation.agents/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a codex -y
Personal installation~/.agents/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a codex -g -y
Manual folder.agents/skills/social-carouselOfficial docs ↗
Project installation.claude/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a claude-code -y
Personal installation~/.claude/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a claude-code -g -y
Manual folder.claude/skills/social-carouselOfficial docs ↗
Project installation.agents/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a github-copilot -y
Personal installation~/.copilot/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a github-copilot -g -y
Manual folder.agents/skills/social-carouselOfficial docs ↗
Project installation.agents/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a cursor -y
Personal installation~/.cursor/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a cursor -g -y
Manual folder.agents/skills/social-carouselOfficial docs ↗
Project installation.agents/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a gemini-cli -y
Personal installation~/.gemini/skills/social-carousel
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/social-carousel -a gemini-cli -g -y
Native Gemini CLIgemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path design-templates/social-carousel
Manual folder.agents/skills/social-carouselOfficial docs ↗
⚠ Installation uses the open-source skills CLI. Inspect the source and permissions before running the command.

Skill instructions

View source 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

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.