{"id":"e0a5d9ed-85db-42f1-9d8e-00dccef22990","shortId":"vsZ89s","kind":"skill","title":"html-ppt-zhangzara-sakura-chroma","tagline":"Sakura Chroma — Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes. Anything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware ","description":"# Sakura Chroma\n\n> Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes.\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:** low\n- **Density:** medium\n- **Slides in demo:** 8\n\n## Best for\n\nAnything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware brand decks, music-label release schedules, analog studio retrospectives, zine and magazine pitches, kawaii-tech product launches, creative-studio annual reports. Equally good for any deck wanting bold colour, condensed display type, and a tactile printed-product personality.\n\n## Avoid for\n\nDecks that need restrained, corporate, or quiet typography — the bold condensed lockups, ribbon stripes, and primary-colour palette are intentionally loud and product-page-y.\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/sakura-chroma).\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","sakura","chroma","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-sakura-chroma","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-sakura-chroma","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,885 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.800Z","embedding":null,"createdAt":"2026-05-08T06:51:50.459Z","updatedAt":"2026-05-11T06:52:23.800Z","lastSeenAt":"2026-05-11T06:52:23.800Z","tsv":"'/license':404 '/zarazhangrui/beautiful-html-templates/tree/main/templates/sakura-chroma).':386 '1':205 '2':217 '3':242 '4':275 '5':313 '6':350 '8':110 'across':89 'adjust':276 'aesthet':14,55 'alongsid':409 'analog':140 'annual':155 'anyth':28,113 'appropri':299 'asset':418 'assets/deck-stage.js':362 'avoid':175 'bail':345 'best':111 'bodi':227 'bold':21,62,163,186 'bottom':307 'bracket':262 'brand':133 'break':91 'cassett':12,36,53,121 'cassette-packag':11,52 'catalogu':45,130 'checkbox':27,68 'chroma':6,8,49 'clone':206 'color':43,128 'colour':164,194 'compon':342 'condens':20,61,165,187 'contain':73 'content':220,287 'contract':371 'copi':228,411 'copyright':396 'corner':261 'corpor':181 'cream':15,56 'creativ':153 'creative-studio':152 'date':231 'deck':75,134,161,177,277,359 'decor':78,259,337 'demo':109,290 'densiti':105 'design':245,314,328 'diagon':17,58 'differ':348 'dimens':237 'display':166 'doesn':325 'drop':303 'duplic':280,292 'element':260 'emit':372 'equal':157 'example.html':207,413 'exist':236,294 'feel':31,116 'file':216 'font':249,335 'formal':103 'full':388 'geometr':265 'github.com':385 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/sakura-chroma).':384 'glanc':100 'good':158 'grain':264 'grammar':343 'grid':256 'handler':366 'hardwar':47,132 'headlin':226 'hold':291 'html':2,74 'html-ppt-zhangzara-sakura-chroma':1 'ident':274 'illustr':267 'imag':240 'includ':393 'indi':46,131 'inlin':364 'insid':95 'intact':369 'intent':197 'japanes':10,35,51,120 'jis':24,65 'jis-styl':23,64 'kawaii':148 'kawaii-tech':147 'keep':351 'keyboard':365 'label':137,234,312 'launch':151 'layout':88,255,281,300,316,322 'leav':367 'length':278 'less':302 'licens':376,382,391,403 'light':102 'like':32,117 'lockup':188 'loud':198 'low':104 'magazin':145 'match':235 'medium':106 'metadata':425 'miss':315 'mit':381,390 'mit-licens':380 'mix':87 'music':136 'music-label':135 'must':406 'name':230 'navig':353 'need':179,320 'never':247,344 'notic':397 'number':229,311 'one':97 'origin':395 'output':370 'packag':13,37,54,122 'page':202,310 'page-numb':309 'palett':77,195,252,336 'paper':16,57,263 'part':271 'person':174 'pitch':146 'placehold':219,241 'ppt':3 'preserv':243 'primari':193 'primary-colour':192 'print':172 'printed-product':171 'product':44,129,150,173,201 'product-page-i':200 'quiet':183 'rainbow':18,59 'real':225 'recolor':250 'redistribut':408 'releas':138 'replac':218 'report':156 'restrain':180 'restructur':253 'retrospect':142 'rhythm':340 'ribbon':19,60,189 'runtim':354,419 'sakura':5,7,42,48,127 'schedul':139 'scheme':101 'scratch':331 'section':233 'see':420 'self':72 'self-contain':71 'shape':266 'ship':356,360,398 'singl':70 'skill':401 'skill-html-ppt-zhangzara-sakura-chroma' 'slide':81,107,295,304,319 'snapshot':426 'soni':41,126 'sourc':375 'source-nexu-io' 'space':339 'spec':26,67 'stay':94 'strip':258 'stripe':190 'studio':141,154 'style':25,66 'substitut':248 'svgs':268 'swap':239 'system':79,93,246 'tactil':170 'tag':374 'tdk':40,125 'tech':149 'templat':90,324,349 'template.json':414,421 'text':392 'togeth':86 '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':85 'type':22,63,167 'typographi':76,184 'updat':308 'upstream':379,389,424 'use':332 'user':210,223,284 'vendor':377,417 'vintag':9,34,50,119 'vocabulari':82,338 'want':162 'work':215 'workflow':204 'workspac':212 'y':203 'zarazhangrui/beautiful-html-templates':383 'zhangzara':4 'zine':143","prices":[{"id":"34861eab-4b66-4311-b7ec-c8ba2f821385","listingId":"e0a5d9ed-85db-42f1-9d8e-00dccef22990","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:50.459Z"}],"sources":[{"listingId":"e0a5d9ed-85db-42f1-9d8e-00dccef22990","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-sakura-chroma","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-sakura-chroma","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:50.459Z","lastSeenAt":"2026-05-11T06:52:23.800Z"}],"details":{"listingId":"e0a5d9ed-85db-42f1-9d8e-00dccef22990","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-sakura-chroma","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":"74c3531c8cb0360da43b9bb5ac9d27b46b19e107","skill_md_path":"skills/html-ppt-zhangzara-sakura-chroma/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-sakura-chroma"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-sakura-chroma","description":"Sakura Chroma — Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes. Anything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware brand decks, music-label release schedules, analog studio retrospectives, zine and magazine pitches, kawaii-tech product launches, creative-studio annual reports."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-sakura-chroma"},"updatedAt":"2026-05-11T06:52:23.800Z"}}