{"id":"9444722c-2d2b-492c-8e40-6adc00d3f169","shortId":"8D7dWY","kind":"skill","title":"html-ppt-zhangzara-scatterbrain","tagline":"Scatterbrain — Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack. Anything that should feel like a designer's whiteboard: brainstorms, workshops, creative-agency credentials, design-thinking sessions, ideation pitches, art-direction re","description":"# Scatterbrain\n\n> Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack.\n\nA single self-contained HTML deck — typography, palette, decorative system,\nand slide vocabulary are all tuned together. Mixing layouts across templates\nbreaks the system; stay inside this one.\n\n## At a glance\n\n- **Scheme:** light\n- **Formality:** low\n- **Density:** high\n- **Slides in demo:** 10\n\n## Best for\n\nAnything that should feel like a designer's whiteboard: brainstorms, workshops, creative-agency credentials, design-thinking sessions, ideation pitches, art-direction reviews. Equally fun for any deck — including tech, research, or business — that wants to read as in-progress thinking rather than polished conclusions.\n\n## Avoid for\n\nContexts that demand precision and institutional weight — the post-it sticky-note aesthetic intentionally reads as warm and unfinished.\n\n## Workflow\n\n1. **Clone `example.html`** into the user's workspace as the working file.\n2. **Replace placeholder content** with the user's real headlines, body copy,\n numbers, names, dates, and section labels. Match existing dimensions when\n swapping image placeholders.\n3. **Preserve the design system.** Never substitute fonts, recolor the palette,\n restructure the layout grid, or strip decorative elements (corner brackets,\n paper grain, geometric shapes, illustrated SVGs). They are part of the\n identity.\n4. **Adjust deck length by duplicating layouts.** If the user has more content\n than the demo holds, duplicate an existing slide of the most appropriate\n layout. If less, drop slides from the bottom. Update page-number labels.\n5. **Designing missing layouts:** if a slide needs a layout the template\n doesn't have, design it from scratch using the same fonts, palette,\n decorative vocabulary, spacing rhythm, and component grammar — never bail\n to a different template.\n6. **Keep the navigation runtime as shipped.** If the deck ships an\n `assets/deck-stage.js` or inline keyboard handler, leave it intact.\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\n## Source & license\n\nVendored from upstream MIT-licensed\n[`zarazhangrui/beautiful-html-templates`](https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/scatterbrain).\n\nThe full upstream MIT license text — including the original copyright notice — ships in this skill at\n[`LICENSE`](./LICENSE) and must be redistributed alongside any copy of `example.html`,\n`template.json`, or any vendored `assets/` runtime. See `template.json` for the upstream metadata snapshot.","tags":["html","ppt","zhangzara","scatterbrain","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-scatterbrain","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/html-ppt-zhangzara-scatterbrain","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,717 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:23.874Z","embedding":null,"createdAt":"2026-05-08T06:51:50.531Z","updatedAt":"2026-05-11T06:52:23.874Z","lastSeenAt":"2026-05-11T06:52:23.874Z","tsv":"'/license':378 '/zarazhangrui/beautiful-html-templates/tree/main/templates/scatterbrain).':360 '1':179 '10':104 '2':191 '3':216 '4':249 '5':287 '6':324 'across':83 'adjust':250 'aesthet':171 'agenc':35,120 'alongsid':383 'anyth':22,107 'appropri':273 'art':44,129 'art-direct':43,128 'asset':392 'assets/deck-stage.js':336 'avoid':155 'bail':319 'best':105 'bodi':201 'bottom':281 'bracket':236 'brainstorm':31,116 'break':85 'busi':141 'caveat':14,55 'clone':180 'compon':316 'conclus':154 'contain':67 'content':194,261 'context':157 'contract':345 'copi':202,385 'copyright':370 'corner':235 'creativ':34,119 'creative-ag':33,118 'credenti':36,121 'date':205 'deck':69,136,251,333 'decor':72,233,311 'demand':159 'demo':103,264 'densiti':99 'design':28,38,113,123,219,288,302 'design-think':37,122 'differ':322 'dimens':211 'direct':45,130 'doesn':299 'drop':277 'duplic':254,266 'element':234 'emit':346 'equal':132 'example.html':181,387 'exist':210,268 'feel':25,110 'file':190 'font':223,309 'formal':97 'full':362 'fun':133 'geometr':239 'github.com':359 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/scatterbrain).':358 'glanc':94 'grain':238 'grammar':317 'grid':230 'handler':340 'handwrit':15,56 'headlin':200 'high':100 'hold':265 'html':2,68 'html-ppt-zhangzara-scatterbrain':1 'ideat':41,126 'ident':248 'illustr':241 'imag':214 'in-progress':147 'includ':137,367 'inlin':338 'insid':89 'inspir':10,51 'institut':162 'intact':343 'intent':172 'keep':325 'keyboard':339 'label':208,286 'layout':82,229,255,274,290,296 'leav':341 'length':252 'less':276 'licens':350,356,365,377 'light':96 'like':26,111 'low':98 'match':209 'metadata':399 'miss':289 'mit':355,364 'mit-licens':354 'mix':81 'must':380 'name':204 'navig':327 'need':294 'never':221,318 'note':13,54,170 'notic':371 'number':203,285 'one':91 'origin':369 'output':344 'page':284 'page-numb':283 'palett':71,226,310 'paper':237 'part':245 'pastel':11,52 'pitch':42,127 'placehold':193,215 'polish':153 'post':8,49,166 'post-it':7,48,165 'ppt':3 'precis':160 'preserv':217 'progress':149 'rather':151 're':46 'read':145,173 'real':199 'recolor':224 'redistribut':382 'replac':192 'research':139 'restructur':227 'review':131 'rhythm':314 'runtim':328,393 'scatterbrain':5,6,47 'scheme':95 'scratch':305 'section':207 'see':394 'self':66 'self-contain':65 'session':40,125 'shape':240 'ship':330,334,372 'shrikhand':16,57 'singl':64 'skill':375 'skill-html-ppt-zhangzara-scatterbrain' 'slab':19,60 'slide':75,101,269,278,293 'snapshot':400 'sourc':349 'source-nexu-io' 'space':313 'stack':21,62 'stay':88 'sticki':12,53,169 'sticky-not':168 'strip':232 'substitut':222 'svgs':242 'swap':213 'system':73,87,220 'tag':348 'tech':138 'templat':84,298,323 'template.json':388,395 'text':366 'think':39,124,150 'togeth':80 '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' 'tune':79 'type':20,61 'typographi':70 'unfinish':177 'updat':282 'upstream':353,363,398 'use':306 'user':184,197,258 'vendor':351,391 'vocabulari':76,312 'want':143 'warm':175 'weight':163 'whiteboard':30,115 'work':189 'workflow':178 'workshop':32,117 'workspac':186 'zarazhangrui/beautiful-html-templates':357 'zhangzara':4 'zilla':18,59","prices":[{"id":"a0830c65-7da1-415d-b869-7f3a3b0a3068","listingId":"9444722c-2d2b-492c-8e40-6adc00d3f169","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-08T06:51:50.531Z"}],"sources":[{"listingId":"9444722c-2d2b-492c-8e40-6adc00d3f169","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-scatterbrain","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-scatterbrain","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:50.531Z","lastSeenAt":"2026-05-11T06:52:23.874Z"}],"details":{"listingId":"9444722c-2d2b-492c-8e40-6adc00d3f169","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-scatterbrain","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":"6f1ac0a5b7275e15674c52fe087f946d255dd61e","skill_md_path":"skills/html-ppt-zhangzara-scatterbrain/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-scatterbrain"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-scatterbrain","description":"Scatterbrain — Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack. Anything that should feel like a designer's whiteboard: brainstorms, workshops, creative-agency credentials, design-thinking sessions, ideation pitches, art-direction reviews."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-scatterbrain"},"updatedAt":"2026-05-11T06:52:23.874Z"}}