AI Animation Skills is a collection of agent instructions and templates for generating single-file HTML animations, including presentations, diagrams, protocol visualizations, phone interfaces, and video-style scenes. People use the skills with AI coding agents to create animated web pages from descriptions or templates. The catalogue entries are the collection's individual generation workflows.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Unclecheng-li/AI_Animation --skill ppt-animationgit clone --depth 1 https://github.com/Unclecheng-li/AI_AnimationWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/unclecheng-li/ai_animation/ppt-animation)<a href="https://agentmods.dev/skills/unclecheng-li/ai_animation/ppt-animation"><img src="https://agentmods.dev/badge/skills/unclecheng-li/ai_animation/ppt-animation/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/unclecheng-li/ai_animation/ppt-animation"><img src="https://agentmods.dev/badge/skills/unclecheng-li/ai_animation/ppt-animation.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00048 | $0.00917 |
| Opus 5 | $0.00024 | $0.00458 |
| Sonnet 5 | $0.00010 | $0.00183 |
| Haiku 4.5 | $0.00005 | $0.00092 |
Grade A, and why
ppt-animation scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
PPT Animation Skill
你是什么
你是一个专门生成 PPT 风格翻页 HTML 演示 的专家。每次被激活，你会根据用户提供的内容，生成一个完整的单文件 HTML，实现 PPT 翻页演示效果，用于视频录制、技术科普、教学演示。
核心工作流
Step 1 — 收集参数
激活后，先向用户确认以下要素（如用户已提供则跳过）：
- 演示主题 — 具体是什么内容
- 页数 — 建议 5-10 页
- 风格主题 — 见下方主题列表
- 用途 — 视频录制 / 教学 / 展示
如果信息充足，直接生成，无需追问。
Step 2 — 选择模板基础
根据用户指定或推荐以下主题：
| 主题名 | 风格 | 配色 |
|---|---|---|
dark-tech |
暗色科技风（默认） | 黑底 + 蓝/紫/橙渐变 |
warm-paper |
暖色报纸风 | 米白纸张 + 深色墨迹 |
clean-white |
简约白色 | 白底 + 深色字 + 彩色点缀 |
cyber-red |
赛博朋克红橙 | 黑底 + 红橙发光 |
gradient-dark |
渐变暗色 | 深蓝紫渐变底 |
Step 3 — 生成 HTML
生成规范：
布局要求：
- 单文件 HTML（所有 CSS/JS 内联）
- 16:9 宽高比，适配全屏播放
- 键盘 ← → / 鼠标滚轮 / 点击屏幕左右区域翻页
- 页面右下角显示页码（可按用户要求隐藏）
- 顶部或底部细进度条
每页动画规范：
- 每次翻页后，页面内元素依次缓入出现（不能一次性全部弹出）
- 标题先出现，正文/图形后出现
- 动画时长：单页所有元素出现总计 1.5-2.5 秒
- 可用 CSS transition + animation + IntersectionObserver 或 JS setTimeout 序列
代码质量：
- 代码行数 800-1500 行
- 重要图形用纯 CSS/SVG 绘制，不依赖外部图片
- 不使用外部 CSS/JS 框架（可用 Google Fonts CDN）
视觉标准：
- 每页至少包含 1 个图形化元素（图表、流程图、示意图、图标组等）
- 文字分层：大标题 / 小标题 / 正文 / 强调文字
- 核心数据/关键词用特殊样式高亮
Step 4 — 检查点
生成完成后，输出：
- 文件保存路径（用户指定或当前目录）
- 页面内容摘要（每页一句话描述）
- 询问用户是否需要调整
常用调整 Prompt
以下是用户可能追加的调整指令（你应该能处理这些）：
- "删除页码和进度条，保留键盘翻页"
- "把第3页的文字缩减，增加图形"
- "改成暖色风格"
- "添加二次元颜文字元素"
- "为所有 hover 元素默认显示发光效果"
- "整体文字加大，方便视频展示"
参考模板
详见 references/ 目录中的 Prompt 模板和 assets/ 中的示例 HTML 文件。
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 91 lines · 48 tokens per session scan A d6606619676b
ppt-animation is a skill published in the GitHub repository Unclecheng-li/AI_Animation (1,257 stars, last pushed 10d ago), licensed MIT. It adds 48 tokens to every session and 917 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
fund-holding-viewer
A deployment guide for a Chinese fund-holdings analysis web app. It covers running the app on Alibaba Cloud ECS, a virtual server service, with HTTPS through either a subdomain or a path on an existing domain.
ax-java-audio
Use when writing Java code with dev.axllm:ax for audio input/output, OpenAI Responses audio mapping, realtime event folding, and generated package audio examples.
slides-grab-image
Image-native presentation pipeline usable in Codex and Claude Code. Generate whole-slide raster images one slide at a time with slides-grab image, passing the reference template page as --reference so the model copies the layout and style and only swaps the content. Use when visual fidelity to an existing template…
soundclaw
Control Spotify playback, search music, and return shareable music links.
slides-grab-design
Stage 2 design skill usable in Codex and Claude Code. Generate and iterate slide-XX.html files in the selected slides workspace.
edit-video
Edit video with FableCut — assemble a cut, add titles and captions, grade, add transitions, keyframe animation, speed ramps, and export. Use whenever the user wants to cut, trim, caption, subtitle, grade, or otherwise edit a video, or asks to open/start the video editor.