{"id":"12da2486-6d9e-4dc7-91ea-6c7391112c0c","shortId":"AXhst9","kind":"skill","title":"html-ppt-zhangzara-cobalt-grid","tagline":"Cobalt Grid — Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules. Anything that should feel like a quietly serious design / research bulletin, art publication, or curated trend report.","description":"# Cobalt Grid\n\n> Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules.\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:** high\n- **Density:** medium\n- **Slides in demo:** 8\n\n## Best for\n\nAnything that should feel like a quietly serious design / research bulletin, art publication, or curated trend report. Strong for studio annuals, agency capabilities decks, design-research publications, architecture / art / academic decks, and any deck wanting one strict accent colour and a printed-ledger calmness rather than corporate polish.\n\n## Avoid for\n\nDecks that need warmth, multi-colour energy, or a casual / playful voice — the strict cobalt + cream + grid palette is intentionally austere.\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/cobalt-grid).\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","cobalt","grid","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-zhangzara-cobalt-grid","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-cobalt-grid","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,783 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.501Z","embedding":null,"createdAt":"2026-05-08T06:51:49.158Z","updatedAt":"2026-05-11T06:52:22.501Z","lastSeenAt":"2026-05-11T06:52:22.501Z","tsv":"'/license':392 '/zarazhangrui/beautiful-html-templates/tree/main/templates/cobalt-grid).':374 '1':193 '2':205 '3':230 '4':263 '5':301 '6':338 '8':115 'academ':148 'accent':156 'across':94 'adjust':264 'agenc':139 'alongsid':397 'anchor':19,61 'annual':138 'anyth':32,118 'appropri':287 'architectur':146 'art':43,129,147 'asset':406 'assets/deck-stage.js':350 'auster':191 'avoid':168 'bail':333 'best':116 'bodi':215 'bottom':295 'bracket':250 'break':96 'bulletin':42,128 'calm':163 'canva':18,60 'capabl':140 'casual':180 'clone':194 'cobalt':5,7,10,49,52,185 'colour':157,176 'compon':330 'contain':78 'content':208,275 'contract':359 'copi':216,399 'copyright':384 'corner':249 'corpor':166 'cream':186 'curat':46,132 'date':219 'deck':80,141,149,152,170,265,347 'decor':27,69,83,247,325 'demo':114,278 'densiti':110 'design':40,126,143,233,302,316 'design-research':142 'differ':336 'dimens':225 'doesn':313 'drop':291 'duplic':268,280 'electr':9,51 'element':248 'emit':360 'energi':177 'example.html':195,401 'exist':224,282 'feel':35,121 'file':204 'font':237,323 'formal':108 'full':376 'geometr':253 'github.com':373 'github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/cobalt-grid).':372 'glanc':105 'glitch':26,68 'grain':252 'grammar':331 'graph':16,58 'graph-pap':15,57 'grid':6,8,50,187,244 'hairlin':30,72 'handler':354 'headlin':214 'high':109 'hold':279 'html':2,79 'html-ppt-zhangzara-cobalt-grid':1 'ident':262 'illustr':255 'imag':228 'includ':381 'inlin':352 'insid':100 'intact':357 'intent':190 'ital':11,53 'keep':339 'keyboard':353 'label':222,300 'layout':93,243,269,288,304,310 'leav':355 'ledger':162 'length':266 'less':290 'licens':364,370,379,391 'light':107 'like':36,122 'match':223 'medium':111 'metadata':413 'miss':303 'mit':369,378 'mit-licens':368 'mix':92 'multi':175 'multi-colour':174 'must':394 'name':218 'navig':341 'need':172,308 'never':235,332 'notic':385 'number':217,299 'one':102,154 'origin':383 'output':358 'page':298 'page-numb':297 'palett':82,188,240,324 'paper':17,59,251 'part':259 'pixel':25,67 'pixel-glitch':24,66 'placehold':207,229 'play':181 'polish':167 'ppt':3 'preserv':231 'print':161 'printed-ledg':160 'public':44,130,145 'quiet':38,124 'rather':164 'real':213 'recolor':238 'redistribut':396 'replac':206 'report':48,134 'research':41,127,144 'restructur':241 'rhythm':328 'rule':31,73 'runtim':342,407 'scheme':106 'scratch':319 'section':221 'see':408 'self':77 'self-contain':76 'serif':12,54 'serious':39,125 'shape':254 'ship':344,348,386 'singl':75 'skill':389 'skill-html-ppt-zhangzara-cobalt-grid' 'slide':86,112,283,292,307 'slim':29,71 'snapshot':414 'sourc':363 'source-nexu-io' 'space':327 'stair':22,64 'stair-step':21,63 'stay':99 'step':23,65 'strict':155,184 'strip':246 'strong':135 'studio':137 'substitut':236 'svgs':256 'swap':227 'system':84,98,234 'tag':362 'templat':95,312,337 'template.json':402,409 'text':380 'togeth':91 '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' 'trend':47,133 'tune':90 'typographi':81 'updat':296 'upstream':367,377,412 'use':320 'user':198,211,272 'vendor':365,405 'vocabulari':87,326 'voic':182 'want':153 'warmth':173 'work':203 'workflow':192 'workspac':200 'zarazhangrui/beautiful-html-templates':371 'zhangzara':4","prices":[{"id":"4c7426c3-03d8-4872-8819-e549b4f9e254","listingId":"12da2486-6d9e-4dc7-91ea-6c7391112c0c","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.158Z"}],"sources":[{"listingId":"12da2486-6d9e-4dc7-91ea-6c7391112c0c","source":"github","sourceId":"nexu-io/open-design/html-ppt-zhangzara-cobalt-grid","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-cobalt-grid","isPrimary":false,"firstSeenAt":"2026-05-08T06:51:49.158Z","lastSeenAt":"2026-05-11T06:52:22.501Z"}],"details":{"listingId":"12da2486-6d9e-4dc7-91ea-6c7391112c0c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-zhangzara-cobalt-grid","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":"daa75ea5cac02a362d489dbff8df8a06ed7b2df2","skill_md_path":"skills/html-ppt-zhangzara-cobalt-grid/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-zhangzara-cobalt-grid"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-zhangzara-cobalt-grid","description":"Cobalt Grid — Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules. Anything that should feel like a quietly serious design / research bulletin, art publication, or curated trend report."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-zhangzara-cobalt-grid"},"updatedAt":"2026-05-11T06:52:22.501Z"}}