html-slideslisted
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`。
| # | 阶段 | 产出 | 闸门 |
| --- | --- | --- | ---