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.
Multi-Agent Execution Setup
When this skill is invoked, the executing agent MUST spawn and consult four specialized subagents to collaborate on the generation:
- Design Gráfico Expert: Reviews the visual composition, background gradients, styling tokens, and compliance with the design system.
- HTML Expert: Audits markup semantics, structural cleanlines, and verifies target data-od-id attributes.
- Social Media Expert: Optimizes copy layout, text hierarchy, and guarantees structures commonly engaging for Instagram posts.
- UX Expert: Checks readability, contrast ratios, and ensures perfect geometric alignment and spacing for all icons and captions.
Workflow
- Read the active DESIGN.md (injected above). Pick the loudest serif
token for the headline lockups and a mono token for stamps / counters.
- Icons Setup (CDN): Load an open-source icon library (e.g., Lucide Icons, Font Awesome, or Google Material Symbols) via a public CDN inside the
<head> or via <script>.
- 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 / 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.").
- Icons Layout & Alignment (UX & HTML Review):
- Place relevant open-source icons alongside wordmarks, indexes, or captions.
- All icon containers must use Flexbox (
display: inline-flex; align-items: center; justify-content: center; gap: [X]px;) to achieve perfect vertical and horizontal alignment.
- Icons must have a fixed bounding box (e.g.,
width: 16px; height: 16px;) so layout spacing remains identical regardless of the icon's shape.
- 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.
- 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.
- Icons are loaded correctly via CDN, spaced symmetrically, and fully aligned.
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.
1---2name: social-carousel3description: 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 "三连发".4---56# Social Carousel Skill78Produce a 3-panel social carousel on a single dark stage. Each panel is a91080×1080 cinematic still — connected as a series, but each readable on its10own.1112## Multi-Agent Execution Setup1314When this skill is invoked, the executing agent MUST spawn and consult four specialized subagents to collaborate on the generation:151. **Design Gráfico Expert:** Reviews the visual composition, background gradients, styling tokens, and compliance with the design system.162. **HTML Expert:** Audits markup semantics, structural cleanlines, and verifies target data-od-id attributes.173. **Social Media Expert:** Optimizes copy layout, text hierarchy, and guarantees structures commonly engaging for Instagram posts.184. **UX Expert:** Checks readability, contrast ratios, and ensures perfect geometric alignment and spacing for all icons and captions.1920## Workflow21221. **Read the active DESIGN.md** (injected above). Pick the loudest serif23 token for the headline lockups and a mono token for stamps / counters.242. **Icons Setup (CDN):** Load an open-source icon library (e.g., Lucide Icons, Font Awesome, or Google Material Symbols) via a public CDN inside the `<head>` or via `<script>`.253. **Pick the theme + 3 captions** from the brief. The captions must read26 as one sentence when stacked: ("onwards." → "to the next one." →27 "looking ahead." or "input." → "iterate." → "ship.").284. **Stage** — full-bleed dark page. Top header strip:29 - Left: serif italic display "Three posts. One beat."30 - Just below the title: a one-line description in muted mono ("1080×108031 · cinematic video loops · minimal type. Drop into Instagram, LinkedIn,32 or X — each post stands on its own or runs as a three-part series.").33 - Right: small mono badge "SERIES · 01 → 03".345. **Cards** — 3 squares in a horizontal row (wraps to stack on narrow35 viewports). Each card is `aspect-ratio: 1 / 1` with rounded 12px corners36 and a subtle 1px border, plus a soft drop shadow.37 - Background: a layered gradient that *suggests* a cinematic photo — for38 example, panel 1 = warm dawn meadow (stacked greens with a cyan sky39 wash); panel 2 = forest dusk (warm oranges fading into deep teals);40 panel 3 = pink-mountain ridge (rosy peaks against a dim violet sky).41 Use `radial-gradient` + `linear-gradient` only — no images.42 - Top-left chip: brand wordmark in serif italic ("Jerrod Lew") with a43 small accent dot.44 - Top-left below chip: micro mono index "AI · 01 / 03" (and 02, 03).45 - Bottom-left: the headline lockup in white serif display, italic accent46 on one word.47 - Bottom-right corner: a `1× LOOP` mono stamp inside a thin border.48 - Bottom strip caption: small caps mono describing the imagined frame49 ("Man, walking forward — close.", "Woman, stepping into frame.",50 "Woman, overlooking the city.").516. **Icons Layout & Alignment (UX & HTML Review):**52 - Place relevant open-source icons alongside wordmarks, indexes, or captions.53 - All icon containers must use Flexbox (`display: inline-flex; align-items: center; justify-content: center; gap: [X]px;`) to achieve perfect vertical and horizontal alignment.54 - Icons must have a fixed bounding box (e.g., `width: 16px; height: 16px;`) so layout spacing remains identical regardless of the icon's shape.557. **Write** a single HTML document:56 - `<!doctype html>` through `</html>`, CSS inline.57 - Cards are sized via `width: clamp(280px, 30vw, 380px)` so 3 fit58 comfortably across most desktops and stack at < 1100px.59 - `data-od-id` on stage, each card, each headline.608. **Self-check**:61 - The three headlines together form one sentence and feel cinematic.62 - Mono is used only for the wordmark index, the loop stamp, and the63 bottom captions. The headlines stay serif.64 - Each panel's color story is distinct — no two share a dominant hue.65 - Icons are loaded correctly via CDN, spaced symmetrically, and fully aligned.6667## Output contract6869Emit between `<artifact>` tags:7071```72<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">73<!doctype html>74<html>...</html>75</artifact>76```7778One sentence before the artifact, nothing after.
prof-ramos