{"id":"c9723b95-bbf6-40cb-b80e-bda409795f6b","shortId":"7AkJw3","kind":"skill","title":"web-prototype-taste-editorial","tagline":"Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.","description":"# Web Prototype — Editorial Minimalism\n\nA single-page web prototype shaped like a Notion/Linear marketing site or premium documentation surface. Use when the brief asks for \"clean\", \"editorial\", \"premium SaaS\", \"documentation\", or \"knowledge product\".\n\n## Source\n\nDistilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/minimalist-skill/SKILL.md` and the spatial-rhythm rules in `skills/taste-skill/SKILL.md`. See `example.html` in this directory for a fully-realized template.\n\n## Hard rules\n\n- **Canvas:** warm off-white (`#FBFBFA` or `#F7F6F3`), never pure white.\n- **Foreground:** off-black `#111111`, secondary text `#787774`. Never `#000000`.\n- **Borders:** `1px solid #EAEAEA` only. No drop shadows above `0 1px 2px rgba(0,0,0,0.04)`.\n- **Type pairing:** display in editorial serif (Instrument Serif / Newsreader / Lyon), body in grotesque (Geist / Switzer / SF Pro), monospace for meta/keystrokes (Geist Mono / JetBrains Mono).\n- **Display tracking:** `letter-spacing: -0.025em`, `line-height: 1.05`.\n- **Pastel chips only:** muted backgrounds (`#FDEBEC`, `#E1F3FE`, `#EDF3EC`, `#FBF3DB`) for tags/badges. Never as section backgrounds.\n- **Containers:** `border-radius: 8–12px` max. No pill containers, no `rounded-full` on cards.\n- **Section padding:** `py-24` minimum, `py-32` for hero.\n\n## Banned\n\n- Inter, Roboto, Open Sans (use Geist / Switzer / SF Pro).\n- Generic Lucide thin-stroke icons (use Phosphor Bold or Radix).\n- Gradients, neon, glassmorphism beyond a subtle navbar blur.\n- Drop shadows above `shadow-sm`. No glows.\n- Generic placeholder names (John Doe / Acme / Lorem). Use specific contextual content.\n- AI copy clichés: \"Elevate\", \"Seamless\", \"Unleash\", \"Next-Gen\".\n- Pure black `#000000`.\n- Centered hero H1 over a dark image.\n\n## Required components\n\n- Sticky pill navbar (translucent off-white, `backdrop-blur-md`, hairline border).\n- Asymmetric hero: serif display left-aligned, eyebrow tag above, lede paragraph at `max-w-[52ch]`.\n- Bento feature grid with **uneven row heights** and visible `1px` dividers — never 3 equal cards.\n- A \"what it isn't\" or contrast block separated by `border-t` only, no card.\n- Pricing or signup band with one accent CTA.\n- Footer: monospace metadata, single hairline above.\n\n## Motion (subtle only)\n\n- Scroll entry: `translateY(12px) → 0` + `opacity 0 → 1` over `600ms cubic-bezier(0.16, 1, 0.3, 1)`. `IntersectionObserver` only.\n- Hover lift on cards: `box-shadow` from `0 0 0` to `0 2px 8px rgba(0,0,0,0.04)` over `200ms`.\n- Stagger lists by `--index * 80ms`.\n- Animate only `transform` and `opacity`.\n\n## Pre-flight\n\n- [ ] Serif display + grotesque body pairing present\n- [ ] Canvas is warm off-white, foreground is off-black\n- [ ] All cards/dividers use `1px solid #EAEAEA`\n- [ ] At least one asymmetric layout (split, eyebrow tag, uneven bento)\n- [ ] Pastel chips used only for tags, never as block backgrounds\n- [ ] Section padding ≥ `py-24`\n- [ ] No emojis, no banned fonts, no AI clichés","tags":["web","prototype","taste","editorial","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-web-prototype-taste-editorial","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/web-prototype-taste-editorial","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,991 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:27.707Z","embedding":null,"createdAt":"2026-05-03T12:52:15.274Z","updatedAt":"2026-05-11T06:52:27.707Z","lastSeenAt":"2026-05-11T06:52:27.707Z","tsv":"'-0.025':168 '-24':208,461 '-32':211 '/leonxlnx/taste-skill)':78 '0':131,135,136,137,365,367,388,389,390,392,396,397,398 '0.04':138,399 '0.16':374 '0.3':376 '000000':121,273 '1':368,375,377 '1.05':173 '111111':116 '12px':194,364 '1px':18,123,132,322,435 '200ms':401 '2px':133,393 '3':325 '52ch':312 '600ms':370 '787774':119 '8':193 '80ms':406 '8px':394 'accent':350 'acm':256 'ai':262,468 'align':302 'ambient':28 'anim':407 'ask':62 'asymmetr':296,441 'backdrop':291 'backdrop-blur-md':290 'background':178,188,457 'ban':214,465 'band':347 'bento':313,447 'beyond':238 'bezier':373 'black':115,272,431 'block':335,456 'blur':242,292 'bodi':17,149,418 'bold':232 'border':20,122,191,295,339 'border-radius':190 'border-t':338 'box':385 'box-shadow':384 'brief':61 'canva':13,101,421 'card':204,327,343,383 'cards/dividers':433 'center':274 'chip':23,175,449 'clean':64 'cliché':264,469 'compon':282 'contain':189,198 'content':261 'contextu':260 'contrast':334 'copi':263 'cta':351 'cubic':372 'cubic-bezi':371 'dark':279 'directori':92 'display':15,141,163,299,416 'distil':32,73 'divid':323 'document':56,68 'doe':255 'drop':128,243 'e1f3fe':180 'eaeaea':125,437 'edf3ec':181 'editori':5,7,40,65,143 'editorial-minimalist':6 'elev':265 'em':169 'emoji':463 'entri':362 'equal':326 'example.html':89 'eyebrow':303,444 'f7f6f3':108 'fbf3db':182 'fbfbfa':106 'fdebec':179 'featur':314 'flight':414 'font':466 'footer':352 'foreground':112,427 'full':202 'fulli':96 'fully-r':95 'geist':152,159,220 'gen':270 'generic':224,251 'generous':24 'github.com':77 'github.com/leonxlnx/taste-skill)':76 'glassmorph':237 'glow':250 'gradient':235 'grid':315 'grotesqu':16,151,417 'h1':276 'hairlin':19,294,356 'hard':99 'height':172,319 'hero':213,275,297 'hover':380 'icon':229 'imag':280 'index':405 'instrument':145 'inter':215 'intersectionobserv':378 'isn':331 'jetbrain':161 'john':254 'knowledg':70 'layout':442 'least':439 'lede':306 'left':301 'left-align':300 'leonxlnx/taste-skill':34,75 'letter':166 'letter-spac':165 'lift':381 'like':49 'line':171 'line-height':170 'list':403 'lorem':257 'lucid':225 'lyon':148 'macro':26 'macro-whitespac':25 'market':52 'max':195,310 'max-w':309 'md':293 'meta/keystrokes':158 'metadata':354 'micro':30 'micro-mot':29 'minim':41 'minimalist':8,36 'minimalist-skil':35 'minimum':209 'mono':160,162 'monochrom':12 'monospac':156,353 'motion':31,358 'mute':21,177 'name':253 'navbar':241,285 'neon':236 'never':109,120,185,324,454 'newsread':147 'next':269 'next-gen':268 'notion/linear':51 'off-black':113,429 'off-whit':103,287,424 'one':349,440 'opac':366,411 'open':217 'pad':206,459 'page':45 'pair':140,419 'paragraph':307 'pastel':22,174,448 'phosphor':231 'pill':197,284 'placehold':252 'pre':413 'pre-flight':412 'premium':55,66 'present':420 'price':344 'pro':155,223 'product':71 'prototyp':3,10,39,47 'pure':110,271 'py':207,210,460 'radius':192 'radix':234 'realiz':97 'requir':281 'rgba':134,395 'rhythm':84 'roboto':216 'round':201 'rounded-ful':200 'row':318 'rule':85,100 'saa':67 'san':218 'scroll':361 'seamless':266 'secondari':117 'section':187,205,458 'see':88 'separ':336 'serif':14,144,146,298,415 'sf':154,222 'shadow':129,244,247,386 'shadow-sm':246 'shape':48 'signup':346 'singl':44,355 'single-pag':43 'site':53 'skill':37 'skill-web-prototype-taste-editorial' 'skills/minimalist-skill/skill.md':79 'skills/taste-skill/skill.md':87 'sm':248 'solid':124,436 'sourc':72 'source-nexu-io' 'space':167 'spatial':83 'spatial-rhythm':82 'specif':259 'split':443 'stagger':402 'sticki':283 'stroke':228 'subtl':240,359 'surfac':57 'switzer':153,221 'tag':304,445,453 'tags/badges':184 'tast':4 'templat':98 'text':118 'thin':227 'thin-strok':226 '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' 'track':164 'transform':409 'translatey':363 'transluc':286 'type':139 'uneven':317,446 'unleash':267 'use':58,219,230,258,434,450 'visibl':321 'w':311 'warm':11,102,423 'web':2,9,38,46 'web-prototype-taste-editori':1 'white':105,111,289,426 'whitespac':27","prices":[{"id":"a010899b-36e0-4a0c-b2e3-46a441ce6893","listingId":"c9723b95-bbf6-40cb-b80e-bda409795f6b","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-03T12:52:15.274Z"}],"sources":[{"listingId":"c9723b95-bbf6-40cb-b80e-bda409795f6b","source":"github","sourceId":"nexu-io/open-design/web-prototype-taste-editorial","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/web-prototype-taste-editorial","isPrimary":false,"firstSeenAt":"2026-05-03T12:52:15.274Z","lastSeenAt":"2026-05-11T06:52:27.707Z"},{"listingId":"c9723b95-bbf6-40cb-b80e-bda409795f6b","source":"skills_sh","sourceId":"nexu-io/open-design/web-prototype-taste-editorial","sourceUrl":"https://skills.sh/nexu-io/open-design/web-prototype-taste-editorial","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:46.148Z","lastSeenAt":"2026-05-07T22:42:24.208Z"}],"details":{"listingId":"c9723b95-bbf6-40cb-b80e-bda409795f6b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"web-prototype-taste-editorial","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":"d69ff36bb35b7812c71c76718953d00def341bcd","skill_md_path":"skills/web-prototype-taste-editorial/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/web-prototype-taste-editorial"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"web-prototype-taste-editorial","description":"Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/web-prototype-taste-editorial"},"updatedAt":"2026-05-11T06:52:27.707Z"}}