{"id":"72ffe1cf-2819-4313-9d46-1abf20b0758a","shortId":"Vc7Pue","kind":"skill","title":"html-ppt-zhangzara-mat","tagline":"Mat — Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones. Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture / interior brands, ceramics / craft / furniture, advisory decks.","description":"# Mat\n\n> Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.\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:** mixed\n- **Formality:** medium\n- **Density:** medium\n- **Slides in demo:** 9\n\n## Best for\n\nAnything that should feel mid-century, tactile, and intentional: design studio credentials, architecture / interior brands, ceramics / craft / furniture, advisory decks. Also a warm, distinctive choice for tech, research, or business decks that want a considered analog feel instead of digital-cool.\n\n## Avoid for\n\nContexts that need fast tech energy or institutional restraint — the muted sage and burnt-orange palette is intentionally warm and slow.\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/mat).\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","mat","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-mat","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-mat","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,678 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.019Z","embedding":null,"createdAt":"2026-05-08T06:51:49.716Z","updatedAt":"2026-05-11T06:52:23.019Z","lastSeenAt":"2026-05-11T06:52:23.019Z","tsv":"'/license':376 '/zarazhangrui/beautiful-html-templates/tree/main/templates/mat).':358 '1':177 '2':189 '3':214 '4':247 '5':285 '6':322 '9':106 'accent':17,57 'across':85 'adjust':248 'advisori':44,128 'alongsid':381 'also':130 'analog':145 'anyth':25,109 'appropri':271 'architectur':38,122 'asset':390 'assets/deck-stage.js':334 'avoid':152 'bail':317 'best':107 'bodi':199 'bone':11,51 'bottom':279 'bracket':234 'brand':40,124 'break':87 'burnt':15,55,168 'burnt-orang':14,54,167 'busi':139 'canva':9,49 'centuri':20,31,60,115 'ceram':41,125 'choic':134 'clone':178 'compon':314 'consid':144 'contain':69 'content':192,259 'context':154 'contract':343 'cool':151 'copi':200,383 'copyright':368 'corner':233 'craft':42,126 'credenti':37,121 'dark':7,47 'date':203 'deck':45,71,129,140,249,331 'decor':74,231,309 'demo':105,262 'densiti':101 'design':35,119,217,286,300 'differ':320 'digit':150 'digital-cool':149 'dimens':209 'distinct':133 'doesn':297 'drop':275 'duplic':252,264 'element':232 'emit':344 'energi':159 'example.html':179,385 'exist':208,266 'fast':157 'feel':28,112,146 'file':188 'font':221,307 'formal':99 'full':360 'furnitur':43,127 'geometr':237 'github.com':357 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/mat).':356 'glanc':96 'grain':236 'grammar':315 'grid':228 'handler':338 'headlin':198 'hold':263 'html':2,70 'html-ppt-zhangzara-mat':1 'ident':246 'illustr':239 'imag':212 'includ':365 'inlin':336 'insid':91 'instead':147 'institut':161 'intact':341 'intent':34,118,172 'interior':39,123 'keep':323 'keyboard':337 'label':206,284 'layout':84,227,253,272,288,294 'leav':339 'length':250 'less':274 'licens':348,354,363,375 'mat':5,6,46 'match':207 'medium':100,102 'metadata':397 'mid':19,30,59,114 'mid-centuri':18,29,58,113 'miss':287 'mit':353,362 'mit-licens':352 'mix':83,98 'modern':21,61 'must':378 'mute':164 'name':202 'navig':325 'need':156,292 'never':219,316 'notic':369 'number':201,283 'one':93 'orang':16,56,169 'origin':367 'output':342 'page':282 'page-numb':281 'palett':73,170,224,308 'paper':12,52,235 'part':243 'placehold':191,213 'ppt':3 'preserv':215 'real':197 'recolor':222 'redistribut':380 'replac':190 'research':137 'restraint':162 'restructur':225 'rhythm':312 'runtim':326,391 'sage':8,48,165 'scheme':97 'scratch':303 'section':205 'see':392 'self':68 'self-contain':67 'shape':238 'ship':328,332,370 'singl':66 'skill':373 'skill-html-ppt-zhangzara-mat' 'slide':77,103,267,276,291 'slow':175 'snapshot':398 'sourc':347 'source-nexu-io' 'space':311 'stay':90 'strip':230 'studio':36,120 'substitut':220 'svgs':240 'swap':211 'system':75,89,218 'tactil':32,116 'tag':346 'tech':136,158 'templat':86,296,321 'template.json':386,393 'text':364 'togeth':82 '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':81 'typographi':72 'underton':24,64 'updat':280 'upstream':351,361,396 'use':304 'user':182,195,256 'vendor':349,389 'vocabulari':78,310 'want':142 'warm':132,173 'wood':23,63 'work':187 'workflow':176 'workspac':184 'zarazhangrui/beautiful-html-templates':355 'zhangzara':4","prices":[{"id":"e2258e53-95e0-40d1-b115-3df9cbca53f4","listingId":"72ffe1cf-2819-4313-9d46-1abf20b0758a","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:49.716Z"}],"sources":[{"listingId":"72ffe1cf-2819-4313-9d46-1abf20b0758a","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-mat","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-mat","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:49.716Z","lastSeenAt":"2026-05-11T06:52:23.019Z"}],"details":{"listingId":"72ffe1cf-2819-4313-9d46-1abf20b0758a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-mat","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":"2f726cf36b6d00ada48c2ee7d28cb226b98797a5","skill_md_path":"skills/html-ppt-zhangzara-mat/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-mat"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-mat","description":"Mat — Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones. Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture / interior brands, ceramics / craft / furniture, advisory decks."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-mat"},"updatedAt":"2026-05-11T06:52:23.019Z"}}