用途
这是一个用于制作和维护 Slidev 演示文稿的 AI 技能。它统一管理同一仓库内所有演示文稿遵循的“内部约定”,包括共享主题、幻灯片写法、区块标签、代码展示和讲者备注。Slidev 本身的语法由官方 slidev 技能负责,本技能未覆盖的部分应加载该技能;仓库的 AGENTS.md 和具体演示的计划文件对更具体的事项优先。
主要能力
主题:所有演示共用同一个主题文件夹,主题改动会同时影响全部演示。要求使用 Slidev 默认布局,避免因 layout: none 导致样式丢失。内容页以 kicker 行叠加标题开头,例如 <p class="kicker">Act 1 · Local or cloud?</p>,其下再写二级标题。颜色须取自主题 CSS 变量,以便随皮肤切换重新着色;硬编码颜色只在一种皮肤下可读。Mermaid 图绘制在主题 CSS 无法触及的 shadow root 中,在两种皮肤下保持同一配色,因此需要随皮肤变色的图表应改用 HTML 盒子绘制,Mermaid 仅用于在两种皮肤下都可读的图表。跨多张幻灯片复用的图形应做成一个带 props 的 Vue 组件。所有资源须在仓库内本地加载(字体、图片、LFS 下的 *.mp4 视频),浏览器检查会在任何非 localhost 请求时失败。
区块标签:区块是计划文件中的一行,也是演出流程的一段。每个区块的第一张幻灯片(含 break)在前置元数据中写入 block: <id>,后续幻灯片不带 block 键,归属其前最近一个已标记幻灯片。增删、重命名或重排区块时,须在同一次提交中同步修改计划文件与标签,否则 deck 检查失败。
幻灯片代码:通过 Slidev 的 <<< 语法从已提交的副本导入代码,例如 <<< @/snippets/act-1/transcribe.ts#hosted ts {all|4-6|9|all},使幻灯片展示能编译的代码。仓库的 copy 命令负责生成副本并记录源提交;要改幻灯片上的代码,应在源头修改后重新运行 copy 命令。点击步进以 all 开始展示整体结构,逐步展开关键行,最后以 all 收尾;每个点击步骤在备注中各有一个 [click] 段落。代码应在一屏内显示;若外观检查发现代码面板滚动或换行,应导入更小的区域。
演示页:每个现场演示对应一张演示页,前置元数据中写入演示名称(kebab case 且在演示中唯一),如 demo: madam-eva;占满整个区块的演示可直接用区块 id,如 demo: rs1。现场演示时展示该页,之后在同一名称下放置录制的兜底视频(如 madam-eva.mp4)。备注中记录演示命令与兜底提示:何时停止现场尝试、改为做什么。
讲者备注:备注是幻灯片末尾的 HTML 注释,供讲者在演讲中快速浏览,因此使用短段落并先写动作。每个区块的第一张幻灯片备注须包含:要说什么和做什么;观众看到或做什么;计划文件中的区块时长与结束时间;剪切清单上的位置及剪切含义(如有);演示页还须包含命令与兜底提示。点击步进幻灯片按顺序为每次点击写一个 [click] 段落,指出应指向的内容,Slidev 会随点击高亮对应段落。备注仅进入舞台构建,deck 检查会植入哨兵备注,若出现在公开包中即失败。
使用方式
修改幻灯片时:先在计划文件和工单/规格中找到要改的区块,明确其 id、时长、结束时间和剪切清单位置;通过 Slidev 的 MCP 服务器(来自仓库 .mcp.json)读取当前幻灯片;按主题、区块标签、代码和演示页规范编辑 Markdown 并撰写备注,用词遵循演讲的 GLOSSARY.md,并对文本运行 /unslop;对每张改动的幻灯片执行外观检查;运行仓库 package.json 脚本中的 deck 检查和浏览器检查。改动完成的标志是:每张改动幻灯片在两种皮肤下均有干净的 PNG,且两项检查均通过。
外观检查:Markdown 会隐藏溢出、被裁剪的标签和发虚的强调色,PNG 能暴露这些问题。用仓库的导出命令在两种皮肤下导出改动幻灯片的 PNG(点击步进幻灯片按其点击状态导出),逐一打开检查:文字是否越出边框或落到代码面板下;代码是否换行、裁剪或滚动;图表标签是否被裁剪;点击步骤是否互相重叠;强调色或次要文字是否在背景上过淡;除颜色外两种皮肤是否有差异。修复并重新导出,直到每张 PNG 均干净。
工具选择:修改幻灯片或备注用幻灯片 Markdown,使每次改动都是可审阅的 diff;读取幻灯片、查找幻灯片编号、让打开的浏览器跳转到某张幻灯片用 Slidev 的 MCP 服务器;查看幻灯片用 PNG 导出后打开。
适用场景
适合在维护 Slidev 演示文稿、编写讲者备注、同步区块计划、导入代码片段和做上屏前视觉检查时使用。
限制
本技能只覆盖仓库内部约定,Slidev 语法需配合官方 skill;视觉正确性依赖人工查看 PNG;主题改动需对每个演示抽样检查;资源须全部本地化,否则浏览器检查失败。