{"id":"6a1af875-4dad-4cf6-9d85-de85af3426a1","shortId":"YwM57Y","kind":"skill","title":"social-carousel","tagline":"A three-card social-media carousel laid out as 1080×1080 squares —\nthree cinematic, on-brand panels with display headlines that connect\nacross the series (\"onwards.\" → \"to the next one.\" → \"looking ahead.\").\nEach card has a brand mark, a number / total, a caption, and a \"loop\"\naf","description":"# Social Carousel Skill\n\nProduce a 3-panel social carousel on a single dark stage. Each panel is a\n1080×1080 cinematic still — connected as a series, but each readable on its\nown.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Pick the loudest serif\n token for the headline lockups and a mono token for stamps / counters.\n2. **Pick the theme + 3 captions** from the brief. The captions must read\n as one sentence when stacked: (\"onwards.\" → \"to the next one.\" →\n \"looking ahead.\" or \"input.\" → \"iterate.\" → \"ship.\").\n3. **Stage** — full-bleed dark page. Top header strip:\n - Left: serif italic display \"Three posts. One beat.\"\n - Just below the title: a one-line description in muted mono (\"1080×1080\n · cinematic video loops · minimal type. Drop into Instagram, LinkedIn,\n or X — each post stands on its own or runs as a three-part series.\").\n - Right: small mono badge \"SERIES · 01 → 03\".\n4. **Cards** — 3 squares in a horizontal row (wraps to stack on narrow\n viewports). Each card is `aspect-ratio: 1 / 1` with rounded 12px corners\n and a subtle 1px border, plus a soft drop shadow.\n - Background: a layered gradient that *suggests* a cinematic photo — for\n example, panel 1 = warm dawn meadow (stacked greens with a cyan sky\n wash); panel 2 = forest dusk (warm oranges fading into deep teals);\n panel 3 = pink-mountain ridge (rosy peaks against a dim violet sky).\n Use `radial-gradient` + `linear-gradient` only — no images.\n - Top-left chip: brand wordmark in serif italic (\"Jerrod Lew\") with a\n small accent dot.\n - Top-left below chip: micro mono index \"AI · 01 / 03\" (and 02, 03).\n - Bottom-left: the headline lockup in white serif display, italic accent\n on one word.\n - Bottom-right corner: a `1× LOOP` mono stamp inside a thin border.\n - Bottom strip caption: small caps mono describing the imagined frame\n (\"Man, walking forward — close.\", \"Woman, stepping into frame.\",\n \"Woman, overlooking the city.\").\n5. **Write** a single HTML document:\n - `` through ``, CSS inline.\n - Cards are sized via `width: clamp(280px, 30vw, 380px)` so 3 fit\n comfortably across most desktops and stack at < 1100px.\n - `data-od-id` on stage, each card, each headline.\n6. **Self-check**:\n - The three headlines together form one sentence and feel cinematic.\n - Mono is used only for the wordmark index, the loop stamp, and the\n bottom captions. The headlines stay serif.\n - Each panel's color story is distinct — no two share a dominant hue.\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\nOne sentence before the artifact, nothing after.","tags":["social","carousel","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-social-carousel","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/social-carousel","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (2,798 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:26.702Z","embedding":null,"createdAt":"2026-05-01T18:52:33.959Z","updatedAt":"2026-05-11T06:52:26.702Z","lastSeenAt":"2026-05-11T06:52:26.702Z","tsv":"'01':201,320 '02':323 '03':202,321,324 '1':87,223,224,251,345 '1080':15,16,72,73,169,170 '1100px':403 '12px':227 '1px':232 '2':110,263 '280px':390 '3':59,114,139,205,273,394 '30vw':391 '380px':392 '4':203 '5':375 '6':414 'accent':309,336 'across':29,397 'activ':90 'af':53 'ahead':38,134 'ai':319 'artifact':469 'aspect':221 'aspect-ratio':220 'background':239 'badg':199 'beat':156 'bleed':143 'border':233,352 'bottom':326,341,353,441 'bottom-left':325 'bottom-right':340 'brand':22,43,299 'brief':118 'cap':357 'caption':49,115,120,355,442 'card':7,40,204,218,384,411 'carousel':3,11,55,62 'check':417 'chip':298,315 'cinemat':19,74,171,246,427 'citi':374 'clamp':389 'close':366 'color':450 'comfort':396 'connect':28,76 'contract':461 'corner':228,343 'counter':109 'css':382 'cyan':259 'dark':66,144 'data':405 'data-od-id':404 'dawn':253 'deep':270 'describ':359 'descript':165 'design.md':91 'desktop':399 'dim':282 'display':25,152,334 'distinct':453 'document':380 'domin':458 'dot':310 'drop':176,237 'dusk':265 'emit':462 'exampl':249 'fade':268 'feel':426 'fit':395 'forest':264 'form':422 'forward':365 'frame':362,370 'full':142 'full-ble':141 'gradient':242,288,291 'green':256 'header':147 'headlin':26,101,329,413,420,444 'horizont':209 'html':379 'hue':459 'id':407 'imag':294 'imagin':361 'index':318,435 'inject':92 'inlin':383 'input':136 'insid':349 'instagram':178 'ital':151,303,335 'iter':137 'jerrod':304 'laid':12 'layer':241 'left':149,297,313,327 'lew':305 'line':164 'linear':290 'linear-gradi':289 'linkedin':179 'lockup':102,330 'look':37,133 'loop':52,173,346,437 'loudest':96 'man':363 'mark':44 'meadow':254 'media':10 'micro':316 'minim':174 'mono':105,168,198,317,347,358,428 'mountain':276 'must':121 'mute':167 'narrow':215 'next':35,131 'noth':470 'number':46 'od':406 'on-brand':20 'one':36,124,132,155,163,338,423,465 'one-lin':162 'onward':32,128 'orang':267 'output':460 'overlook':372 'page':145 'panel':23,60,69,250,262,272,448 'part':194 'peak':279 'photo':247 'pick':94,111 'pink':275 'pink-mountain':274 'plus':234 'post':154,183 'produc':57 'radial':287 'radial-gradi':286 'ratio':222 'read':88,122 'readabl':82 'ridg':277 'right':196,342 'rosi':278 'round':226 'row':210 'run':189 'self':416 'self-check':415 'sentenc':125,424,466 'seri':31,79,195,200 'serif':97,150,302,333,446 'shadow':238 'share':456 'ship':138 'singl':65,378 'size':386 'skill':56 'skill-social-carousel' 'sky':260,284 'small':197,308,356 'social':2,9,54,61 'social-carousel':1 'social-media':8 'soft':236 'source-nexu-io' 'squar':17,206 'stack':127,213,255,401 'stage':67,140,409 'stamp':108,348,438 'stand':184 'stay':445 'step':368 'still':75 'stori':451 'strip':148,354 'subtl':231 'suggest':244 'tag':464 'teal':271 'theme':113 'thin':351 'three':6,18,153,193,419 'three-card':5 'three-part':192 'titl':160 'togeth':421 'token':98,106 'top':146,296,312 'top-left':295,311 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'total':47 'two':455 'type':175 'use':285,430 'via':387 'video':172 'viewport':216 'violet':283 'walk':364 'warm':252,266 'wash':261 'white':332 'width':388 'woman':367,371 'word':339 'wordmark':300,434 'workflow':86 'wrap':211 'write':376 'x':181","prices":[{"id":"5f0b69c0-1188-4c69-ba7d-4d08efe3c96e","listingId":"6a1af875-4dad-4cf6-9d85-de85af3426a1","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:33.959Z"}],"sources":[{"listingId":"6a1af875-4dad-4cf6-9d85-de85af3426a1","source":"github","sourceId":"nexu-io/open-design/social-carousel","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/social-carousel","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:33.959Z","lastSeenAt":"2026-05-11T06:52:26.702Z"},{"listingId":"6a1af875-4dad-4cf6-9d85-de85af3426a1","source":"skills_sh","sourceId":"nexu-io/open-design/social-carousel","sourceUrl":"https://skills.sh/nexu-io/open-design/social-carousel","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:43.504Z","lastSeenAt":"2026-05-07T22:41:45.405Z"}],"details":{"listingId":"6a1af875-4dad-4cf6-9d85-de85af3426a1","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"social-carousel","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"a1baa0a6a6268cec46e94bbf735b2fb1d9901d84","skill_md_path":"skills/social-carousel/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/social-carousel"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"social-carousel","description":"A three-card social-media carousel laid out as 1080×1080 squares —\nthree cinematic, on-brand panels with display headlines that connect\nacross the series (\"onwards.\" → \"to the next one.\" → \"looking ahead.\").\nEach card has a brand mark, a number / total, a caption, and a \"loop\"\naffordance. Use when the brief asks for a \"carousel post\", \"social\ncarousel\", \"Instagram carousel\", \"LinkedIn series\", \"X thread cards\",\nor \"三连发\"."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/social-carousel"},"updatedAt":"2026-05-11T06:52:26.702Z"}}