{"id":"0310046b-1187-48c0-b423-87a78070cd69","shortId":"ytCwU2","kind":"skill","title":"html-ppt-zhangzara-editorial-tri-tone","tagline":"Editorial Tri-Tone — Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif. Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews.","description":"# Editorial Tri-Tone\n\n> Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif.\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-high\n- **Density:** medium\n- **Slides in demo:** 8\n\n## Best for\n\nAnything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews. Equally good for any deck — including tech, research, or business — that wants tri-tone discipline and serif/sans contrast instead of the usual neutrals.\n\n## Avoid for\n\nDecks that need to read as soft or comforting — the burgundy/pink/cream tri-tone is intentionally high-contrast and styled.\n\n## Workflow\n\n1. **Clone `example.html` AND the `assets/` folder** into the user's workspace.\n   This template ships an `assets/deck-stage.js` runtime (keyboard navigation,\n   stage rendering); the HTML references it as `assets/deck-stage.js`, so the\n   file must sit next to the cloned HTML or that path will 404 in the generated\n   artifact and navigation will silently break. Inlining the JS into a single\n   `<script>` block in the HTML is an acceptable alternative when a single\n   self-contained file is preferred.\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 `<artifact>` tags:\n\n```\n<artifact identifier=\"zhangzara-editorial-tri-tone\" type=\"text/html\" title=\"Deck Title\">\n<!doctype html>\n<html>...</html>\n</artifact>\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/editorial-tri-tone).\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","editorial","tri","tone","open","design","nexu-io","agent-skills","ai-agents","ai-design"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-editorial-tri-tone","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-editorial-tri-tone","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 (3,153 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.795Z","embedding":null,"createdAt":"2026-05-08T06:51:49.465Z","updatedAt":"2026-05-11T06:52:22.795Z","lastSeenAt":"2026-05-11T06:52:22.795Z","tsv":"'1':184 '404':226 '8':113 'across':90 'anyth':29,116 'art':46,133 'artifact':230 'asset':189 'assets/deck-stage.js':200,211 'avoid':160 'best':114 'brand':42,129 'break':92,235 'bricolag':26,67 'burgundi':23,64 'burgundy/pink/cream':172 'busi':145 'clone':185,220 'color':14,55 'comfort':170 'contain':74 'contrast':154,180 'cream':20,61 'deck':43,76,130,140,162 'decor':79 'deep':22,63 'demo':112 'densiti':108 'direct':47,134 'disciplin':151 'dusti':17,58 'editori':5,8,15,39,49,56,126 'equal':136 'example.html':186 'fashion':36,41,123,128 'fashion-magazin':35,122 'feel':32,119 'file':214 'folder':190 'formal':104 'generat':229 'glanc':101 'good':137 'high':107,179 'high-contrast':178 'html':2,75,207,221 'html-ppt-zhangzara-editorial-tri-ton':1 'includ':141 'inlin':236 'insid':96 'instead':155 'instrument':27,68 'intent':177 'js':238 'keyboard':202 'layout':89 'lifestyl':44,131 'like':33,120 'magazin':37,124 'media':45,132 'medium':106,109 'medium-high':105 'mix':88,103 'must':215 'mustard':19,60 'navig':203,232 'need':164 'neutral':159 'next':217 'one':98 'palett':78 'path':224 'pink':18,59 'pitch':40,127 'ppt':3 'read':166 'refer':208 'render':205 'research':143 'review':48,135 'runtim':201 'scheme':102 'self':73 'self-contain':72 'serif':28,69 'serif/sans':153 'set':24,65 'ship':198 'silent':234 'singl':71,241 'sit':216 'skill' 'skill-html-ppt-zhangzara-editorial-tri-tone' 'slide':82,110 'soft':168 'source-nexu-io' 'spread':38,125 'stage':204 'stay':95 'style':182 'system':16,57,80,94 'tech':142 'templat':91,197 'three':13,54 'three-color':12,53 'togeth':87 'tone':7,11,52,150,175 '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' 'tri':6,10,51,149,174 'tri-ton':9,50,148,173 'tune':86 'typographi':77 'user':193 'usual':158 'vocabulari':83 'want':147 'workflow':183 'workspac':195 'zhangzara':4","prices":[{"id":"46a0dc56-b08d-4b49-b6de-4ed9f0228b25","listingId":"0310046b-1187-48c0-b423-87a78070cd69","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.465Z"}],"sources":[{"listingId":"0310046b-1187-48c0-b423-87a78070cd69","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-editorial-tri-tone","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-editorial-tri-tone","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:49.465Z","lastSeenAt":"2026-05-11T06:52:22.795Z"}],"details":{"listingId":"0310046b-1187-48c0-b423-87a78070cd69","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-editorial-tri-tone","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":"b3cff13a6139df43cafc3c2f9c7326c7f31a6586","skill_md_path":"skills/html-ppt-zhangzara-editorial-tri-tone/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-editorial-tri-tone"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-editorial-tri-tone","description":"Editorial Tri-Tone — Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif. Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-editorial-tri-tone"},"updatedAt":"2026-05-11T06:52:22.795Z"}}