Science Content Slide Pages

What it does

When your agent uses it

• Turning popular-science text into a slide-style web page for a video
• Generating an animated single-page HTML presentation from pasted content
• Rebuilding an existing animated page as a flat-UI flowchart
• Picking a built-in slide template that suits the content

Example prompts

• “Turn this explanation of how photosynthesis works into a slide-style animated web page.”
• “Restyle the AI_Animation.html we just made as a flowchart in the flat UI style.”
• “Generate a presentation page from this text about how vaccines train the immune system and save it to ./out/.”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

1. 1生成PPT提示词
2. 2生成AI_Animation.html
3. 3重构为PPT模板风格（可选）
4. 4确定模板 + 阅读 SUMMARY 参考
5. 5重构为平面UI样式

What it can do on your machine

Read from SKILL.md and the folder at commit 4b107dd. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Science Content Slide Pages loads about 1.5k tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 234 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~53

When it runs · the whole SKILL.md, loaded when a task matches

~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Unclecheng-li/AI-Animation-Skill at commit 4b107dd, republished under its MIT licence (© Unclecheng-li). 234 words, ~1,544 tokens.

name

science-content-ppt

description

将科普内容文本转换为可视化PPT风格网页的完整工作流。当用户输入科普内容并希望生成演示页面时触发。支持两种模式：(1) 默认模式：将科普内容生成为仿PPT轮播的单页HTML动画网页；(2) 流程图模式：使用Animation模板将已生成的AI_Animation.html按平面UI样式重构。模板已内置于Skill中。触发词包括"生成PPT"、"生成演示网页"、"生成流程图"等。

# 优先使用 level2 模板（由当前对话模型根据内容选择最合适的）
assets/templates/PPT Template-level2/   ← 优先选用
assets/templates/PPT/PPT-Generate-3.html
assets/templates/PPT/PPT-Generate-1.html
assets/templates/PPT/PPT-Generate-2.html
assets/templates/PPT/PPT-Generate-4.html
assets/templates/PPT/PPT-Generate-5.html
assets/templates/PPT/PPT-Generate-6.html
assets/templates/PPT/PPT-Generate-7.html

assets/templates/Animation/RNN-3.html  ← 默认
assets/templates/Animation/RNN-2.html
assets/templates/Animation/RNN-4.html
assets/templates/Animation/RNN-5.html
assets/templates/Animation/RNN-6.html
assets/templates/Animation/RNN-7.html
assets/templates/Animation/LSTM-1.html
assets/templates/Animation/Comprehension.html
assets/templates/Animation/GPU.html
assets/templates/Animation/word2vec-1.html
assets/templates/Animation/onehot.html
assets/templates/Animation/onehot-drawback.html
assets/templates/Animation/The fatal flaw of DNN.html
assets/templates/Animation/Cross-modal disentanglement - 2.html

根据以下内容生成基于纯前端页面单页布局仿PPT换页轮播进行直观图形化可视化的介绍，加大文字大小，并运用加粗、下划线、斜体、文字颜色、文字背景等强调方式方便进行视频演示。添加每次切换页面时页面中的各个元素依次"缓入"出现的动画效果(细化到每行文字)。

---
{用户输入的科普内容文本}
---

将emoji图标换成平面ui库的图标（如Font Awesome或Lucide图标库）。添加完成后检查页面中是否还有残留的emoji字符，如有则全部替换为对应的ui图标。

所有动画元素的class名统一使用 an 或 anim-item，以便后续动画重置逻辑能正确识别并处理。

(function() {
    // 克隆节点强制重置CSS动画，确保每次切换页面动画重新触发
    document.querySelectorAll('.slide').forEach(function(s) {
        s.querySelectorAll('.an, .anim-item, [style*="animation"]').forEach(function(item) {
            var clone = item.cloneNode(true);
            item.parentNode.replaceChild(clone, item);
        });
    });
})();

以页面 {模板相对路径} 为模板重构 {用户指定的输出路径}。

请将AI_Animation.html的内容按照指定PPT模板的布局、样式和轮播机制进行重构，保持科普内容不变，优化视觉效果使其更适合视频演示。

将 {用户指定的输出路径} 网页的每相邻的两页的内容合并后按照指定网页的平面UI样式进行视觉重构，保持现有颜色方案不变。

具体实施要求包括：
1. 精确还原模板中的布局结构、元素间距、字体样式、图标设计和视觉层次
2. 确保所有交互元素（按钮、表单、导航等）的视觉表现与参考网页一致
3. 维持原有的颜色值和配色方案
4. 保证修改后的页面在不同设备和浏览器上具有良好的响应式表现
5. 优化DOM结构以匹配UI设计，同时保持原有功能完整性和交互逻辑不变

完成后需进行视觉一致性检查，确保实现效果与参考网页达到95%以上的相似度。

模板路径：{模板相对路径，默认 assets/templates/Animation/RNN-3.html}

document.querySelectorAll('.slide').forEach(function(s) {
    s.querySelectorAll('.an, .anim-item').forEach(function(item) {
        var clone = item.cloneNode(true);
        item.parentNode.replaceChild(clone, item);
    });
});

© Unclecheng-li, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 51 other files (assets) in the repository root of Unclecheng-li/AI-Animation-Skill.

• SKILL.md
• CHANGELOG.md
• LICENSE
• README.md
• assets/templates/Animation/Comprehension.html
• assets/templates/Animation/Cross-modal disentanglement - 2.html
• assets/templates/Animation/GPU.html
• assets/templates/Animation/LSTM-1.html
• assets/templates/Animation/RNN-2.html
• assets/templates/Animation/RNN-3.html
• assets/templates/Animation/RNN-4.html
• assets/templates/Animation/RNN-5.html
• assets/templates/Animation/RNN-6.html
• assets/templates/Animation/RNN-7.html
• assets/templates/Animation/SUMMARY.md
• assets/templates/Animation/The fatal flaw of DNN.html
• assets/templates/Animation/onehot-drawback.html
• assets/templates/Animation/onehot.html
• … and 34 more

Open the folder on GitHubat commit 4b107dd

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in Unclecheng-li/AI-Animation-Skill, which our catalogue first saw on October 7, 2026.

• mingchen666/Revivaelectron/builtin-assets/skills/ai-animation-skill