animal-island-slideslisted

# Animal Island Slides 生成零依赖、单 HTML 文件的演示文稿，设计风格来自 animal-island-ui（动物森友会 React 组件库）。 ## 文件加载地图 下表中所有路径相对于 **skill 自身目录** `${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/`（`CLAUDE_PLUGIN_ROOT` 由 Claude Code 在运行时自动注入，指向插件根目录）。读文件或执行脚本时，**必须**用 `${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/<相对路径>` 的绝对形式，不要假设用户当前目录里有这些文件。 | 文件 | 用途 | 加载时机 | |---|---|---| | `SKILL.md` | 主流程和规则 | 始终（skill 调用时） | | `html-template.md` | 色彩系统、布局 CSS/HTML 片段 | Phase 3（生成 HTML） | | `animation-patterns.md` | CSS/JS 动画参考库 | Phase 3（生成 HTML，有入场动画需求时） | | `scripts/extract-pptx.py` | PPT 内容提取 | Phase 4（转换模式） | | `scripts/export-pdf.sh` | 导出 PDF | Phase 5（导出） | | `scripts/deploy.sh` | 部署到 Vercel | Phase 5（分享） | > 生成的 `.html` 输出文件依然写到**用户的当前工作目录**，不要写进插件目录。 --- ## 核心原则 1. **零依赖** — 单 HTML 文件，内联所有 CSS/JS，无 npm，无框架 2. **视口适配（不可违反）** — 每张幻灯片严格 `height: 100dvh; overflow: hidden`，内容超出密度上限时自动拆分，绝不允许幻灯片内滚动 3. **风格统一** — 所有视觉决策遵循 html-template.md，不自由发挥颜色、字体或圆角 4. **无 emoji** — 图标一律用内联 SVG --- ## Phase 0：判断模式 用户发起请求后，判断属于哪种模式： - **Mode A（新建）** — 从零开始创作 → 进入 Phase 1 - **Mode B（转换）** — 用户提供了 .pptx 文件 → 进入 Phase 4 - **Mode C（增强）** — 用户提供了已有 HTML 演示文稿要修改 → 进入 Phase 6 --- ## Phase 1：内容收集（Mode A） **用一次 AskUserQuestion 问完以下所有问题**，不要分多轮询问： - **用途**（header: "用途"）：这份演示文稿是做什么的？ 选项：产品/项目汇报 / 教学课程 / 技术分享 / 团队内部 - **基调**（header: "基调"）：希望传达什么感受？ 选项：专业可信（沉稳） / 活力惊喜（有冲击力） / 轻松友好（愉快） / 清晰高效（干净利落） - **篇幅**（header: "篇幅"）：大约需要几张幻灯片？ 选项：5-8 张（简短） / 10-15 张（中等） / 15 张以上（完整） - **内容**（header: "内容"）：内容准备好了吗？ 选项：