{"id":"53744650-8e6d-4428-a023-18d9e293bedd","shortId":"GEZhhe","kind":"skill","title":"html-ppt-obsidian-claude-gradient","tagline":"GitHub 暗紫渐变 deck — GitHub-dark #0d1117 + 紫蓝 radial 环境光 + 60px 网格 mask、居中布局、紫色 pill 标签、三色渐变标题（#a855f7→#60a5fa→#34d399）、GitHub 风代码 palette、紫色左边框高亮块。适合开发者工作流 / MCP / Agent / dev tool 教程，类似 GitHub Blog / Linear Changelog。","description":"# HTML PPT · GitHub 暗紫渐变\n\nA focused entry point into the [`html-ppt`](../html-ppt/SKILL.md) master skill that lands the user directly on the **`obsidian-claude-gradient`** full-deck template.\n\n## When this card is picked\n\nThe Examples gallery wires \"Use this prompt\" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of `obsidian-claude-gradient` (see the upstream [full-decks catalog](../html-ppt/references/full-decks.md) for screenshots and rationale).\n\n## How to author the deck\n\n1. **Read the master skill first.** All authoring rules live in\n   [`skills/html-ppt/SKILL.md`](../html-ppt/SKILL.md) — content/audience checklist,\n   token rules, layout reuse, presenter mode, the keyboard runtime, and the\n   \"never put presenter-only text on the slide\" rule.\n2. **Start from the matching template folder:**\n   `skills/html-ppt/templates/full-decks/obsidian-claude-gradient/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-obsidian-claude-gradient` body class.\n3. **Bring the shared runtime with the template.** The upstream\n   `index.html` links the shared CSS/JS via `../../../assets/...` because it\n   sits three folders deep inside `skills/html-ppt/templates/full-decks/`.\n   Once you copy `index.html` into the project, those parent-relative URLs\n   no longer resolve and `base.css`, `animations.css`, and `runtime.js`\n   will 404 — meaning the deck never activates and slide navigation is\n   dead. Pick one of these two recipes per project:\n   - **Recipe A — copy + rewrite (preferred):** copy\n     `skills/html-ppt/assets/fonts.css`, `skills/html-ppt/assets/base.css`,\n     `skills/html-ppt/assets/animations/animations.css`, and\n     `skills/html-ppt/assets/runtime.js` into a project-local\n     `assets/` (with `assets/animations/animations.css`), then rewrite the\n     four `<link>`/`<script>` tags in `index.html` from\n     `../../../assets/...` to the matching project-local paths\n     (`assets/fonts.css`, `assets/base.css`,\n     `assets/animations/animations.css`, `assets/runtime.js`).\n   - **Recipe B — inline:** read the same four files and replace each\n     `<link rel=\"stylesheet\" href=\"../../../assets/...\">` with a\n     `<style>...</style>` containing the file's contents, and the\n     `<script src=\"../../../assets/runtime.js\">` with a\n     `<script>...</script>` containing `runtime.js`. Yields a single\n     self-contained `index.html`.\n   Either way, do not ship the upstream `../../../assets/...` URLs\n   verbatim into a project artifact — they only work in-tree.\n4. **Pick a theme.** Default tokens look fine; if the user wants a different\n   feel, swap in any of the 36 themes from `skills/html-ppt/assets/themes/*.css`\n   via `<link id=\"theme-link\">` and let `T` cycle.\n5. **Replace demo content, not classes.** The `.tpl-obsidian-claude-gradient` scoped CSS only\n   recognises the structural classes shipped in the template — keep them.\n6. **Speaker notes go inside `<aside class=\"notes\">` or `<div class=\"notes\">`** — never as visible text on the slide.\n\n## Attribution\n\nVisual system, layouts, themes and the runtime keyboard model come from\nthe upstream MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill). The\nLICENSE file ships at `skills/html-ppt/LICENSE`; please keep it in place when\nredistributing.","tags":["html","ppt","obsidian","claude","gradient","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-obsidian-claude-gradient","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-obsidian-claude-gradient","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,381 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:20.899Z","embedding":null,"createdAt":"2026-05-02T06:52:42.146Z","updatedAt":"2026-05-11T06:52:20.899Z","lastSeenAt":"2026-05-11T06:52:20.899Z","tsv":"'/../../assets':208,303 '/html-ppt/references/full-decks.md':122 '/html-ppt/skill.md':56,144 '/lewislulu/html-ppt-skill).':404 '0d1117':13 '1':132 '2':168 '3':192 '34d399':27 '36':336 '4':316 '404':238 '5':346 '6':371 '60a5fa':26 '60px':17 'a855f7':25 'accept':93 'activ':243 'agent':34 'animations.css':234 'artifact':309 'asset':273 'assets/animations/animations.css':275 'attribut':384 'author':129,139 'base.css':233 'blog':40 'bodi':190 'bring':193 'card':76,97 'catalog':121 'changelog':42 'checklist':146 'class':191,351,364 'claud':5,68,113,188,356 'come':394 'contain':280,287,294 'content':284,349 'content/audience':145 'copi':176,219,259,262 'css':340,359 'css/js':206 'cycl':345 'dark':12 'dead':248 'deck':9,72,120,131,241 'deep':214 'default':320 'demo':348 'dev':35 'differ':329 'direct':63 'either':296 'entri':49 'exact':106 'exampl':80,88 'feel':330 'file':282,407 'fine':323 'first':137 'focus':48 'folder':174,213 'four':279 'full':71,119 'full-deck':70,118 'galleri':81 'github':7,11,28,39,45 'github-dark':10 'github.com':403 'github.com/lewislulu/html-ppt-skill).':402 'go':374 'gradient':6,69,114,189,357 'html':2,43,54 'html-ppt':53 'html-ppt-obsidian-claude-gradi':1 'ident':109 'in-tre':313 'index.html':177,202,220,295 'insid':215,375 'keep':183,369,412 'keyboard':154,392 'land':60 'layout':149,387 'let':343 'lewislulu/html-ppt-skill':401 'licens':400,406 'linear':41 'link':203 'live':141 'local':272 'longer':230 'look':322 'mask':19 'master':57,135 'match':172 'mcp':33 'mean':239 'mit':399 'mit-licens':398 'mode':152 'model':393 'navig':246 'never':158,242,377 'note':373 'obsidian':4,67,112,187,355 'obsidian-claude-gradi':66,111 'one':250 'palett':30 'parent':226 'parent-rel':225 'per':255 'pick':78,101,249,317 'pill':22 'place':415 'pleas':411 'point':50 'ppt':3,44,55 'prefer':261 'present':151,161 'presenter-on':160 'project':182,223,256,271,308 'project-loc':270 'prompt':85,89,95 'put':159 'radial':15 'rational':126 'read':133 'recip':254,257 'recognis':361 'redistribut':417 'relat':227 'replac':347 'resolv':231 'reus':150 'rewrit':260,277 'right':100 'rule':140,148,167 'runtim':155,196,391 'runtime.js':236,288 'scope':358 'screenshot':124 'see':115 'self':293 'self-contain':292 'share':195,205 'ship':300,365,408 'singl':291 'sit':211 'skill':58,136 'skill-html-ppt-obsidian-claude-gradient' 'skills/html-ppt/assets/animations/animations.css':265 'skills/html-ppt/assets/base.css':264 'skills/html-ppt/assets/fonts.css':263 'skills/html-ppt/assets/runtime.js':267 'skills/html-ppt/assets/themes':339 'skills/html-ppt/license':410 'skills/html-ppt/skill.md':143 'skills/html-ppt/templates/full-decks':216 'skills/html-ppt/templates/full-decks/obsidian-claude-gradient':175 'slide':166,245,383 'source-nexu-io' 'speaker':372 'start':169 'structur':363 'style.css':179 'swap':331 'system':386 'templat':73,173,199,368 'text':163,380 'theme':319,337,388 'three':212 'token':147,321 'tool':36 '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' 'tpl':186,354 'tpl-obsidian-claude-gradi':185,353 'tree':315 'two':253 'upstream':117,201,302,397 'url':228,304 'use':83 'user':62,104,326 'verbatim':305 'via':207,341 'visibl':379 'visual':108,385 'want':105,327 'way':297 'wire':82 'work':312 'yield':289 '三色渐变标题':24 '居中布局':20 '教程':37 '暗紫渐变':8,46 '标签':23 '环境光':16 '类似':38 '紫色':21 '紫色左边框高亮块':31 '紫蓝':14 '网格':18 '适合开发者工作流':32 '风代码':29","prices":[{"id":"ef6212b0-f39d-4006-b67c-b3ec9eab8804","listingId":"53744650-8e6d-4428-a023-18d9e293bedd","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-02T06:52:42.146Z"}],"sources":[{"listingId":"53744650-8e6d-4428-a023-18d9e293bedd","source":"github","sourceId":"nexu-io/open-design/html-ppt-obsidian-claude-gradient","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-obsidian-claude-gradient","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:42.146Z","lastSeenAt":"2026-05-11T06:52:20.899Z"},{"listingId":"53744650-8e6d-4428-a023-18d9e293bedd","source":"skills_sh","sourceId":"nexu-io/open-design/html-ppt-obsidian-claude-gradient","sourceUrl":"https://skills.sh/nexu-io/open-design/html-ppt-obsidian-claude-gradient","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:21.071Z","lastSeenAt":"2026-05-07T22:42:08.678Z"}],"details":{"listingId":"53744650-8e6d-4428-a023-18d9e293bedd","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-obsidian-claude-gradient","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":"cfcf71d283bdbd5fdabedacb627302a6cd63db11","skill_md_path":"skills/html-ppt-obsidian-claude-gradient/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-obsidian-claude-gradient"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-obsidian-claude-gradient","description":"GitHub 暗紫渐变 deck — GitHub-dark #0d1117 + 紫蓝 radial 环境光 + 60px 网格 mask、居中布局、紫色 pill 标签、三色渐变标题（#a855f7→#60a5fa→#34d399）、GitHub 风代码 palette、紫色左边框高亮块。适合开发者工作流 / MCP / Agent / dev tool 教程，类似 GitHub Blog / Linear Changelog。"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-obsidian-claude-gradient"},"updatedAt":"2026-05-11T06:52:20.899Z"}}