← ClaudeAtlas

html-slideslisted

Builds a PPT / 胶片 / 汇报 / 授课 deck as a plain single-file 1920×1080 HTML in a pluggable style (Huawei 华为 official light/dark, Apple, generic), confirming outline and per-page table first; optional PPTX export. Use when the user explicitly invokes $html-slides; not for general slide-design questions.
ontology-of-everything/SemanticSkills · ★ 8 · Web & Frontend · score 81
Install: claude install-skill ontology-of-everything/SemanticSkills
# 演示文稿生成(多风格) ## 概论 把一句话需求做成一份**明文单文件 HTML 演示**(1920×1080,内联 CSS,≤120 行运行时 JS)。 代码与文档分离:`assets/core/` 放基础 CSS、运行时 JS 与页型骨架画廊,`assets/<style>/` 放风格变量与专属组件,`references/` 下的 md 只讲规则并指向这些文件。 视觉由风格插拔:核心只用 CSS 变量名,风格给取值、字体、专属页型与素材。首版收录 `generic`(默认兜底)、`huawei`(官方胶片分析)、`apple`(经验版);新增风格按 `references/styles/_template.md` 建一份 md + 一个 `assets/<style>/` 目录即可。 **仅显式调用**:用户写 `$html-slides`(或同名斜杠命令)或点名本技能时启用;泛泛聊 PPT 不触发。不做的事:不代用户编造数据与引文;不安装依赖;PPTX 只在用户要求时导出并明说是哪一档(见输出格式)。 ## 原则 每条只在指向的文件里定义细则,本节不重述。 1. **先对齐再动手**:主题与大纲未经用户确认不写页面 → `process.md` §1–2 2. **标题即观点且点名技术**:内容页标题是有判断的句子并含关键技术 / 方法名;全部标题连读 = 论证链 → `style-guide.md` §4 3. **固定三页**:第 1 页封面、第 2 页目录、末页致谢,目录随当前大纲重建 → `page-patterns.md` §1 4. **每页塞进 1080**:`section` 固定尺寸 + `overflow:hidden`,超出被无声裁切;交付前 `?debug` 零红框 → `deck-format.md` §5 5. **字号按场景分档**:授课散文 ≥21px;汇报 / 自读短语卡 ≥18px;表格、轴标签、图内文字 15px 图元豁免 → `style-guide.md` §3 6. **连续 3 页换视觉家族**,密页后接轻页;两个以上耦合维度用复合页型不拆薄 → `page-patterns.md` §2 7. **同级卡片同构**:同组同角色卡片的底 / 边 / 圆角 / 字体层级完全一致,只有文案说明了差异才允许单卡高亮 → `style-guide.md` §5 8. **语言朴实可核验**:不写套话、广告词、自造比喻,页面上不写「点击查看」类操作提示 → `style-guide.md` §4 9. **字不如表,表不如图**:机制 / 流程 / 架构页以图表为主表达;初版放类型化占位,终版落地并清零 `data-todo` → `visuals.md` 10. **动画只手动推进**,汇报与自读默认静态 → `motion.md` 11. **风格只改变量与专属组件**:`assets/core/` 与骨架不出现具体色值;取值一律来自 `assets/<style>/vars-*.css` → `deck-format.md` §3 12. **图片经 data URI 内联**,deck 拷走即用;素材来自 `assets/<style>/` 或用户提供 → `deck-format.md` §4 ## 流程 七阶段,三个「讨论」是硬闸门;细则与场景适配表见 `process.md`。 | # | 阶段 | 产出 | 闸门 | | --- | --- | --- | ---