{"id":"1957e62a-5c3e-498b-b18d-69a698304a1e","shortId":"KDM92M","kind":"skill","title":"html-ppt-zhangzara-capsule","tagline":"Capsule — Modular pill-shaped cards on warm bone with a full pastel-pop palette. Anything that should feel modular, modern, and a little Y2K: lifestyle brands, creator portfolios, DTC launches, beauty / wellness, agency credentials.","description":"# Capsule\n\n> Modular pill-shaped cards on warm bone with a full pastel-pop palette.\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:** medium\n- **Slides in demo:** 10\n\n## Best for\n\nAnything that should feel modular, modern, and a little Y2K: lifestyle brands, creator portfolios, DTC launches, beauty / wellness, agency credentials. Also fun for a playful tech demo or a research deck that wants pop-art clarity instead of gravitas.\n\n## Avoid for\n\nContexts that require traditional institutional weight — the capsule shapes and pastel pops actively soften authority.\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/capsule).\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","capsule","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-capsule","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-capsule","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,601 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.337Z","embedding":null,"createdAt":"2026-05-08T06:51:49.011Z","updatedAt":"2026-05-11T06:52:22.337Z","lastSeenAt":"2026-05-11T06:52:22.337Z","tsv":"'/license':361 '/zarazhangrui/beautiful-html-templates/tree/main/templates/capsule).':343 '1':162 '10':101 '2':174 '3':199 '4':232 '5':270 '6':307 'across':78 'activ':158 'adjust':233 'agenc':40,122 'alongsid':366 'also':124 'anyth':22,104 'appropri':256 'art':139 'asset':375 'assets/deck-stage.js':319 'author':160 'avoid':144 'bail':302 'beauti':38,120 'best':102 'bodi':184 'bone':14,50 'bottom':264 'bracket':219 'brand':33,115 'break':80 'capsul':5,6,42,153 'card':11,47 'clariti':140 'clone':163 'compon':299 'contain':62 'content':177,244 'context':146 'contract':328 'copi':185,368 'copyright':353 'corner':218 'creator':34,116 'credenti':41,123 'date':188 'deck':64,134,234,316 'decor':67,216,294 'demo':100,130,247 'densiti':96 'design':202,271,285 'differ':305 'dimens':194 'doesn':282 'drop':260 'dtc':36,118 'duplic':237,249 'element':217 'emit':329 'example.html':164,370 'exist':193,251 'feel':25,107 'file':173 'font':206,292 'formal':92 'full':17,53,345 'fun':125 'geometr':222 'github.com':342 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/capsule).':341 'glanc':89 'grain':221 'grammar':300 'gravita':143 'grid':213 'handler':323 'headlin':183 'hold':248 'html':2,63 'html-ppt-zhangzara-capsul':1 'ident':231 'illustr':224 'imag':197 'includ':350 'inlin':321 'insid':84 'instead':141 'institut':150 'intact':326 'keep':308 'keyboard':322 'label':191,269 'launch':37,119 'layout':77,212,238,257,273,279 'leav':324 'length':235 'less':259 'licens':333,339,348,360 'lifestyl':32,114 'light':91 'littl':30,112 'low':95 'match':192 'medium':94,97 'medium-low':93 'metadata':382 'miss':272 'mit':338,347 'mit-licens':337 'mix':76 'modern':27,109 'modular':7,26,43,108 'must':363 'name':187 'navig':310 'need':277 'never':204,301 'notic':354 'number':186,268 'one':86 'origin':352 'output':327 'page':267 'page-numb':266 'palett':21,57,66,209,293 'paper':220 'part':228 'pastel':19,55,156 'pastel-pop':18,54 'pill':9,45 'pill-shap':8,44 'placehold':176,198 'play':128 'pop':20,56,138,157 'pop-art':137 'portfolio':35,117 'ppt':3 'preserv':200 'real':182 'recolor':207 'redistribut':365 'replac':175 'requir':148 'research':133 'restructur':210 'rhythm':297 'runtim':311,376 'scheme':90 'scratch':288 'section':190 'see':377 'self':61 'self-contain':60 'shape':10,46,154,223 'ship':313,317,355 'singl':59 'skill':358 'skill-html-ppt-zhangzara-capsule' 'slide':70,98,252,261,276 'snapshot':383 'soften':159 'sourc':332 'source-nexu-io' 'space':296 'stay':83 'strip':215 'substitut':205 'svgs':225 'swap':196 'system':68,82,203 'tag':331 'tech':129 'templat':79,281,306 'template.json':371,378 'text':349 'togeth':75 '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':149 'tune':74 'typographi':65 'updat':265 'upstream':336,346,381 'use':289 'user':167,180,241 'vendor':334,374 'vocabulari':71,295 'want':136 'warm':13,49 'weight':151 'well':39,121 'work':172 'workflow':161 'workspac':169 'y2k':31,113 'zarazhangrui/beautiful-html-templates':340 'zhangzara':4","prices":[{"id":"ed9e4963-5ddc-4477-9591-384253d97546","listingId":"1957e62a-5c3e-498b-b18d-69a698304a1e","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.011Z"}],"sources":[{"listingId":"1957e62a-5c3e-498b-b18d-69a698304a1e","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-capsule","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-capsule","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:49.011Z","lastSeenAt":"2026-05-11T06:52:22.337Z"}],"details":{"listingId":"1957e62a-5c3e-498b-b18d-69a698304a1e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-capsule","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":"6f77bf53028bcdc316b04ea2b561327b8d7f2dd3","skill_md_path":"skills/html-ppt-zhangzara-capsule/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-capsule"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-capsule","description":"Capsule — Modular pill-shaped cards on warm bone with a full pastel-pop palette. Anything that should feel modular, modern, and a little Y2K: lifestyle brands, creator portfolios, DTC launches, beauty / wellness, agency credentials."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-capsule"},"updatedAt":"2026-05-11T06:52:22.337Z"}}