Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景. An agent skill from Unclecheng-li/AI_Animation.
Install Ppt Animation
$ npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Unclecheng-li/AI_Animation ppt-animation --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ppt-animation .claude/skills/ppt-animation && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ppt-animation" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/ppt-animation into .claude/skills/ppt-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ppt-animation", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/ppt-animationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Unclecheng-li/AI_Animation ppt-animation --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/ppt-animation .agents/skills/ppt-animation && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ppt-animation" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/ppt-animation into .agents/skills/ppt-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ppt-animation", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Unclecheng-li/AI_Animation ppt-animation --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/ppt-animation .cursor/skills/ppt-animation && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ppt-animation" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/ppt-animation into .cursor/skills/ppt-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ppt-animation", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Unclecheng-li/AI_Animation.git --path skills/ppt-animation--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Unclecheng-li/AI_Animation ppt-animation --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/ppt-animation .gemini/skills/ppt-animation && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ppt-animation" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/ppt-animation into .gemini/skills/ppt-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ppt-animation", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Unclecheng-li/AI_Animation ppt-animationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/ppt-animation .github/skills/ppt-animation && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ppt-animation" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/ppt-animation into .github/skills/ppt-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ppt-animation", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Unclecheng-li/AI_Animation ppt-animation --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/ppt-animation .opencode/skills/ppt-animation && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ppt-animation" agent skill from https://github.com/Unclecheng-li/AI_Animation/tree/master/skills/ppt-animation into .opencode/skills/ppt-animation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ppt-animation", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ppt-animation- GitHub stars
- 1.5k
- Token cost
- ~397 tokens
- SKILL.md length
- 147 words
- Files
- 8 (incl. references, assets)
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- MIT
At a glance
生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景. An agent skill from Unclecheng-li/AI_Animation.
- Works in 4 steps: 收集参数 → 选择模板基础 → 生成 HTML → …
- Frontend & Design work in your project
- SKILL.md covers 你是什么, 核心工作流, 常用调整 Prompt and 参考模板
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Ppt Animation is an agent skill from Unclecheng-li/AI_Animation. 生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景
Its SKILL.md is about 400 tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files and assets (for example `README.md` and `references/prompts.md`).
It sits in Frontend & Design. The repository describes itself as: 本项目整理了用于生成[炫酷 HTML 动画网页]的 AI Prompts，涵盖动画效果、3D 可视化、PPT 风格演示、UI 美化等多个类别。 The licence is MIT.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/ppt-animation”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit d9c521f. 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.
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
Ppt Animation loads about 397 tokens when it runs, and up to ~1.2k if it reads all its reference files. Until then it costs about 18 tokens; SKILL.md has 147 words of instructions outside code blocks.
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
Auto-check passed
The automated check found no risky patterns in SKILL.md.
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 at commit d9c521f, republished under its MIT licence (© Unclecheng-li). 147 words, ~397 tokens.
Download SKILL.mdSave it as
.claude/skills/ppt-animation/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.- name
- ppt-animation
- description
- 生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景
- version
- 0.1.0
- triggers
- PPT 演示, 翻页演示, 幻灯片, slides, ppt-animation
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 文件。
© 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 7 other files (references, assets) in skills/ppt-animation of Unclecheng-li/AI_Animation.
- SKILL.md
- README.md
- assets/PPT-Generate-1.html
- assets/PPT-Generate-2.html
- assets/PPT-Generate-3.html
- assets/PPT-Generate-4.html
- assets/PPT-warm-paper-demo.html
- references/prompts.md
Open the folder on GitHubat commit d9c521f
Compare with similar skills
Ppt Animation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Ppt Animation this skillUnclecheng-li/AI_Animation | 1.5k | — | ~397 | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None |
Similar skills
- Official
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
- Official
Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
More from Unclecheng-li/AI_Animation
All 12 skills in this repoArchify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
Video Shot Demo Pages
Unclecheng-li/AI_Animation
Produces one self-contained HTML animation page per video shot, sharing a cinematic player base but giving each page its own visual style, sound cues and characters.
Card Theater
Unclecheng-li/AI_Animation
Generates a single-file HTML presentation that pairs a narrated sidebar with a 3D card carousel, for walking through protocols, product features or step-by-step processes.
Phone UI Demo Animations
Unclecheng-li/AI_Animation
Turns a product, lesson or script into a cinematic web animation staged inside a realistic phone interface, with lock screens, chats, settings and a virtual-clock player.
Plotbeat Data Videos
Unclecheng-li/AI_Animation
Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.
Stacked Data Cards Animation
Unclecheng-li/AI_Animation
Generates a single-file HTML animation in which white argument cards pop up in turn, older ones stack to the left and data widgets animate in, timed to a voiceover.
Related
Categories
Questions about Ppt Animation
What does Ppt Animation do?
生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景. An agent skill from Unclecheng-li/AI_Animation. Ppt Animation is an agent skill from Unclecheng-li/AI_Animation.
When should I use Ppt Animation?
Ppt Animation fits situations like: frontend & Design work in your project.
How do I install Ppt Animation in Claude Code?
Run `npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a claude-code`. Or copy the skill folder (skills/ppt-animation in Unclecheng-li/AI_Animation) into .claude/skills/ppt-animation in your project. Claude Code loads it when a task matches its description.
How do I install Ppt Animation in Codex?
Run `npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a codex`. Or copy the skill folder (skills/ppt-animation in Unclecheng-li/AI_Animation) into .agents/skills/ppt-animation in your project. Codex loads it when a task matches its description.
Can I use Ppt Animation in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Unclecheng-li/AI_Animation --skill ppt-animation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ppt-animation, .gemini/skills/ppt-animation, .github/skills/ppt-animation and .opencode/skills/ppt-animation in your project.
What does Ppt Animation need to run?
SKILL.md names no scripts, command-line tools or credentials: Ppt Animation is instructions for the agent only.
Does Ppt Animation access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Ppt Animation safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Ppt Animation use?
Ppt Animation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Ppt Animation use?
About 397 tokens (SKILL.md is roughly 1.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 827 tokens, read only when the agent opens those files.
What are the alternatives to Ppt Animation?
Skills that share tags, products or a category with Ppt Animation: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Ppt Animation?
Unclecheng-li (a GitHub user) maintains it in Unclecheng-li/AI_Animation, which has 1,469 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 5, 2026.
Source: Unclecheng-li/AI_Animation on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.