{"id":"4ee0147c-8426-4552-92fa-3e0580edaa36","shortId":"zYDMgQ","kind":"skill","title":"html-ppt-zhangzara-broadside","tagline":"Broadside — Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack. Anything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statement","description":"# Broadside\n\n> Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese 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:** dark\n- **Formality:** medium-high\n- **Density:** medium\n- **Slides in demo:** 16\n\n## Best for\n\nAnything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statements. Also a striking pick for tech, research, or business decks that want a dramatic single-accent editorial feel.\n\n## Avoid for\n\nDecks that need to feel quiet, warm, or institutionally traditional — the dark canvas with fire-orange accent commits to drama.\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/broadside).\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","broadside","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-broadside","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-broadside","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,674 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.255Z","embedding":null,"createdAt":"2026-05-08T06:51:48.939Z","updatedAt":"2026-05-11T06:52:22.255Z","lastSeenAt":"2026-05-11T06:52:22.255Z","tsv":"'/license':370 '/zarazhangrui/beautiful-html-templates/tree/main/templates/broadside).':352 '1':171 '16':102 '2':183 '3':208 '4':241 '5':279 '6':316 'accent':15,53,144,166 'across':79 'adjust':242 'alongsid':375 'also':128 'anyth':21,105 'appropri':265 'asset':384 'assets/deck-stage.js':328 'avoid':147 'bail':311 'best':103 'bilingu':17,38,55,122 'bodi':193 'bottom':273 'bracket':228 'brand':30,114 'break':81 'broadsid':5,6,27,44,111 'busi':136 'canva':9,47,161 'clone':172 'commit':167 'compon':308 'contain':63 'content':186,253 'contract':337 'copi':194,377 'copyright':362 'corner':227 'cultur':34,118 'dark':7,45,92,160 'date':197 'deck':40,65,124,137,149,243,325 'decor':68,225,303 'demo':101,256 'densiti':97 'design':36,120,211,280,294 'differ':314 'dimens':203 'doesn':291 'drama':169 'dramat':141 'drop':269 'duplic':246,258 'editori':8,46,145 'element':226 'emit':338 'en/cn':39,123 'example.html':173,379 'exist':202,260 'feel':146,153 'file':182 'fire':13,51,164 'fire-orang':163 'font':215,301 'formal':93 'founder':41,125 'full':354 'geometr':231 'github.com':351 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/broadside).':350 'glanc':90 'grain':230 'grammar':309 'grid':222 'handler':332 'headlin':29,113,192 'high':96 'hold':257 'html':2,64 'html-ppt-zhangzara-broadsid':1 'ident':240 'illustr':233 'imag':206 'includ':359 'inlin':330 'insid':85 'institut':157 'intact':335 'keep':317 'keyboard':331 'label':200,278 'land':24,108 'latin/chinese':18,56 'layout':78,221,247,266,282,288 'leav':333 'length':244 'less':268 'licens':342,348,357,369 'like':25,109 'magazin':32,116 'manifesto':31,115 'match':201 'medium':95,98 'medium-high':94 'metadata':391 'miss':281 'mit':347,356 'mit-licens':346 'mix':77 'must':372 'name':196 'navig':319 'need':151,286 'never':213,310 'newspap':28,112 'notic':363 'number':195,277 'one':87 'orang':14,52,165 'origin':361 'output':336 'page':276 'page-numb':275 'palett':67,218,302 'paper':229 'part':237 'pick':131 'pitch':35,119 'placehold':185,207 'ppt':3 'preserv':209 'quiet':154 'real':191 'recolor':216 'redistribut':374 'replac':184 'research':134 'restructur':219 'rhythm':306 'runtim':320,385 'scheme':91 'scratch':297 'section':199 'see':386 'self':62 'self-contain':61 'shape':232 'ship':322,326,364 'singl':12,50,60,143 'single-acc':142 'skill':367 'skill-html-ppt-zhangzara-broadside' 'slide':71,99,261,270,285 'snapshot':392 'sourc':341 'source-nexu-io' 'space':305 'stack':20,58 'statement':43,127 'stay':84 'strike':130 'strip':224 'substitut':214 'svgs':234 'swap':205 'system':69,83,212 'tag':340 'talk':37,121 'tech':133 'templat':80,290,315 'template.json':380,387 'text':358 'togeth':76 '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':158 'tune':75 'type':19,57 'typographi':66 'updat':274 'upstream':345,355,390 'use':298 'user':176,189,250 'vendor':343,383 'vision':42,126 'vocabulari':72,304 'want':139 'warm':155 'work':181 'workflow':170 'workspac':178 'zarazhangrui/beautiful-html-templates':349 'zhangzara':4","prices":[{"id":"b42fdebc-c34d-4ada-9b80-0c429974e61e","listingId":"4ee0147c-8426-4552-92fa-3e0580edaa36","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.939Z"}],"sources":[{"listingId":"4ee0147c-8426-4552-92fa-3e0580edaa36","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-broadside","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-broadside","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:48.939Z","lastSeenAt":"2026-05-11T06:52:22.255Z"}],"details":{"listingId":"4ee0147c-8426-4552-92fa-3e0580edaa36","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-broadside","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":"b1c2d1b6cc9a008e05d58c3e3271b62dfa6a0b81","skill_md_path":"skills/html-ppt-zhangzara-broadside/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-broadside"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-broadside","description":"Broadside — Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack. Anything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statements."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-broadside"},"updatedAt":"2026-05-11T06:52:22.255Z"}}