---
name: frontend-slides
description: 创建、更新并验证适合项目展示的固定 16:9 HTML 幻灯片；当用户说生成演示、项目汇报、结题展示、答辩、做 PPT 或演示文稿，或需要把当前项目整理成可播放作品时使用。只生成本地 HTML，可选导出 PDF；不生成 PPTX，不部署到云端。
---

# Makelore 项目演示

把当前项目的真实内容整理成孩子可以讲清楚、也愿意展示的单文件 HTML 幻灯片。优先生成可在浏览器中播放的作品，而不是把项目说明堆成文档。

## 调用边界

- 当用户明确要求“生成演示、做汇报、结题展示、答辩、项目介绍、演示文稿”时主动使用本技能。
- 当项目已经完成、用户要准备展示，或项目交付清单包含“项目演示”时主动建议使用本技能。
- 只在展示意图明确时调用；普通写代码、修 Bug 或写 README 不要自动生成幻灯片。
- 产物是项目目录中的 HTML 文件和资源；不要生成 `.ppt`、`.pptx`，不要调用云部署或上传服务。

## 工作流程

### 1. 建立内容事实

开始前读取与项目相关的 README、主要页面或入口、用户提供的图片/素材、最近的实现结果和验证记录。只使用项目中能找到的事实，不要编造数据、用户数量、性能指标或“已经上线”等结论。

如果信息不足，一次性用孩子能理解的语言补问：

1. 这是给谁看的、想让大家记住什么；
2. 预计讲几分钟（默认 5–8 张）；
3. 最想展示哪些功能或过程；
4. 更喜欢“活泼、清楚、科技感、故事感”中的哪一种。

有足够上下文时直接推断，不要为了形式重复提问。

### 2. 先做三张风格草图

读取 [style-presets.md](references/style-presets.md)，生成三份只包含标题页的自包含 HTML 草图，保存到项目的 `.frontend-slides/slide-previews/`：

- 一份稳妥、清楚的浅色方案；
- 一份更活泼、适合孩子项目的方案；
- 一份根据项目主题定制的方案。

草图必须是真实标题页，不要把“方案 A”“安全选项”“生成预览”或文件路径写到幻灯片里。通过当前项目的浏览器能力打开并检查草图，让用户选择一个方向；用户已经明确风格时可以跳过选择，但仍要保持有意识的设计系统。

### 3. 生成完整演示

读取以下参考文件后再生成：

- [viewport-base.css](references/viewport-base.css)：完整复制到每份演示的 `<style>` 中；
- [html-template.md](references/html-template.md)：HTML 结构、导航和可访问性要求；
- [animation-patterns.md](references/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 能安全修改；
- 如用户没有要求锁定，提供轻量的编辑入口或清晰的后续修改提示，不要让编辑控件遮挡展示内容。

建议的项目内输出结构：

```text
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` 文件中。不要移除该声明。