{"id":"810104fe-b800-4ff9-a074-220c1c7f1fa0","shortId":"u6kemD","kind":"skill","title":"html-ppt-dir-key-nav-minimal","tagline":"8 页极简方向键 keynote — 每页一个独立单色背景（靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭），各自配色，160px display 标题 + 4px 短粗 accent 线分隔、箭头 → 前缀的 Mono 列表、左下 ← → kbd 提示 + 右下页码、巨大呼吸留白。适合\"有话要说但没什么可看\"的 keynote、launch、公开演讲。","description":"# HTML PPT · 8 色极简方向键\n\nA focused entry point into the [`html-ppt`](../html-ppt/SKILL.md) master skill that lands the user directly on the **`dir-key-nav-minimal`** 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 `dir-key-nav-minimal` (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/dir-key-nav-minimal/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-dir-key-nav-minimal` 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-dir-key-nav-minimal` 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","dir","key","nav","minimal","open","design","nexu-io","agent-skills","ai-agents","ai-design"],"capabilities":["skill","source-nexu-io","skill-html-ppt-dir-key-nav-minimal","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-dir-key-nav-minimal","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,353 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.586Z","embedding":null,"createdAt":"2026-05-02T06:52:41.789Z","updatedAt":"2026-05-11T06:52:20.586Z","lastSeenAt":"2026-05-11T06:52:20.586Z","tsv":"'/../../assets':211,306 '/html-ppt/references/full-decks.md':124 '/html-ppt/skill.md':56,146 '/lewislulu/html-ppt-skill).':408 '1':134 '160px':21 '2':170 '3':195 '36':339 '4':319 '404':241 '4px':24 '5':349 '6':375 '8':8,45 'accent':26 'accept':94 'activ':246 'animations.css':237 'artifact':312 'asset':276 'assets/animations/animations.css':278 'attribut':388 'author':131,141 'base.css':236 'bodi':193 'bring':196 'card':77,98 'catalog':123 'checklist':148 'class':194,354,368 'come':398 'contain':283,290,297 'content':287,352 'content/audience':147 'copi':178,222,262,265 'css':343,363 'css/js':209 'cycl':348 'dead':251 'deck':73,122,133,244 'deep':217 'default':323 'demo':351 'differ':332 'dir':4,67,113,189,358 'dir-key-nav-minim':66,112 'direct':63 'display':22 'either':299 'entri':49 'exact':107 'exampl':81,89 'feel':333 'file':285,411 'fine':326 'first':139 'focus':48 'folder':176,216 'four':282 'full':72,121 'full-deck':71,120 'galleri':82 'github.com':407 'github.com/lewislulu/html-ppt-skill).':406 'go':378 'html':2,43,54 'html-ppt':53 'html-ppt-dir-key-nav-minim':1 'ident':110 'in-tre':316 'index.html':179,205,223,298 'insid':218,379 'kbd':33 'keep':185,373,416 'key':5,68,114,190,359 'keyboard':156,396 'keynot':10,40 'land':60 'launch':41 'layout':151,391 'let':346 'lewislulu/html-ppt-skill':405 'licens':404,410 'link':206 'live':143 'local':275 'longer':233 'look':325 'master':57,137 'match':174 'mean':242 'minim':7,70,116,192,361 'mit':403 'mit-licens':402 'mode':154 'model':397 'mono':30 'nav':6,69,115,191,360 'navig':249 'never':160,245,381 'note':377 'one':253 'parent':229 'parent-rel':228 'per':258 'pick':79,102,252,320 'place':419 'pleas':415 'point':50 'ppt':3,44,55 'prefer':264 'present':153,163 'presenter-on':162 'project':184,226,259,274,311 'project-loc':273 'prompt':86,90,96 'put':161 'rational':128 'read':135 'recip':257,260 'recognis':365 'redistribut':421 'relat':230 'replac':350 'resolv':234 'reus':152 'rewrit':263,280 'right':101 'rule':142,150,169 'runtim':157,199,395 'runtime.js':239,291 'scope':362 'screenshot':126 'see':117 'self':296 'self-contain':295 'share':198,208 'ship':303,369,412 'singl':294 'sit':214 'skill':58,138 'skill-html-ppt-dir-key-nav-minimal' 'skills/html-ppt/assets/animations/animations.css':268 'skills/html-ppt/assets/base.css':267 'skills/html-ppt/assets/fonts.css':266 'skills/html-ppt/assets/runtime.js':270 'skills/html-ppt/assets/themes':342 'skills/html-ppt/license':414 'skills/html-ppt/skill.md':145 'skills/html-ppt/templates/full-decks':219 'skills/html-ppt/templates/full-decks/dir-key-nav-minimal':177 'slide':168,248,387 'source-nexu-io' 'speaker':376 'start':171 'structur':367 'style.css':181 'swap':334 'system':390 'templat':74,175,202,372 'text':165,384 'theme':322,340,392 'three':215 'token':149,324 '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':188,357 'tpl-dir-key-nav-minim':187,356 'tree':318 'two':256 'upstream':119,204,305,401 'url':231,307 'use':84 'user':62,105,329 'verbatim':308 'via':210,344 'visibl':383 'visual':109,389 'want':106,330 'way':300 'wire':83 'work':315 'yield':292 '公开演讲':42 '列表':31 '前缀的':29 '右下页码':35 '各自配色':20 '奶':13 '左下':32 '巨大呼吸留白':36 '提示':34 '有话要说但没什么可看':38 '标题':23 '每页一个独立单色背景':11 '灰':16 '炭':19 '白':18 '的':39 '短粗':25 '箭头':28 '紫':17 '线分隔':27 '绛':14 '翠':15 '色极简方向键':46 '适合':37 '靛':12 '页极简方向键':9","prices":[{"id":"5703b3a0-16e8-4622-8364-10f1453387f2","listingId":"810104fe-b800-4ff9-a074-220c1c7f1fa0","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.789Z"}],"sources":[{"listingId":"810104fe-b800-4ff9-a074-220c1c7f1fa0","source":"github","sourceId":"nexu-io/open-design/html-ppt-dir-key-nav-minimal","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-dir-key-nav-minimal","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:41.789Z","lastSeenAt":"2026-05-11T06:52:20.586Z"},{"listingId":"810104fe-b800-4ff9-a074-220c1c7f1fa0","source":"skills_sh","sourceId":"nexu-io/open-design/html-ppt-dir-key-nav-minimal","sourceUrl":"https://skills.sh/nexu-io/open-design/html-ppt-dir-key-nav-minimal","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:22.926Z","lastSeenAt":"2026-05-07T22:42:09.587Z"}],"details":{"listingId":"810104fe-b800-4ff9-a074-220c1c7f1fa0","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-dir-key-nav-minimal","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":"a24a624e5fb6010adf7f9044898990d924a71f8e","skill_md_path":"skills/html-ppt-dir-key-nav-minimal/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-dir-key-nav-minimal"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-dir-key-nav-minimal","description":"8 页极简方向键 keynote — 每页一个独立单色背景（靛 / 奶 / 绛 / 翠 / 灰 / 紫 / 白 / 炭），各自配色，160px display 标题 + 4px 短粗 accent 线分隔、箭头 → 前缀的 Mono 列表、左下 ← → kbd 提示 + 右下页码、巨大呼吸留白。适合\"有话要说但没什么可看\"的 keynote、launch、公开演讲。"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-dir-key-nav-minimal"},"updatedAt":"2026-05-11T06:52:20.586Z"}}