{"id":"38ce2a5e-e19d-48f5-aae1-19a569791551","shortId":"THpQk4","kind":"skill","title":"editorial-collage","tagline":"Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage). The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-func","description":"# editorial-collage\n\nBuild a single-page editorial landing site (or a slide deck — see the\nsibling [`editorial-collage-deck`](../editorial-collage-deck/) skill)\nin the **Atelier Zero** design system: warm-paper background, Inter\nTight + Playfair Display, italic serif emphasis spans, dotted hairline\nrules, coral terminating dots, scroll-reveal motion, and 16 surreal\ncollage plates.\n\nThe skill is fully **parameterized**. The agent fills one typed\n`inputs.json` from the user's brief; the composer turns that JSON +\nthe canonical [`styles.css`](./styles.css) into a deployable artifact.\n\n```text\ninputs.json + styles.css                       16 image slots\n        │                                            │\n        └──────────► scripts/compose.ts ◄────────────┘\n                            │\n                            ▼\n              <out>/index.html  (self-contained)\n              <out>/assets/      (PNG or SVG)\n```\n\n---\n\n## What you get\n\nA single HTML file with **all** of:\n\n- Editorial topbar (volume / issue / language strip), Headroom-style\n  sticky nav with live GitHub star count.\n- 8 numbered Roman-numeral sections with paper-textured background:\n  hero (with 3 stat rings + 4-step index), about, capabilities (4 cards),\n  labs (5 cards + filter pills + progress bar), method (4 steps with\n  thumbnails), selected work (dark slab + 2 tilted cards), testimonial\n  (pull quote + 5 partner glyphs), CTA (ribbon + email pill).\n- Footer with 4 link columns + huge italic-serif kicker word.\n- Scroll-reveal motion on every section (IntersectionObserver, respects\n  `prefers-reduced-motion`).\n- Fully responsive at 1280 / 1080 / 880 / 560 breakpoints.\n\n---\n\n## Workflow contract\n\nRun these four steps in order. The agent should **complete** each step\nbefore moving on, and prefer asking the user a focused question over\ninventing copy.\n\n### 1. Gather brand inputs\n\nUse `AskQuestion` (or the equivalent in your UI) to collect the brand\nbrief in chunks; do **not** dump the entire `schema.ts` on the user.\nMap their answers into `inputs.json` matching the typed shape.\n\nThe eight question groups, in order:\n\n| Group | Schema fields                                           | Min answers | Notes                                    |\n| :---- | :------------------------------------------------------ | :---------- | :--------------------------------------- |\n| 1     | `brand.{name,mark,tagline,description,location}`        | 5           | Mark = single glyph (Ø, ▲, ★…)           |\n| 2     | `brand.{license,version,year,primary_url,contact_email}`| 4           | URL is required; license defaults Apache-2.0 |\n| 3     | `nav[]` (up to 5)                                       | 3           | Optional count badges                     |\n| 4     | `hero.{label,headline,lead,primary,secondary,stats}`    | All         | Headline as `MixedText` (sans+em+dot)     |\n| 5     | `about` + `capabilities.cards[4]`                       | All         | 4 cards × {num,tag,title,body}            |\n| 6     | `labs.cards[5]` + `method.steps[4]`                     | All         | Both grids fixed-arity                    |\n| 7     | `work.cards[2]` + `testimonial`                         | All         | 5 partner glyphs as inline SVG path data |\n| 8     | `cta` + `footer.{columns[4],mega}`                      | All         | Mega kicker is a `MixedText` like the headlines |\n\nOpen [`inputs.example.json`](./inputs.example.json) for a complete\nworked example (Open Design itself).\n\n### 2. Decide the image strategy\n\n| Strategy          | When to choose                                          | Cost / latency        |\n| :---------------- | :------------------------------------------------------ | :-------------------- |\n| `placeholder`     | First pass. Demo. Slide internal. No image budget yet.  | $0, <1s               |\n| `generate`        | Final delivery. Brand wants original collages.          | ~$0.40, ~6 min        |\n| `bring-your-own`  | User has art direction PNGs. Drop them at `assets_path`.| $0, 0s                |\n\nSet `inputs.imagery.strategy` accordingly.\n\n#### `placeholder` — frame mode\n\n```bash\nnpx tsx scripts/placeholder.ts <out>/assets/\n```\n\nWrites 16 `.svg` files (with `.png` aliases for compatibility) into\n`<out>/assets/`. Each placeholder shows the slot id, ratio, pixel\ndimensions, and the prompt hint from `image-manifest.json`. The\ncomposer's `<img src='./assets/hero.png'>` etc. just work.\n\n#### `generate` — gpt-image-2 mode\n\n```bash\nFAL_KEY=... npx tsx scripts/imagegen.ts <inputs.json> --out=<out>/assets/\n```\n\nCalls fal.ai's `openai/gpt-image-2` synchronous endpoint per slot.\nComposes prompts as: **style anchor** (paper-collage editorial system)\n+ **brand variables** (name / nav / headline / italic emphasis pulled\nfrom `inputs.json`) + **per-slot composition** (e.g. cropped plaster\nhead + tree growing through arch). Skips slots whose target file\nalready exists; pass `--force` to re-render.\n\nWithout `FAL_KEY`, the script prints the prompts so the operator can\nroute them through the `/gpt-image-fal` slash-command skill manually.\n\n#### `bring-your-own`\n\nDrop 16 PNGs matching `assets/image-manifest.json` filenames at\n`inputs.imagery.assets_path`. Done.\n\n### 3. Compose the artifact\n\n```bash\nnpx tsx scripts/compose.ts <inputs.json> <out>/index.html\n```\n\nThe composer reads `inputs.json` and `../styles.css`, then writes one\nself-contained HTML file. The page includes:\n\n- The full Atelier Zero stylesheet, inlined.\n- All section markup with `data-reveal` attributes for staggered\n  scroll motion.\n- Inline IntersectionObserver script (mirrors\n  `apps/landing-page/app/_components/reveal-root.tsx`).\n- Inline Headroom nav script (mirrors `header.tsx`).\n- Inline GitHub star-count fetcher (auto-detects from `brand.primary_url`).\n\n### 4. (Optional) Generate the Next.js scaffold\n\nFor deployable production output, **fork the `apps/landing-page/`\nmodule**: copy it to your project root, swap the JSX in `app/page.tsx`\nfor content from your `inputs.json`, and copy your `<out>/assets/*.png`\ninto `public/assets/`. The Next.js variant supports `next build` →\nstatic `out/` export ready for any CDN.\n\n> A future iteration will bundle a `scripts/compose-nextjs.ts` that\n> emits the entire `apps/landing-page/` tree from `inputs.json` so this\n> step is one command. Until then, fork-and-edit is the supported path.\n\n---\n\n## Self-check before delivering\n\nBefore marking done, the agent **must** verify:\n\n- [ ] `<out>/index.html` opens in a browser without console errors.\n- [ ] All 16 image slots load (no 404s in DevTools network tab).\n- [ ] Headline italic emphasis spans render in Playfair (not sans).\n- [ ] Coral terminating dots appear at every `display` h1/h2 end.\n- [ ] Scroll from top to bottom; every section animates in once.\n- [ ] Resize to 880px and 560px; no horizontal scroll, no overlap.\n- [ ] `prefers-reduced-motion: reduce` (DevTools → Rendering) disables\n      transitions cleanly.\n- [ ] Lighthouse: contrast AA, font-display swap, no layout shift on the\n      hero (CLS < 0.05).\n\n---\n\n## Files in this skill\n\n```text\nskills/editorial-collage/\n├── SKILL.md                 # this contract\n├── README.md                # quick-start\n├── schema.ts                # typed inputs (single source of truth)\n├── styles.css               # Atelier Zero stylesheet (single source of truth)\n├── inputs.example.json      # Open Design as the worked example\n├── example.html             # canonical rendering (regenerated from inputs.example.json)\n├── scripts/\n│   ├── compose.ts           # inputs.json + styles.css → index.html\n│   ├── imagegen.ts          # gpt-image-2 wrapper (fal.ai)\n│   └── placeholder.ts       # SVG paper-textured frames\n└── assets/\n    ├── *.png                # 16 collage plates (Open Design instance)\n    ├── image-manifest.json  # slot → file/dimensions/prompt mapping\n    └── imagegen-prompts.md  # human-readable prompt pack\n```\n\n---\n\n## Boundaries\n\n- **Do not** invent new colors or typefaces. Tokens live in\n  `design-systems/atelier-zero/DESIGN.md`; extend the design system\n  before adding a new ramp here.\n- **Do not** drop `data-reveal` attributes from generated markup.\n  Without them the page goes static and feels dead.\n- **Do not** wrap the composed HTML in a framework that injects its\n  own stylesheet ordering — Atelier Zero relies on stylesheet-order\n  cascade for paper texture and z-index of side rails.\n- **Do not** add a separate stylesheet file for the Next.js variant;\n  copy `styles.css` verbatim into `app/globals.css` so visual parity\n  stays one-to-one.\n\n## See also\n\n- [`design-systems/atelier-zero/DESIGN.md`](../../design-systems/atelier-zero/DESIGN.md) — token spec.\n- [`apps/landing-page/`](../../apps/landing-page/) — deployable Next.js counterpart.\n- [`skills/editorial-collage-deck/`](../editorial-collage-deck/) — sibling slides skill that reuses this design system.","tags":["editorial","collage","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-editorial-collage","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","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 (8,889 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.868Z","embedding":null,"createdAt":"2026-05-04T06:51:57.868Z","updatedAt":"2026-05-04T06:51:57.868Z","lastSeenAt":"2026-05-04T06:51:57.868Z","tsv":"'-2.0':368 '/../apps/landing-page':1079 '/../design-systems/atelier-zero/design.md':1075 '/assets':149,513,524,559,749 '/atelier-zero/design.md':982,1074 '/editorial-collage-deck':74,1084 '/gpt-image-fal':629 '/index.html':145,657,809 '/inputs.example.json':445 '/styles.css':133,663 '0':475,501 '0.05':890 '0.40':484 '0s':502 '1':291,340 '1080':259 '1280':258 '16':38,105,141,515,640,818,952 '1s':476 '2':45,218,352,417,454,550,941 '3':192,369,374,649 '4':195,200,210,233,361,378,396,398,408,432,716 '404s':823 '5':203,224,347,373,393,406,420 '560':261 '560px':860 '6':404,485 '7':415 '8':179,428 '880':260 '880px':858 'aa':878 'accord':505 'ad':988 'add':1047 'agent':27,115,272,806 'alias':520 'alreadi':605 'also':1070 'anchor':572 'anim':853 'answer':321,338 'apach':367 'apartamento':22 'app/globals.css':1060 'app/page.tsx':740 'appear':840 'apps/landing-page':728,777,1078 'apps/landing-page/app/_components/reveal-root.tsx':697 'arch':599 'ariti':414 'art':493 'artifact':137,652 'ask':282 'askquest':296 'asset':40,499,950 'assets/image-manifest.json':643 'ateli':17,78,677,912,1027 'attribut':688,999 'auto':711 'auto-detect':710 'background':85,189 'badg':377 'bar':208 'bash':509,552,653 'bodi':403 'bottom':850 'boundari':968 'brand':34,293,306,341,353,480,578 'brand.primary':714 'breakpoint':262 'brief':35,124,307 'bring':488,636 'bring-your-own':487,635 'browser':813 'budget':473 'build':55,758 'bundl':770 'call':560 'canon':131,927 'capabilities.cards':395 'capabl':199 'card':201,204,220,399 'cascad':1034 'cdn':765 'check':799 'choos':462 'chunk':309 'class':8 'clean':875 'cls':889 'collag':3,25,39,54,72,107,483,575,953 'collect':304 'color':973 'column':235,431 'command':632,786 'compat':522 'complet':274,448 'compos':126,541,568,650,659,1016 'compose.ts':933 'composit':591 'consol':815 'contact':359 'contain':148,669 'content':742 'contract':264,899 'contrast':877 'copi':290,730,747,1056 'coral':97,837 'cost':463 'count':178,376,708 'counterpart':1082 'crop':593 'cta':227,429 'dark':216 'data':427,686,997 'data-rev':685,996 'dead':1011 'decid':455 'deck':66,73 'default':366 'deliv':801 'deliveri':479 'demo':468 'deploy':136,723,1080 'descript':345 'design':80,452,921,956,980,985,1072,1091 'design-system':979,1071 'detect':712 'devtool':825,871 'dimens':533 'direct':494 'disabl':873 'display':89,843,881 'done':648,804 'dot':94,99,392,839 'drop':496,639,995 'dump':312 'e.g':592 'edit':792 'editori':2,12,24,53,60,71,163,576 'editorial-collag':1,52 'editorial-collage-deck':70 'eight':329 'em':391 'email':229,360 'emit':774 'emphasi':92,584,830 'end':845 'endpoint':565 'entir':314,776 'equival':299 'error':816 'etc':543 'everi':247,842,851 'exampl':450,925 'example.html':926 'exist':606 'export':761 'extend':983 'fal':553,614 'fal.ai':561,943 'feel':1010 'fetcher':709 'field':336 'file':159,517,604,671,891,1051 'file/dimensions/prompt':960 'filenam':644 'fill':28,116 'filter':205 'final':478 'first':466 'fix':413 'fixed-ar':412 'focus':286 'font':880 'font-display':879 'footer':231,430 'forc':608 'fork':726,790 'fork-and-edit':789 'four':267 'frame':507,949 'framework':1020 'full':676 'fulli':112,255 'func':51 'futur':767 'gather':292 'generat':37,477,546,718,1001 'get':155 'github':176,705 'glyph':226,350,422 'goe':1007 'gpt':43,548,939 'gpt-imag':42,547,938 'grid':411 'group':331,334 'grow':597 'h1/h2':844 'hairlin':95 'head':595 'header.tsx':703 'headlin':381,387,442,582,828 'headroom':170,699 'headroom-styl':169 'hero':190,379,888 'hint':537 'horizont':862 'html':158,670,1017 'huge':236 'human':964 'human-read':963 'id':530 'imag':44,142,457,472,549,819,940 'image-manifest.json':539,958 'imagegen-prompts.md':962 'imagegen.ts':937 'includ':674 'index':197,1041 'index.html':936 'inject':1022 'inlin':424,680,693,698,704 'input':294,906 'inputs.example.json':444,919,931 'inputs.imagery.assets':646 'inputs.imagery.strategy':504 'inputs.json':31,119,139,323,587,661,745,780,934 'instanc':957 'inter':86 'intern':470 'intersectionobserv':249,694 'invent':289,971 'issu':166 'ital':90,238,583,829 'italic-serif':237 'iter':768 'json':129 'jsx':738 'key':554,615 'kicker':240,436 'lab':202 'label':380 'labs.cards':405 'land':13,61 'languag':20,167 'latenc':464 'layout':884 'lead':382 'licens':354,365 'lighthous':876 'like':440 'link':234 'live':175,977 'load':821 'locat':346 'manual':634 'map':319,961 'mark':343,348,803 'markup':683,1002 'match':324,642 'mega':433,435 'method':209 'method.steps':407 'min':337,486 'mirror':696,702 'mixedtext':389,439 'mode':508,551 'modul':729 'monocl':21 'motion':103,245,254,692,869 'move':278 'must':807 'name':342,580 'nav':173,370,581,700 'network':826 'new':972,990 'next':757 'next.js':720,754,1054,1081 'note':339 'npx':510,555,654 'num':400 'number':180 'numer':183 'one':117,666,785,1066,1068 'one-to-on':1065 'open':443,451,810,920,955 'openai/gpt-image-2':563 'oper':623 'option':36,375,717 'order':270,333,1026,1033 'origin':482 'output':725 'overlap':865 'pack':967 'page':11,59,673,1006 'paper':84,187,574,947,1036 'paper-collag':573 'paper-textur':186,946 'parameter':113 'pariti':1063 'partner':225,421 'pass':467,607 'path':426,500,647,796 'per':566,589 'per-slot':588 'pill':206,230 'pixel':532 'placehold':465,506,526 'placeholder.ts':944 'plaster':594 'plate':108,954 'playfair':88,834 'png':150,519,750,951 'pngs':495,641 'prefer':252,281,867 'prefers-reduced-mot':251,866 'primari':357,383 'print':618 'produc':4 'product':724 'progress':207 'project':734 'prompt':536,569,620,966 'public/assets':752 'pull':222,585 'pure':50 'pure-func':49 'question':287,330 'quick':902 'quick-start':901 'quot':223 'rail':1044 'ramp':991 'ratio':531 're':611 're-rend':610 'read':660 'readabl':965 'readi':762 'readme.md':900 'reduc':253,868,870 'regener':929 'reli':1029 'render':612,832,872,928 'requir':364 'resiz':856 'respect':250 'respons':256 'reus':1089 'reveal':102,244,687,998 'ribbon':228 'ring':194 'roman':182 'roman-numer':181 'root':735 'rout':625 'rule':96 'run':47,265 'san':390,836 'scaffold':721 'schema':335 'schema.ts':315,904 'script':617,695,701,932 'scripts/compose-nextjs.ts':772 'scripts/compose.ts':144,656 'scripts/imagegen.ts':557 'scripts/placeholder.ts':512 'scroll':101,243,691,846,863 'scroll-rev':100,242 'secondari':384 'section':184,248,682,852 'see':67,1069 'select':214 'self':147,668,798 'self-check':797 'self-contain':146,667 'separ':1049 'serif':91,239 'set':503 'shape':327 'shift':885 'show':527 'sibl':69,1085 'side':1043 'singl':10,58,157,349,907,915 'single-pag':9,57 'site':14,62 'skill':75,110,633,894,1087 'skill-editorial-collage' 'skill.md':897 'skills/editorial-collage':896 'skills/editorial-collage-deck':1083 'skip':600 'slab':217 'slash':631 'slash-command':630 'slide':65,469,1086 'slot':143,529,567,590,601,820,959 'sourc':908,916 'source-nexu-io' 'span':93,831 'spec':1077 'stagger':690 'star':177,707 'star-count':706 'start':903 'stat':193,385 'static':759,1008 'stay':1064 'step':196,211,268,276,783 'sticki':172 'strategi':458,459 'strip':168 'style':171,571 'styles.css':132,140,911,935,1057 'stylesheet':679,914,1025,1032,1050 'stylesheet-ord':1031 'support':756,795 'surreal':106 'svg':152,425,516,945 'swap':736,882 'synchron':564 'system':81,577,981,986,1073,1092 'tab':827 'tag':401 'taglin':344 'target':603 'termin':98,838 'testimoni':221,418 'text':138,895 'textur':188,948,1037 'thumbnail':213 'tight':87 'tilt':219 'titl':402 'token':976,1076 'top':848 'topbar':164 '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':874 'tree':596,778 'truth':910,918 'tsx':511,556,655 'turn':127 'type':30,118,326,905 'typefac':975 'ui':302 'url':358,362,715 'use':295 'user':122,284,318,491 'variabl':579 'variant':755,1055 'verbatim':1058 'verifi':808 'version':355 'via':41 'visual':19,1062 'volum':165 'want':481 'warm':83 'warm-pap':82 'whose':602 'without':613,814,1003 'word':241 'work':215,449,545,924 'work.cards':416 'workflow':263 'world':7 'world-class':6 'wrap':1014 'wrapper':942 'write':514,665 'year':356 'yet':474 'z':1040 'z-index':1039 'zero':18,79,678,913,1028 'étude':23 'ø':351","prices":[{"id":"a28c120d-424b-4283-ad43-c4ca07275d8f","listingId":"38ce2a5e-e19d-48f5-aae1-19a569791551","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.868Z"}],"sources":[{"listingId":"38ce2a5e-e19d-48f5-aae1-19a569791551","source":"github","sourceId":"nexu-io/open-design/editorial-collage","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/editorial-collage","isPrimary":false,"firstSeenAt":"2026-05-04T06:51:57.868Z","lastSeenAt":"2026-05-04T06:51:57.868Z"}],"details":{"listingId":"38ce2a5e-e19d-48f5-aae1-19a569791551","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"editorial-collage","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":"0a427c898df42cfbab135e8fad3f7fd848e06e59","skill_md_path":"skills/editorial-collage/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/editorial-collage"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"editorial-collage","description":"Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage). The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file plus a ready-to-deploy Next.js app. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/editorial-collage"},"updatedAt":"2026-05-04T06:51:57.868Z"}}