{"id":"b63386c2-bff7-443e-8782-a51e3fbc8383","shortId":"bS2TYB","kind":"skill","title":"html-ppt-xhs-post","tagline":"小红书 / Instagram 风 9 页 3:4 竖版图文（810×1080）— 暖色 pastel、虚线 sticker 卡片、底部页码点点。用于发小红书图文、Instagram carousel、品牌种草内容。","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 **`xhs-post`** 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 `xhs-post` (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/xhs-post/` — copy `index.html` and\n   `style.css` into the project, keep the `.tpl-xhs-post` 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-xhs-post` 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","xhs","post","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-html-ppt-xhs-post","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-xhs-post","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,296 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:21.757Z","embedding":null,"createdAt":"2026-05-02T06:52:42.753Z","updatedAt":"2026-05-11T06:52:21.757Z","lastSeenAt":"2026-05-11T06:52:21.757Z","tsv":"'/../../assets':188,283 '/html-ppt/references/full-decks.md':103 '/html-ppt/skill.md':39,125 '/lewislulu/html-ppt-skill).':383 '1':113 '1080':15 '2':149 '3':11,172 '36':316 '4':12,296 '404':218 '5':326 '6':350 '810':14 '9':9 'accept':75 'activ':223 'animations.css':214 'artifact':289 'asset':253 'assets/animations/animations.css':255 'attribut':363 'author':110,120 'base.css':213 'bodi':170 'bring':173 'card':58,79 'carousel':24 'catalog':102 'checklist':127 'class':171,331,343 'come':373 'contain':260,267,274 'content':264,329 'content/audience':126 'copi':157,199,239,242 'css':320,338 'css/js':186 'cycl':325 'dead':228 'deck':54,101,112,221 'deep':194 'default':300 'demo':328 'differ':309 'direct':46 'either':276 'entri':32 'exact':88 'exampl':62,70 'feel':310 'file':262,386 'fine':303 'first':118 'focus':31 'folder':155,193 'four':259 'full':53,100 'full-deck':52,99 'galleri':63 'github.com':382 'github.com/lewislulu/html-ppt-skill).':381 'go':353 'html':2,26,37 'html-ppt':36 'html-ppt-xhs-post':1 'ident':91 'in-tre':293 'index.html':158,182,200,275 'insid':195,354 'instagram':7,23 'keep':164,348,391 'keyboard':135,371 'land':43 'layout':130,366 'let':323 'lewislulu/html-ppt-skill':380 'licens':379,385 'link':183 'live':122 'local':252 'longer':210 'look':302 'master':40,116 'match':153 'mean':219 'mit':378 'mit-licens':377 'mode':133 'model':372 'navig':226 'never':139,222,356 'note':352 'one':230 'parent':206 'parent-rel':205 'pastel':17 'per':235 'pick':60,83,229,297 'place':394 'pleas':390 'point':33 'post':5,51,95,169,336 'ppt':3,27,38 'prefer':241 'present':132,142 'presenter-on':141 'project':163,203,236,251,288 'project-loc':250 'prompt':67,71,77 'put':140 'rational':107 'read':114 'recip':234,237 'recognis':340 'redistribut':396 'relat':207 'replac':327 'resolv':211 'reus':131 'rewrit':240,257 'right':82 'rule':121,129,148 'runtim':136,176,370 'runtime.js':216,268 'scope':337 'screenshot':105 'see':96 'self':273 'self-contain':272 'share':175,185 'ship':280,344,387 'singl':271 'sit':191 'skill':41,117 'skill-html-ppt-xhs-post' 'skills/html-ppt/assets/animations/animations.css':245 'skills/html-ppt/assets/base.css':244 'skills/html-ppt/assets/fonts.css':243 'skills/html-ppt/assets/runtime.js':247 'skills/html-ppt/assets/themes':319 'skills/html-ppt/license':389 'skills/html-ppt/skill.md':124 'skills/html-ppt/templates/full-decks':196 'skills/html-ppt/templates/full-decks/xhs-post':156 'slide':147,225,362 'source-nexu-io' 'speaker':351 'start':150 'sticker':19 'structur':342 'style.css':160 'swap':311 'system':365 'templat':55,154,179,347 'text':144,359 'theme':299,317,367 'three':192 'token':128,301 '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':167,334 'tpl-xhs-post':166,333 'tree':295 'two':233 'upstream':98,181,282,376 'url':208,284 'use':65 'user':45,86,306 'verbatim':285 'via':187,321 'visibl':358 'visual':90,364 'want':87,307 'way':277 'wire':64 'work':292 'xhs':4,50,94,168,335 'xhs-post':49,93 'yield':269 '卡片':20 '品牌种草内容':25 '图文':29 '小红书':6,28 '底部页码点点':21 '暖色':16 '用于发小红书图文':22 '竖版图文':13 '虚线':18 '页':10 '风':8","prices":[{"id":"43d00939-14b9-4cdf-86f1-cb946b5a2e4a","listingId":"b63386c2-bff7-443e-8782-a51e3fbc8383","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.753Z"}],"sources":[{"listingId":"b63386c2-bff7-443e-8782-a51e3fbc8383","source":"github","sourceId":"nexu-io/open-design/html-ppt-xhs-post","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-xhs-post","isPrimary":false,"firstSeenAt":"2026-05-02T06:52:42.753Z","lastSeenAt":"2026-05-11T06:52:21.757Z"},{"listingId":"b63386c2-bff7-443e-8782-a51e3fbc8383","source":"skills_sh","sourceId":"nexu-io/open-design/html-ppt-xhs-post","sourceUrl":"https://skills.sh/nexu-io/open-design/html-ppt-xhs-post","isPrimary":true,"firstSeenAt":"2026-05-07T20:43:23.153Z","lastSeenAt":"2026-05-07T22:42:09.495Z"}],"details":{"listingId":"b63386c2-bff7-443e-8782-a51e3fbc8383","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"html-ppt-xhs-post","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":"74994f650172f72c3f9ed7468c4dea960f193906","skill_md_path":"skills/html-ppt-xhs-post/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/html-ppt-xhs-post"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"html-ppt-xhs-post","description":"小红书 / Instagram 风 9 页 3:4 竖版图文（810×1080）— 暖色 pastel、虚线 sticker 卡片、底部页码点点。用于发小红书图文、Instagram carousel、品牌种草内容。"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/html-ppt-xhs-post"},"updatedAt":"2026-05-11T06:52:21.757Z"}}