{"id":"dacafd6d-aeb8-441e-990f-ac90a030b955","shortId":"VnPkrj","kind":"skill","title":"html-ppt-graphify-dark-graph","tagline":"暗底知识图谱 deck — #06060c→#0e1020 深夜渐变 + 漂浮 blur orbs、封面 SVG 力导向图谱、彩虹渐变标题、JetBrains Mono 命令行高亮、glass-morphism 卡片。适合 dev-tool / CLI / 知识图谱 / 数据可视化的发布会，\"AI-native + 科幻 + 暖色\" 调子。","description":"# HTML PPT · 暗底知识图谱\n\nA focused entry point into the [`html-ppt`](../html-ppt/SKILL.md) master skill that lands the user directly on the **`graphify-dark-graph`** 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 `graphify-dark-graph` (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/graphify-dark-graph/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-graphify-dark-graph` 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-graphify-dark-graph` 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","graphify","dark","graph","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok"],"capabilities":["skill","source-nexu-io","skill-html-ppt-graphify-dark-graph","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-graphify-dark-graph","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,351 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.664Z","embedding":null,"createdAt":"2026-05-02T06:52:41.891Z","updatedAt":"2026-05-11T06:52:20.664Z","lastSeenAt":"2026-05-11T06:52:20.664Z","tsv":"'/../../assets':203,298 '/html-ppt/references/full-decks.md':117 '/html-ppt/skill.md':51,139 '/lewislulu/html-ppt-skill).':399 '06060c':9 '0e1020':10 '1':127 '2':163 '3':187 '36':331 '4':311 '404':233 '5':341 '6':366 'accept':88 'activ':238 'ai':34 'ai-nat':33 'animations.css':229 'artifact':304 'asset':268 'assets/animations/animations.css':270 'attribut':379 'author':124,134 'base.css':228 'blur':13 'bodi':185 'bring':188 'card':71,92 'catalog':116 'checklist':141 'class':186,346,359 'cli':30 'come':389 'contain':275,282,289 'content':279,344 'content/audience':140 'copi':171,214,254,257 'css':335,354 'css/js':201 'cycl':340 'dark':5,63,108,183,351 'dead':243 'deck':8,67,115,126,236 'deep':209 'default':315 'demo':343 'dev':28 'dev-tool':27 'differ':324 'direct':58 'either':291 'entri':44 'exact':101 'exampl':75,83 'feel':325 'file':277,402 'fine':318 'first':132 'focus':43 'folder':169,208 'four':274 'full':66,114 'full-deck':65,113 'galleri':76 'github.com':398 'github.com/lewislulu/html-ppt-skill).':397 'glass':23 'glass-morph':22 'go':369 'graph':6,64,109,184,352 'graphifi':4,62,107,182,350 'graphify-dark-graph':61,106 'html':2,39,49 'html-ppt':48 'html-ppt-graphify-dark-graph':1 'ident':104 'in-tre':308 'index.html':172,197,215,290 'insid':210,370 'jetbrain':19 'keep':178,364,407 'keyboard':149,387 'land':55 'layout':144,382 'let':338 'lewislulu/html-ppt-skill':396 'licens':395,401 'link':198 'live':136 'local':267 'longer':225 'look':317 'master':52,130 'match':167 'mean':234 'mit':394 'mit-licens':393 'mode':147 'model':388 'mono':20 'morphism':24 'nativ':35 'navig':241 'never':153,237,372 'note':368 'one':245 'orb':14 'parent':221 'parent-rel':220 'per':250 'pick':73,96,244,312 'place':410 'pleas':406 'point':45 'ppt':3,40,50 'prefer':256 'present':146,156 'presenter-on':155 'project':177,218,251,266,303 'project-loc':265 'prompt':80,84,90 'put':154 'rational':121 'read':128 'recip':249,252 'recognis':356 'redistribut':412 'relat':222 'replac':342 'resolv':226 'reus':145 'rewrit':255,272 'right':95 'rule':135,143,162 'runtim':150,191,386 'runtime.js':231,283 'scope':353 'screenshot':119 'see':110 'self':288 'self-contain':287 'share':190,200 'ship':295,360,403 'singl':286 'sit':206 'skill':53,131 'skill-html-ppt-graphify-dark-graph' 'skills/html-ppt/assets/animations/animations.css':260 'skills/html-ppt/assets/base.css':259 'skills/html-ppt/assets/fonts.css':258 'skills/html-ppt/assets/runtime.js':262 'skills/html-ppt/assets/themes':334 'skills/html-ppt/license':405 'skills/html-ppt/skill.md':138 'skills/html-ppt/templates/full-decks':211 'skills/html-ppt/templates/full-decks/graphify-dark-graph':170 'slide':161,240,378 'source-nexu-io' 'speaker':367 'start':164 'structur':358 'style.css':174 'svg':16 'swap':326 'system':381 'templat':68,168,194,363 'text':158,375 'theme':314,332,383 'three':207 'token':142,316 'tool':29 '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':181,349 'tpl-graphify-dark-graph':180,348 'tree':310 'two':248 'upstream':112,196,297,392 'url':223,299 'use':78 'user':57,99,321 'verbatim':300 'via':202,336 'visibl':374 'visual':103,380 'want':100,322 'way':292 'wire':77 'work':307 'yield':284 '力导向图谱':17 '卡片':25 '命令行高亮':21 '封面':15 '彩虹渐变标题':18 '数据可视化的发布会':32 '暖色':37 '暗底知识图谱':7,41 '深夜渐变':11 '漂浮':12 '知识图谱':31 '科幻':36 '调子':38 '适合':26","prices":[{"id":"ae434214-3bde-4a8f-9663-125f6f4ddfaf","listingId":"dacafd6d-aeb8-441e-990f-ac90a030b955","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:41.891Z"}],"sources":[{"listingId":"dacafd6d-aeb8-441e-990f-ac90a030b955","source":"github","sourceId":"nexu-io/open-design/html-ppt-graphify-dark-graph","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-graphify-dark-graph","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:41.891Z","lastSeenAt":"2026-05-11T06:52:20.664Z"},{"listingId":"dacafd6d-aeb8-441e-990f-ac90a030b955","source":"skills_sh","sourceId":"nexu-io/open-design/html-ppt-graphify-dark-graph","sourceUrl":"https://skills.sh/nexu-io/open-design/html-ppt-graphify-dark-graph","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:21.930Z","lastSeenAt":"2026-05-07T22:42:08.854Z"}],"details":{"listingId":"dacafd6d-aeb8-441e-990f-ac90a030b955","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-graphify-dark-graph","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":"52e819534b91bcd36e7e77809e6ff7d209b89dd2","skill_md_path":"skills/html-ppt-graphify-dark-graph/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-graphify-dark-graph"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-graphify-dark-graph","description":"暗底知识图谱 deck — #06060c→#0e1020 深夜渐变 + 漂浮 blur orbs、封面 SVG 力导向图谱、彩虹渐变标题、JetBrains Mono 命令行高亮、glass-morphism 卡片。适合 dev-tool / CLI / 知识图谱 / 数据可视化的发布会，\"AI-native + 科幻 + 暖色\" 调子。"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-graphify-dark-graph"},"updatedAt":"2026-05-11T06:52:20.664Z"}}