feat: add bundled OpenCode skills and refine module flow

.opencode/skills/frontend-slides/SKILL.md

@@ -0,0 +1,93 @@
+---
+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` 文件中。不要移除该声明。