用途
slide-deck 是一个用于 React/Next.js 幻灯片系统的技能,帮助用户起草、更新、转换和导出品牌化的演示文稿。它使用用户的幻灯片系统编写 React/TypeScript 幻灯片,输出品牌一致,无需单独的 HTML 流程。当需要可移植的 HTML/PDF 时,导出模式通过 Playwright 对渲染后的 React 幻灯片进行快照,确保输出品牌完美。
主要能力
该技能提供四种模式:
- new:根据简报起草新幻灯片(默认模式)。
- update:修改现有幻灯片,带溢出保护。
- ppt:将旧版 PPTX 转换为 React 幻灯片。
- export:将幻灯片快照导出为 HTML、PDF 或 Vercel URL。
使用方式
new 模式流程
- 捕获简报:一次性询问主题/标题、受众、长度、密度、CTA、slug、内容状态。
- 三个叙事角度:提供安全、大胆、意外三种角度,用户选择其一。
- 大纲:为选定角度提出 3-7 个命名部分、幻灯片标题、每页一句话要点,以表格展示供用户编辑/批准。
- 扩展为幻灯片内容:为每页编写完整内容,使用用户的原语。
- 演讲者备注:每页 3-5 行备注,包括开场、要点、支撑节拍、过渡、可选旁白。
- 生成文件:写入
${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/<slug>/下的layout.tsx和page.tsx。 - 预览:检查开发服务器是否运行,提供预览 URL。
- 归档:在
${MAKERSKILLS_CONFIG:-$HOME/.config/makerskills}/slide-deck/archive/下追加一行记录。
update 模式
修改现有幻灯片,带溢出保护。修改前检查现有 page.tsx,统计幻灯片数量并识别部分范围。针对添加项目符号、添加文本、添加图片、添加幻灯片、删除幻灯片、重写幻灯片等操作应用相应保护。修改后重新统计并验证部分范围。
ppt 模式
通过 python3 和 python-pptx 提取旧版 PPTX 内容,映射到 React 原语,写入 page.tsx 和 layout.tsx。保留原始 PPTX,保存到 ~/Documents/slide-conversions/<slug>-from-pptx/。
export 模式
将开发服务器中渲染的幻灯片快照为可移植的 HTML/PDF/Vercel URL。输出选项:
- html:独立 HTML 文件,快照作为内联
<img>,内置键盘导航。 - pdf:合并的幻灯片快照。
- vercel:将独立 HTML 推送到 Vercel 项目以获得可分享 URL。
流程:验证开发服务器、统计幻灯片数量、运行 Playwright 快照、按输出类型合并、报告路径/URL。
适用场景
- 需要起草、更新、转换或导出 React/Next.js 幻灯片系统演示文稿的用户。
- 需要将旧版 PPTX 转换为 React 幻灯片的用户。
- 需要将幻灯片导出为 HTML、PDF 或 Vercel URL 以便分享的用户。
限制
- 导出为静态快照,不保留动画和演讲者视图。
- 快照为 1920×1080,文件大小随幻灯片数量增加。
- 部署是真实付费操作,导出模式的 vercel 路径在部署前会提示。
- 需要开发服务器运行才能预览和导出。
- 具体收费、价格、平台等信息暂未提供。