{"id":"6fb11599-655a-46b1-84e0-7d141bd04b79","shortId":"nTeKvB","kind":"skill","title":"editorial-collage-deck","tagline":"Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates). The deck uses scroll-snap pagination, arrow-key + space navigation, a live HUD with slide counter and progres","description":"# editorial-collage-deck\n\nSister skill to [`editorial-collage`](../editorial-collage/). Same\nAtelier Zero visual system (warm paper, Inter Tight + Playfair Display,\nitalic-serif emphasis, coral dots), but paginated as a slide deck\ninstead of a long landing page.\n\n```text\ninputs.json + ../editorial-collage/styles.css\n        │\n        └──────────► scripts/compose.ts\n                            │\n                            ▼\n                   <out>/index.html\n                   (one viewport per slide, scroll-snap)\n```\n\n## What you get\n\n- A single self-contained HTML file with N viewport-height slides.\n- **Keyboard navigation**: ←/→ · ↑/↓ · PageUp/PageDown · Space · Home/End.\n- **HUD top bar**: brand mark, deck title, key hint, live slide counter.\n- **Coral progress bar** at the bottom that fills as you advance.\n- **Scroll-snap pagination** with `scroll-snap-stop: always` so each\n  slide settles cleanly.\n- Reuses the **same 16-slot image library** as the sister skill — no\n  duplicate assets.\n\n## Slide types\n\n| Kind        | Use it for                                                    |\n| :---------- | :------------------------------------------------------------ |\n| `cover`     | Title plate at the start. 2-column copy + collage art.        |\n| `section`   | Roman-numeral divider between chapters. Centered, full-bleed. |\n| `content`   | Eyebrow + title + body + bullets + optional collage art.      |\n| `stats`     | Up to 4 large stat cells (value · label · sub-label).         |\n| `quote`     | Pull quote + author. Optional portrait collage on the right.  |\n| `cta`       | Closing pitch + 1-2 buttons.                                  |\n| `end`       | Mega italic-serif kicker word + signature footer.             |\n\nA typical 11-slide pitch:\n\n```\n1. cover     — title plate, hero collage\n2. section   — \"I. The problem\"\n3. content   — about / manifesto, bullets\n4. content   — capabilities, bullets\n5. stats     — 4 numbers\n6. section   — \"II. How it feels\"\n7. content   — method, bullets\n8. content   — selected work\n9. quote     — customer testimonial\n10. cta      — primary + secondary action\n11. end      — mega kicker + signature\n```\n\n## Workflow\n\n### 1. Author `inputs.json`\n\nStart from [`inputs.example.json`](./inputs.example.json) (the Open\nDesign pitch deck). The brand block, image strategy, and assets path\nmirror the sister skill — if you already filled out an\n`editorial-collage` brief, copy `brand` and `imagery` over verbatim.\n\nFor each slide, pick a `kind` and fill the typed fields from\n[`schema.ts`](./schema.ts). `MixedText` (sans-serif baseline + italic-serif\nemphasis spans + coral terminating dot) is the same encoding used by\nthe sister skill — see its `inputs.example.json` for examples.\n\n### 2. (Optional) generate or stub imagery\n\nThis skill does **not** ship its own image generator or placeholder\nscript — it shares the 16-slot library from `editorial-collage`. To\nregenerate or stub:\n\n```bash\n# generate via gpt-image-2 (fal.ai)\nFAL_KEY=... npx tsx ../editorial-collage/scripts/imagegen.ts ../editorial-collage/inputs.example.json --out=../editorial-collage/assets/\n\n# or paper-textured SVG placeholders\nnpx tsx ../editorial-collage/scripts/placeholder.ts ../editorial-collage/assets/\n```\n\nSet your deck's `inputs.imagery.assets_path` to wherever those PNGs\nlive (default in the example: `../editorial-collage/assets/`).\n\n### 3. Compose the deck\n\n```bash\nnpx tsx scripts/compose.ts inputs.json out/index.html\n```\n\nThe composer reads `inputs.json`, loads the canonical Atelier Zero\nstylesheet from `../editorial-collage/styles.css`, layers deck-specific\nrules (scroll-snap container, slide layout grid, HUD, keyboard nav)\non top, and writes one self-contained HTML file.\n\n### 4. Self-check\n\n- [ ] Open the HTML in a fresh browser tab; slide 1 (cover) shows\n      with HUD `01 / N` in the corner.\n- [ ] Press `→` (or Space). Smoothly advances to slide 2 with\n      `02 / N` in the counter and the coral progress bar filling.\n- [ ] Press `End`. Jumps to the final slide.\n- [ ] Press `Home`. Returns to slide 1.\n- [ ] `prefers-reduced-motion: reduce` (DevTools → Rendering): smooth\n      scroll still works, but page transitions are instant.\n- [ ] Resize to 1080px and 640px. Slides stack appropriately; no\n      horizontal scrollbar; HUD shrinks gracefully.\n- [ ] Lighthouse: contrast AA, font-display swap, no layout shift.\n\n## Boundaries\n\n- **Reuse the sister skill's stylesheet.** The composer reads\n  `../editorial-collage/styles.css` at compile time. Do not maintain a\n  duplicate copy here; if Atelier Zero tokens evolve, edit them once\n  in the sister skill.\n- **Reuse the sister skill's image library.** No need to re-prompt or\n  re-render — the same 16 plates work for both surfaces.\n- **Keep slides single-viewport.** If a slide's content does not fit\n  100vh at 1280×800 it will overflow and feel cramped. Trim copy or\n  split into two slides.\n- **Do not add a router.** This is a single-file artifact. Multi-page\n  decks are out of scope; for a multi-deck experience, render each\n  deck separately and link from a parent index.\n\n## See also\n\n- [`editorial-collage`](../editorial-collage/) — landing page sister skill.\n- [`design-systems/atelier-zero/DESIGN.md`](../../design-systems/atelier-zero/DESIGN.md) — token spec.","tags":["editorial","collage","deck","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-editorial-collage-deck","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/editorial-collage-deck","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 · 20530 github stars · SKILL.md body (5,288 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-04T06:51:57.803Z","embedding":null,"createdAt":"2026-05-04T06:51:57.803Z","updatedAt":"2026-05-04T06:51:57.803Z","lastSeenAt":"2026-05-04T06:51:57.803Z","tsv":"'-2':240 '/../design-systems/atelier-zero/design.md':745 '/atelier-zero/design.md':744 '/editorial-collage':63,736 '/editorial-collage/assets':437,447,463 '/editorial-collage/inputs.example.json':435 '/editorial-collage/scripts/imagegen.ts':434 '/editorial-collage/scripts/placeholder.ts':446 '/editorial-collage/styles.css':95,485,617 '/index.html':97 '/inputs.example.json':315 '/schema.ts':362 '01':529 '02':543 '1':239,256,309,524,566 '10':298 '100vh':678 '1080px':585 '11':253,303 '1280':680 '16':167,411,659 '2':190,262,390,428,541 '3':267,464 '4':217,272,278,511 '5':276 '6':280 '640px':587 '7':286 '8':290 '800':681 '9':294 'aa':599 'action':302 'add':697 'advanc':148,538 'alreadi':335 'also':732 'alway':158 'appropri':590 'arrow':41 'arrow-key':40 'art':194,213 'artifact':706 'asset':177,327 'ateli':14,65,481,629 'author':229,310 'background':21 'bar':128,140,552 'baselin':367 'bash':422,468 'bleed':205 'block':323 'bodi':209 'bottom':143 'boundari':607 'brand':129,322,344 'brief':342 'browser':521 'bullet':210,271,275,289 'button':241 'canon':480 'capabl':274 'cell':220 'center':202 'chapter':201 'check':514 'clean':163 'close':237 'collag':3,31,55,62,193,212,232,261,341,417,735 'column':191 'compil':619 'compos':465,475,615 'contain':112,494,508 'content':206,268,273,287,291,674 'contrast':598 'copi':192,343,626,689 'coral':27,79,138,373,550 'corner':533 'counter':50,137,547 'cover':184,257,525 'cramp':687 'cta':236,299 'custom':296 'deck':4,11,34,56,86,131,320,450,467,488,710,719,723 'deck-specif':487 'default':459 'design':318,742 'design-system':741 'devtool':572 'display':74,602 'divid':199 'dot':29,80,375 'duplic':176,625 'edit':633 'editori':2,54,61,340,416,734 'editorial-collag':60,339,415,733 'editorial-collage-deck':1,53 'emphasi':25,78,371 'encod':379 'end':242,304,555 'evolv':632 'exampl':389,462 'experi':720 'eyebrow':207 'fal':430 'fal.ai':429 'feel':285,686 'field':359 'file':9,114,510,705 'fill':145,336,356,553 'final':559 'fit':677 'font':601 'font-display':600 'footer':250 'fresh':520 'full':204 'full-ble':203 'generat':392,404,423 'get':107 'gpt':426 'gpt-imag':425 'grace':596 'grid':497 'height':119 'hero':260 'hint':134 'home':562 'home/end':125 'horizont':592 'html':113,509,517 'hud':47,126,498,528,594 'ii':282 'imag':169,324,403,427,645 'imageri':346,395 'index':730 'inputs.example.json':314,387 'inputs.imagery.assets':452 'inputs.json':94,311,472,477 'instant':582 'instead':87 'inter':71 'ital':23,76,245,369 'italic-serif':22,75,244,368 'jump':556 'keep':665 'key':42,133,431 'keyboard':121,499 'kicker':247,306 'kind':180,354 'label':222,225 'land':91,737 'languag':17 'larg':218 'layer':486 'layout':496,605 'librari':170,413,646 'lighthous':597 'link':726 'live':46,135,458 'load':478 'long':90 'maintain':623 'manifesto':270 'mark':130 'mega':243,305 'method':288 'mirror':329 'mixedtext':363 'motion':570 'multi':708,718 'multi-deck':717 'multi-pag':707 'n':116,530,544 'nav':500 'navig':44,122 'need':648 'npx':432,444,469 'number':279 'numer':198 'one':98,505 'open':317,515 'option':211,230,391 'out/index.html':473 'overflow':684 'page':92,579,709,738 'pageup/pagedown':123 'pagin':39,82,152 'paper':20,70,440 'paper-textur':439 'parent':729 'path':328,453 'per':100 'pick':352 'pitch':238,255,319 'placehold':406,443 'plate':32,186,259,660 'playfair':73 'pngs':457 'portrait':231 'prefer':568 'prefers-reduced-mot':567 'press':534,554,561 'primari':300 'problem':266 'produc':5 'progr':52 'progress':139,551 'prompt':652 'pull':227 'quot':226,228,295 're':651,655 're-prompt':650 're-rend':654 'read':476,616 'reduc':569,571 'regener':419 'render':573,656,721 'resiz':583 'return':563 'reus':164,608,640 'right':235 'roman':197 'roman-numer':196 'router':699 'rule':490 'san':365 'sans-serif':364 'schema.ts':361 'scope':714 'script':407 'scripts/compose.ts':96,471 'scroll':37,103,150,155,492,575 'scroll-snap':36,102,149,491 'scroll-snap-stop':154 'scrollbar':593 'secondari':301 'section':195,263,281 'see':385,731 'select':292 'self':111,507,513 'self-check':512 'self-contain':110,506 'separ':724 'serif':24,77,246,366,370 'set':448 'settl':162 'share':409 'shift':606 'ship':400 'show':526 'shrink':595 'signatur':249,307 'singl':8,109,668,704 'single-fil':7,703 'single-viewport':667 'sister':57,173,331,383,610,638,642,739 'skill':58,174,332,384,397,611,639,643,740 'skill-editorial-collage-deck' 'slide':10,49,85,101,120,136,161,178,254,351,495,523,540,560,565,588,666,672,694 'slot':168,412 'smooth':537,574 'snap':38,104,151,156,493 'source-nexu-io' 'space':43,124,536 'span':26,372 'spec':747 'specif':489 'split':691 'stack':589 'start':189,312 'stat':214,219,277 'still':576 'stop':157 'strategi':325 'stub':394,421 'stylesheet':483,613 'sub':224 'sub-label':223 'surfac':664 'surreal':30 'svg':442 'swap':603 'system':68,743 'tab':522 'termin':28,374 'testimoni':297 'text':93 'textur':441 'tight':72 'time':620 'titl':132,185,208,258 'token':631,746 'top':127,502 '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' 'transit':580 'trim':688 'tsx':433,445,470 'two':693 'type':179,358 'typic':252 'use':35,181,380 'valu':221 'verbatim':348 'via':424 'viewport':99,118,669 'viewport-height':117 'visual':16,67 'warm':19,69 'warm-pap':18 'wherev':455 'word':248 'work':293,577,661 'workflow':308 'write':504 'zero':15,66,482,630","prices":[{"id":"f6f19dc4-f11b-4e39-adde-4f9d3de4d327","listingId":"6fb11599-655a-46b1-84e0-7d141bd04b79","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-04T06:51:57.803Z"}],"sources":[{"listingId":"6fb11599-655a-46b1-84e0-7d141bd04b79","source":"github","sourceId":"nexu-io/open-design/editorial-collage-deck","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/editorial-collage-deck","isPrimary":false,"firstSeenAt":"2026-05-04T06:51:57.803Z","lastSeenAt":"2026-05-04T06:51:57.803Z"}],"details":{"listingId":"6fb11599-655a-46b1-84e0-7d141bd04b79","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"editorial-collage-deck","github":{"repo":"nexu-io/open-design","stars":20530,"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-04T06:39:14Z","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":"e8aed50faf62fb2cf5058dcce33303dcabea8326","skill_md_path":"skills/editorial-collage-deck/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/editorial-collage-deck"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"editorial-collage-deck","description":"Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates). The deck uses scroll-snap pagination, arrow-key + space navigation, a live HUD with slide counter and progress bar, and inherits the canonical stylesheet + 16-slot image library from the sister `editorial-collage` skill."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/editorial-collage-deck"},"updatedAt":"2026-05-04T06:51:57.803Z"}}