agentsclimarketplace
Sign in

Animal island slides

Skill caigee-cmd/animal-island-slides/skills/animal-island-slides

用动物森友会风格生成零依赖 HTML 演示文稿，或将 .pptx 文件转换为同款风格。当用户想做幻灯片、做 PPT、做演示文稿，或提到动物森友会/岛屿风格时触发。From its SKILL.md

Install
npx -y skills add caigee-cmd/animal-island-slides --skill animal-island-slides

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

10.1 KB, as published. Nobody here has run it

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.mdCSS/JS 动画参考库Phase 3（生成 HTML，有入场动画需求时）
scripts/extract-pptx.pyPPT 内容提取Phase 4（转换模式）
scripts/export-pdf.sh导出 PDFPhase 5（导出）
scripts/deploy.sh部署到 VercelPhase 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: "内容"）：内容准备好了吗？ 选项：内容已准备好 / 有大纲/草稿 / 只有主题，需要帮我填充
  • 语言（header: "语言"）：幻灯片用什么语言？ 选项：中文 / English / 中英混排

如果用户选择"内容已准备好"或"有大纲/草稿"，请他们在回复中一并粘贴内容。

Phase 2：规划大纲

根据收集到的内容，起草幻灯片大纲，格式如下：

第 1 张 [Cover]       封面 — 项目名称
第 2 张 [Divider]     第一章：背景
第 3 张 [Bullets]     现状分析（5 条要点）
第 4 张 [TwoColumn]   核心方案（左文右数据）
第 5 张 [Grid]        三大功能（3 张卡片）
...
第 N 张 [Cover]       结尾/感谢

布局选择规则：

内容类型布局
封面、章节开场、结尾Cover
章节过渡Section Divider
纯文字、步骤、背景Text Bullets（≤5 条）
功能列表、对比项、特性Card Grid（≤6 张卡片）
核心观点 + 支撑要点Quote + Checklist（≤4 条）
单独一句金句、客户原话、产品哲学Pull Quote
左文右图、左文右数据Two Column
单一关键数字 / 季度增长 / 里程碑数值Big Stat Hero
时间线、路线图、里程碑序列（3-5 节点）Timeline
方案 A vs B、改造前后、新老对比Comparison
3-4 个并列核心指标 / KPI 汇总Stat Strip
业务流程 / 步骤 / Onboarding 链路（3-5 步）Process Flow
截图 / 产品照片 / 信息图（图片为主）Image Hero
代码片段 / 配置示例 / API 用法（技术分享）Code Slide
产品功能矩阵 / 章节总览 / 目录页（AC 标志性视觉）NookPhone Showcase
常见问题 / "为什么这么做" 复盘 / 技术 Q&AFAQ
章节大开场 / 产品愿景 / 沉浸式结尾页（岛屿插画为主）Island Scene
团队成员 / 品牌色板 / 分类目录 / 角色色谱（4-13 项）Color Wheel
用户原话 / 客户证言 / 产品哲学 / 品牌口吻金句（"NPC 在说话"叙事感）Dialogue Modal
技术栈 / 能力矩阵 / 产品模块概览 / 团队职能图（中心 + 4-8 卫星）Icon Constellation
今日/本周/本月 · 方案 A/B/C · 多视角同主题（点击切换面板）Tabs Switcher
渐进披露 / 步骤详解 / 复盘清单 / 深度问题（默认折叠，点击展开）Collapse Stack
功能开关清单 / 特性对比 / 规格表 / "选择你的路线"（带控件状态）Settings Panel

季节子主题选择（可选）：

根据内容主题推断是否套用季节子主题（自动叠加色板覆盖 + 飘落装饰）：

用户语境关键词推断主题
春 / 樱花 / 三月发布 / 春季焕新 / 年初规划spring
夏 / 海岛 / 暑期 / 活力主题 / 发布会summer
秋 / 枫叶 / 复盘 / 年中总结 / 十/十一月autumn
冬 / 年终 / 年会 / 圣诞 / 雪 / 12 月 / 1 月winter
与季节无关、或拿不准不选（默认羊皮纸 + 岛屿绿）

用 AskUserQuestion 同时展示大纲和推断主题，让用户确认或更换：

  • 选项：看起来不错，开始生成 / 调整大纲 / 换一个季节主题 / 不要季节装饰

用户确认后进入 Phase 3。

Phase 3：生成 HTML

首先读取 ${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/html-template.md；如果需要为幻灯片添加入场动画，同步读取 ${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/animation-patterns.md。然后：

  1. 复制 BASE 代码作为文件骨架（title 替换为演示文稿名称）
  2. 按大纲顺序组合各 LAYOUT 的 CSS 和 HTML 片段
  3. 所有 data-slide="N" 从 0 开始顺序编号
  4. 第一张幻灯片加 class="slide ... active"，其余只有 class="slide ..."
  5. 如果用到 Layout S / W / T：把 html-template.md 中"交互脚本钩子"section 的全部 JS 追加到 BASE 的 <script> 块末尾（Tabs / Collapse / Settings 三段都是命中 0 元素就 no-op 的安全代码，遇到不确定就全部加上） 如果开启季节子主题（spring/summer/autumn/winter）：在 <body> 标签上加 data-theme="..."；把 html-template.md "季节子主题" section 的通用容器 CSS + 对应季节 CSS 一起追加到 BASE <style> 末尾；把对应季节的 HTML 装饰块插入到 <div class="deck"> 之后（与导航箭头同级） 如果开启 Time HUD / AC Cursor / Divider 氛围工具：见 html-template.md "氛围工具"section，按需把 CSS/HTML/JS 片段加进 BASE
  6. 将文件保存为 [演示文稿名称].html，路径在当前工作目录

生成后：

  • 用 open [文件名].html 在浏览器中打开
  • 告诉用户键盘操作方式（← → 翻页，Space 下一张）
  • 询问是否需要调整或进入 Phase 5（导出）

生成时的检查清单（每张幻灯片逐一验证）

  • .slide 有 height:100dvh; overflow:hidden
  • 所有字号使用 clamp()
  • 入场动画使用 .slide.entered .element 驱动 transition，不使用 animation: 直接写在元素上（装饰性背景循环动画除外）
  • 无 emoji，图标为内联 SVG
  • 内容未超过该布局的密度上限，超出则已拆分
  • data-slide 编号连续无间断

Phase 4：PPT 转换（Mode B）

  1. 确认用户已提供 .pptx 文件路径
  2. 运行提取脚本（输出目录用 .，使提取内容落到用户当前目录）： 
    python3 "${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/scripts/extract-pptx.py" [文件路径] .
  3. 展示提取结果（每张幻灯片的文字内容和图片列表），用 AskUserQuestion 确认：
    • 内容看起来正确，继续 / 有问题，先调整
  4. 确认后，以提取内容为输入，从 Phase 2 开始执行（规划大纲 → 生成 HTML）
  5. 提取出的图片以相对路径引用，放在与 HTML 同名的 _assets/ 文件夹中

Phase 5：导出（可选）

生成完成后，询问用户是否需要导出：

导出为 PDF：

bash "${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/scripts/export-pdf.sh" ./[文件名].html

部署到 Vercel（生成永久分享链接）：

bash "${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/scripts/deploy.sh" ./[文件名].html

如果 CLAUDE_PLUGIN_ROOT 未注入（例如用户直接 clone 仓库手动运行，而非通过 /plugin install），回退到仓库内相对路径 bash skills/animal-island-slides/scripts/export-pdf.sh ...，并提示用户参考 README 的安装说明。

Phase 6：增强已有演示文稿（Mode C）

修改已有 HTML 文件时的额外规则：

  1. 先读文件，统计每张幻灯片的现有元素数量，对照密度上限
  2. 添加内容前：确认该幻灯片还有空间；若已满，自动拆分为新幻灯片
  3. 添加图片：必须有 max-height: min(50vh,400px)
  4. 修改后逐项验证 Phase 3 的检查清单
  5. 不替换整个文件，只用 Edit 工具做精确修改

禁止事项

  • 禁止在幻灯片内出现滚动条
  • 禁止使用固定 px/rem 字号（必须用 clamp）
  • 禁止 emoji（用内联 SVG）
  • 禁止直接在元素上写 animation:（用 .slide.active 驱动）
  • 禁止超出各布局密度上限而不拆分
  • 禁止自行发明不在 html-template.md 中的布局或色彩系统

Keep looking

Skills are one crate of 628,853. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.