{"id":"817f2fe7-05a1-4eac-a584-a115351959eb","shortId":"e2rHHy","kind":"skill","title":"html-ppt-zhangzara-block-frame","tagline":"BlockFrame — Neobrutalist deck with pastel-neon color blocks and chunky black borders. Anything that should feel pop-graphic and design-led: indie SaaS launches, agency credentials, creative reviews, brand redesigns.","description":"# BlockFrame\n\n> Neobrutalist deck with pastel-neon color blocks and chunky black borders.\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:** medium-low\n- **Density:** high\n- **Slides in demo:** 10\n\n## Best for\n\nAnything that should feel pop-graphic and design-led: indie SaaS launches, agency credentials, creative reviews, brand redesigns. Also a strong unexpected pick for tech, finance, or research when the speaker wants to land as confident and contemporary rather than buttoned-up.\n\n## Avoid for\n\nContexts that require quiet institutional restraint or traditional weight (regulated disclosures, formal legal briefs).\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/block-frame).\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","block","frame","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-block-frame","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-block-frame","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,639 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:22.032Z","embedding":null,"createdAt":"2026-05-08T06:51:48.709Z","updatedAt":"2026-05-11T06:52:22.032Z","lastSeenAt":"2026-05-11T06:52:22.032Z","tsv":"'/license':360 '/zarazhangrui/beautiful-html-templates/tree/main/templates/block-frame).':342 '1':161 '10':96 '2':173 '3':198 '4':231 '5':269 '6':306 'across':73 'adjust':232 'agenc':34,113 'alongsid':365 'also':119 'anyth':20,99 'appropri':255 'asset':374 'assets/deck-stage.js':318 'avoid':144 'bail':301 'best':97 'black':18,51 'block':5,15,48 'blockfram':7,40 'bodi':183 'border':19,52 'bottom':263 'bracket':218 'brand':38,117 'break':75 'brief':159 'button':142 'buttoned-up':141 'chunki':17,50 'clone':162 'color':14,47 'compon':298 'confid':136 'contain':57 'contemporari':138 'content':176,243 'context':146 'contract':327 'copi':184,367 'copyright':352 'corner':217 'creativ':36,115 'credenti':35,114 'date':187 'deck':9,42,59,233,315 'decor':62,215,293 'demo':95,246 'densiti':91 'design':29,108,201,270,284 'design-l':28,107 'differ':304 'dimens':193 'disclosur':156 'doesn':281 'drop':259 'duplic':236,248 'element':216 'emit':328 'example.html':163,369 'exist':192,250 'feel':23,102 'file':172 'financ':126 'font':205,291 'formal':87,157 'frame':6 'full':344 'geometr':221 'github.com':341 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/block-frame).':340 'glanc':84 'grain':220 'grammar':299 'graphic':26,105 'grid':212 'handler':322 'headlin':182 'high':92 'hold':247 'html':2,58 'html-ppt-zhangzara-block-fram':1 'ident':230 'illustr':223 'imag':196 'includ':349 'indi':31,110 'inlin':320 'insid':79 'institut':150 'intact':325 'keep':307 'keyboard':321 'label':190,268 'land':134 'launch':33,112 'layout':72,211,237,256,272,278 'leav':323 'led':30,109 'legal':158 'length':234 'less':258 'licens':332,338,347,359 'light':86 'low':90 'match':191 'medium':89 'medium-low':88 'metadata':381 'miss':271 'mit':337,346 'mit-licens':336 'mix':71 'must':362 'name':186 'navig':309 'need':276 'neobrutalist':8,41 'neon':13,46 'never':203,300 'notic':353 'number':185,267 'one':81 'origin':351 'output':326 'page':266 'page-numb':265 'palett':61,208,292 'paper':219 'part':227 'pastel':12,45 'pastel-neon':11,44 'pick':123 'placehold':175,197 'pop':25,104 'pop-graph':24,103 'ppt':3 'preserv':199 'quiet':149 'rather':139 'real':181 'recolor':206 'redesign':39,118 'redistribut':364 'regul':155 'replac':174 'requir':148 'research':128 'restraint':151 'restructur':209 'review':37,116 'rhythm':296 'runtim':310,375 'saa':32,111 'scheme':85 'scratch':287 'section':189 'see':376 'self':56 'self-contain':55 'shape':222 'ship':312,316,354 'singl':54 'skill':357 'skill-html-ppt-zhangzara-block-frame' 'slide':65,93,251,260,275 'snapshot':382 'sourc':331 'source-nexu-io' 'space':295 'speaker':131 'stay':78 'strip':214 'strong':121 'substitut':204 'svgs':224 'swap':195 'system':63,77,202 'tag':330 'tech':125 'templat':74,280,305 'template.json':370,377 'text':348 'togeth':70 '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' 'tradit':153 'tune':69 'typographi':60 'unexpect':122 'updat':264 'upstream':335,345,380 'use':288 'user':166,179,240 'vendor':333,373 'vocabulari':66,294 'want':132 'weight':154 'work':171 'workflow':160 'workspac':168 'zarazhangrui/beautiful-html-templates':339 'zhangzara':4","prices":[{"id":"6797e0c8-1dc3-4811-9e85-284be88219c8","listingId":"817f2fe7-05a1-4eac-a584-a115351959eb","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:48.709Z"}],"sources":[{"listingId":"817f2fe7-05a1-4eac-a584-a115351959eb","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-block-frame","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-block-frame","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:48.709Z","lastSeenAt":"2026-05-11T06:52:22.032Z"}],"details":{"listingId":"817f2fe7-05a1-4eac-a584-a115351959eb","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-block-frame","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":"ea0e8af31a16c6f2b3d9409b2309166726c92bae","skill_md_path":"skills/html-ppt-zhangzara-block-frame/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-block-frame"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-block-frame","description":"BlockFrame — Neobrutalist deck with pastel-neon color blocks and chunky black borders. Anything that should feel pop-graphic and design-led: indie SaaS launches, agency credentials, creative reviews, brand redesigns."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-block-frame"},"updatedAt":"2026-05-11T06:52:22.032Z"}}