5.3 KiB
name, description
| name | description |
|---|---|
| frontend-slides | 创建、更新并验证适合项目展示的固定 16:9 HTML 幻灯片；当用户说生成演示、项目汇报、结题展示、答辩、做 PPT 或演示文稿，或需要把当前项目整理成可播放作品时使用。只生成本地 HTML，可选导出 PDF；不生成 PPTX，不部署到云端。 |
Makelore 项目演示
把当前项目的真实内容整理成孩子可以讲清楚、也愿意展示的单文件 HTML 幻灯片。优先生成可在浏览器中播放的作品，而不是把项目说明堆成文档。
调用边界
- 当用户明确要求“生成演示、做汇报、结题展示、答辩、项目介绍、演示文稿”时主动使用本技能。
- 当项目已经完成、用户要准备展示，或项目交付清单包含“项目演示”时主动建议使用本技能。
- 只在展示意图明确时调用；普通写代码、修 Bug 或写 README 不要自动生成幻灯片。
- 产物是项目目录中的 HTML 文件和资源；不要生成
.ppt、.pptx，不要调用云部署或上传服务。
工作流程
1. 建立内容事实
开始前读取与项目相关的 README、主要页面或入口、用户提供的图片/素材、最近的实现结果和验证记录。只使用项目中能找到的事实，不要编造数据、用户数量、性能指标或“已经上线”等结论。
如果信息不足，一次性用孩子能理解的语言补问：
- 这是给谁看的、想让大家记住什么；
- 预计讲几分钟（默认 5–8 张）；
- 最想展示哪些功能或过程；
- 更喜欢“活泼、清楚、科技感、故事感”中的哪一种。
有足够上下文时直接推断，不要为了形式重复提问。
2. 先做三张风格草图
读取 style-presets.md，生成三份只包含标题页的自包含 HTML 草图，保存到项目的 .frontend-slides/slide-previews/：
- 一份稳妥、清楚的浅色方案；
- 一份更活泼、适合孩子项目的方案；
- 一份根据项目主题定制的方案。
草图必须是真实标题页，不要把“方案 A”“安全选项”“生成预览”或文件路径写到幻灯片里。通过当前项目的浏览器能力打开并检查草图，让用户选择一个方向；用户已经明确风格时可以跳过选择，但仍要保持有意识的设计系统。
3. 生成完整演示
读取以下参考文件后再生成：
- viewport-base.css：完整复制到每份演示的
<style>中； - html-template.md：HTML 结构、导航和可访问性要求；
- animation-patterns.md：按情绪选择克制的动画。
生成规则：
- 使用一个自包含的
index.html，CSS 和 JavaScript 内联； - 所有幻灯片固定为 1920×1080，通过整体缩放适配窗口，保持 16:9，不用响应式断点重排幻灯片内容；
- 每张幻灯片使用
.slide，切换使用.active/.visible、visibility、opacity和pointer-events，不要用display: none切换； - 每页只讲一个核心意思。优先拆页，不要把文字缩小到孩子读不清；
- 使用真实项目截图、图片或 CSS 图形；素材放在演示目录的相对路径下，不使用绝对本机路径；
- 默认采用明亮、友好、可读的视觉方向。不要让 Makelore 的应用界面出现暗色主题；演示内容可以有少量主题色，但不能牺牲可读性；
- 不依赖运行时联网的字体、CDN、npm 包或远程图片；为字体和网络不可用准备本地回退；
- 支持键盘方向键、空格、PageUp/PageDown 和触摸滑动；加入
prefers-reduced-motion； - 为关键结构写清楚的 CSS 注释，保证后续 Agent 能安全修改；
- 如用户没有要求锁定，提供轻量的编辑入口或清晰的后续修改提示，不要让编辑控件遮挡展示内容。
建议的项目内输出结构：
presentations/<slug>/
├── index.html
└── assets/
└── ...项目素材...
如果项目已有明确的成果目录，沿用项目目录约定。不要为了生成演示删除或覆盖用户已有文件。
4. 浏览器验收
使用 agent-browser 或当前项目提供的浏览器能力打开最终 HTML，至少检查：
- 标题页和每张幻灯片都能到达，只有当前页可见；
- 1920×1080 舞台在桌面窗口和窄窗口都保持比例并完整显示；
- 没有文字越界、卡片重叠、滚动条、空白页或被控件遮挡；
- 项目图片、图标和相对路径资源全部加载；
- Console 没有错误，方向键、空格和触摸/鼠标导航可用；
- 开启减少动态效果时内容仍然完整可读。
修改后重新打开或刷新页面再验收，不要只根据源码推断视觉结果。完成后清理 .frontend-slides/slide-previews/，除非用户希望保留风格草图。
交付说明
告诉用户：HTML 文件位置、页数、使用的视觉方向和操作方式。说明这是本地可播放演示，不是 PPTX 文件；如果用户需要其他格式，先说明当前 Skill 的边界，不要自行引入云服务或新的远程依赖。
许可证
本 Skill 改造自 Zara Zhang 的 frontend-slides 项目，相关版权和 MIT 许可证保存在同目录的 LICENSE 文件中。不要移除该声明。