---

Project Overview

This repository is a collection of animation Skills for AI Agents such as WorkBuddy / Claude Code / Cursor. Each Skill is a self-contained folder that includes SKILL.md (agent execution instructions), README.md (human documentation), references/ (prompt references), and assets/ (template HTML). Once installed, the AI Agent automatically activates the appropriate Skill based on your description and generates a complete single-file HTML animation.

一句话生成：

• 📊 PPT-style presentations — science popularization, technical explainers, video companion presentations
• 📈 Flowcharts / principle demos — flowcharts, concept maps, comparison diagrams, sequence diagrams, AI model visualizations, and more
• 🌐 Network protocol visualization — TCP/IP, IPv4, Ethernet frames, routing, DHCP, etc.
• 🏗️ Dynamic architecture diagrams — system architecture, flowcharts, sequence diagrams, data flow diagrams, state machines, with flowing animations + multi-format export
• 📝 Scholar notes — beautiful handwritten-notebook-style HTML study notes, two template styles
• 🎴 Card theater — sidebar narration + 3D card carousel, narrative-style presentations for protocol flows / product features / step-by-step explanations
• 🎬 Video storyboarding demos — cinematic "one shot, one HTML" demo animations: 29 rotating styles, camera push/pull, WebAudio sound effects, character expression commentary; full-screen screen recording becomes a finished video
• 📱 Phone system UI demos — cinematic orchestration of a "real phone" screen recording: lock screen notifications, chats, settings pages, app interfaces presented shot by shot, HyperOS-level motion effects + 3D posed phone actor

ppt-animation PPT 演示 / 翻页动画	flowchart 流程图 / 概念图 / 原理演示	network-protocol-viz 网络协议 / 数据包演示	dynamic-archify 动态架构图 / 流程图 / 时序图
scholar-notes 学霸笔记 / 手写笔记本风格		card-theater 卡片剧场 / 3D 卡片轮播
phone-ui-demos 手机系统 UI / 编排录屏动画		video-shot-demos 视频分镜演示 / 电影级镜头动画

---

Skills Gallery

ppt-animation

Category: PPT demo / page-turn animation\nBest for: video recording, tech explainers, teaching demos, live-stream slides — scenarios needing "PPT flip + elements easing in one by one."

ppt-animation generates PPT-style single-file HTML slide decks. After each page turn, elements fade in sequentially; supports dark tech, warm paper, clean white, cyber red-orange, and gradient dark themes. Keyboard / scroll / click to turn pages; suited for full-screen playback and screen recording.

亮点:

• 16:9 aspect ratio, fits full-screen playback & recording
• Elements fade in one by one after each page turn (down to each line of text)
• 5 built-in themes: dark-tech / warm-paper / clean-white / cyber-red / gradient-dark
• Core concepts shown via graphical elements (charts, flow diagrams, schematics), no external images
• Supports rebuilding on an existing template (以 assets/xxx.html 为模板演示以上内容)

dark-tech 暗色科技风

warm-paper 暖色报纸风

clean-white 简约白色

cyber-red 赛博朋克红橙

gradient-dark 渐变暗色

_{↑ Overview of the 5 themes — open the full gallery for previews and use cases.}

Links: README · SKILL.md

---

flowchart

Category: Flowchart / concept map / principle demo\nBest for: video explainers, tech tutorials, PPT visuals — scenarios needing animated flowcharts, concept comparisons, principle demos.

flowchart generates animated HTML for educational/science-popularization flowcharts and principle demos. Dark tech aesthetic with glowing nodes, flowing arrows, and data-particle effects. Not just AI models — any concept, process, comparison, or interaction can be presented with animation. Complementary to dynamic-archify: flowchart leans toward educational demos (visually appealing + intuitive), while dynamic-archify leans toward engineering architecture (precise + exportable).

亮点:

• 7 chart types: flowchart / concept map / principle demo / sequence diagram / comparison chart / timeline / system overview
• Full AI/ML model visualizations preserved (RNN / LSTM / GRU / MLP / Word2Vec / GPU)
• Dark tech style: dark background + blue/purple/orange gradient nodes + glow effects
• Flowing connector animations + data particle effects, page always feels dynamic
• Three interaction modes: autoplay / manual step / hover highlight

RNN RNN流程图

LSTM LSTM流程图

GPU 架构图

流程图 攻击链/工作流

_{↑ Preview of selected charts — see the full list of chart types.}

Links: README · SKILL.md

---

network-protocol-viz

Category: Network protocols / packet demos Best for: networking courses, security awareness, tech talks — scenarios that need dynamic visualization of protocol interaction flows, packet structures, and routing.

network-protocol-viz generates animated HTML pages showing how network protocols work. Visualization style is chosen automatically based on protocol type: packet/frame structures use layered rectangle blocks + hover field explanations; interaction flows use client/server sequence diagrams + moving packets; routing uses topology maps + path animations. Play/pause/reset controls are required.

亮点:

• Supports TCP/IP / IPv4 / Ethernet frames / routing / switches / DHCP / HTTPS / PPP and more
• Three visualization modes: structure breakdown / sequence interaction / topology forwarding
• Protocol-layer color coding: physical (gray) / link (blue) / network (green) / transport (orange) / application (purple)
• Packets with glowing trails flow along paths
• Security-awareness mode: auto-appends a disclaimer at the bottom

TCP PPP数据帧结构

IPv4 IPv4 数据报 3D

Routing HTTPS 应用层加密

HTTPS DHCP ACK报文

_{↑ Preview of selected protocols — see the full protocol list.}

Links: README · SKILL.md

---

dynamic-archify

Category: Dynamic architecture diagrams / flowcharts / sequence diagrams / dataflow diagrams / state machines Best for: technical docs, system design reviews, security analysis, CI/CD visualization — scenarios needing professional-grade technical diagrams (flow animations + multi-format export).

dynamic-archify generates professional single-file HTML technical diagrams with inline SVG, dark/light theme toggle, flowing connector animations, and glowing particles moving along paths. Accepts natural-language descriptions or pasted Mermaid code and lays out from scratch. Supports 5 diagram types: architecture, workflow, sequence, dataflow, and state machine. Includes a Node.js renderer + JSON Schema validation, plus a manual SVG mode for environments without Node.

亮点:

• 5 diagram types: architecture / workflow / sequence / dataflow / lifecycle
• Auto flow animation: CSS stroke-dasharray flow + SVG particles moving along paths, speed auto-tuned by connection type
• Dark/light theme toggle (persisted to localStorage, respects prefers-color-scheme)
• One-click export: PNG / JPEG / WebP / SVG / animated GIF / WebM video
• Accepts Mermaid code input, auto-maps to the matching diagram type and re-lays out
• CSS-variable color system, semantic component types (frontend/backend/database/cloud/security/message queue/external)

architecture 系统架构图

workflow 工作流图

sequence 时序图

dataflow 数据流图

lifecycle 状态机

_{↑ Preview of the 5 diagram types — see the full documentation.}

Links: README · SKILL.md

---

scholar-notes

Category: Scholar notes / handwritten notebook-style HTML Best for: Tech notes, vulnerability analysis, security research logs, knowledge summaries, class notes — any scenario where technical content should be rendered as a beautiful handwritten-notebook-style web page.

scholar-notes generates single-file HTML study notes in handwritten-notebook style. Two template styles: Style A (cream ruled paper + spiral binding holes + tape/coffee-stain decorations, ideal for general tech notes) and Style B (leather cover + metal-ring binding + page-flip interaction, ideal for attack-chain analysis and vulnerability notes). Rich built-in component system: flowcharts, comparison boxes, attack chains, code blocks, sticky notes, and more. All icons use flat UI libraries (Lucide / Remix Icon); emoji are forbidden.

亮点:

• Two template styles: Style A (top-student notebook / single-page scroll) / Style B (journal leather book / page-flip interaction)
• Handwritten-feel fonts: Kalam + Patrick Hand + Zeyada / Ma Shan Zheng
• Rich components: flowcharts / comparison boxes / attack chains / code blocks / sticky notes / warning boxes / concept cards
• Color-coding system: red = warning/emphasis, blue = info/terminology, green = safe/positive, purple = technical/code
• Strict quality constraints: no emoji, content height-matched to cover, checklist self-review

Style A 学霸笔记本

Style B 手账皮革本

_{↑ Previews of two styles — view the full documentation.}

Links: README · SKILL.md

---

card-theater

Category: Sidebar narrative + 3D card carousel presentation Best for: Protocol flow demos, product feature showcases, step-by-step walkthroughs — narrative presentation scenarios requiring "sidebar narration + 3D card carousel + mode switching".

card-theater generates a presentation animation HTML combining sidebar narrative with a 3D card carousel. The left sidebar narrates step by step, while the right side arranges 3D glassmorphism cards in Coverflow / track / scroll layouts. Supports mode switching (dynamic card insertion/removal), highlighter-pen highlighting, watermark icons, and more. Built-in 5 templates: scrolling 3D tilt, Apple aurora track, classic Coverflow, watermark-icon version, and Focus expand version.

亮点:

• 5 built-in templates: scroll-3d-tilt / apple-aurora-track / coverflow-classic / coverflow-watermark / coverflow-focus
• Sidebar narrative: title + narration text + key points, updating in sync with card switches
• Mode switching: dynamic card insertion/removal (e.g., transport mode ↔ tunnel mode) with transition animations
• Highlighter-pen highlighting: selected card's key fields play an underline animation
• 3D interaction: Coverflow rotation / track panning / scroll paging / mouse 3D tilt
• Keyboard ←→ / mouse wheel / card clicks — multiple navigation methods

scroll-3d-tilt 滚动 3D 倾斜	apple-aurora-track Apple 极光轨道	coverflow-classic 经典 Coverflow	coverflow-watermark 水印图标版	coverflow-focus Focus 展开版

_{↑ Previews of 5 templates — view the full documentation.}

Links: README · SKILL.md

---

phone-ui-demos

Category: Phone UI / screen-record animations Best for: Feature demos, app guides, education, brand videos — cinematic "real phone recording" scenarios.

phone-ui-demos turns any content into phone-system-UI web animations: a detail-rich phone on stage (punch-hole/side keys/antenna bands/reflections/status bar), content shown shot-by-shot via lock-screen, chat, settings, control center, and app screens. Unified HyperOS/MIUI design (large rounded corners + frosted glass + gradient wallpapers). The phone is a 3D actor — sway, lean, landscape, stamp vibrate, power-off spin. 8 finished-shot templates (AI trainer "Kexue" demo) + starter skeleton built in.

亮点:

• phoneTo 3D posture system: six degrees of freedom control one "live phone", each shot has ≥2 3D actions; signature app-open morph transition (icon morphs from exact position → fills screen)
• Background layer big captions: voiceover copy on both sides of the phone in 58px+ gradient text, 11 entrance effects (glow-rise / per-character wave / slam / flip…) rotating each shot
• Content-to-UI mapping: argument → lock-screen notification, dialogue → chat bubbles (typing indicator), data → ring sliders, process → settings list, comparison → ActionSheet, summary → off-screen brand card
• Shot continuity iron rule: unified mood across the collection, first shot takes the stage, subsequent shots start with a pose that echoes the previous shot's ending — 8 standalone HTMLs feel like one continuous recording
• Cinematic player: virtual clock black-screen opening / HUD segmented progress with click-to-jump / ←→ to switch shots / default muted with speaker toggle
• Zero-dependency single file: all icons are inline SVG, wallpapers are pure CSS gradients, sounds synthesized via WebAudio — runs offline with a double-click

锁屏通知 手机 3D 登台	App 打开 标志性 morph 转场	苏格拉底对话 盖章 + 手机震动	知识星云 多级下钻图谱	横屏仪表盘 rz:-90 转横	熄屏收尾 3D 旋走落幕

_{↑ 6 of the 8 system scenes — open the full component library & specification (all 8 finished-shot templates are directly runnable).}

Links: README · SKILL.md

---

video-shot-demos

Category: Video shot demos / cinematic camera animations Best for: Video companion demos, screen-recorded finals, tech test retros, product launches — cinematic scenarios with "one shot per HTML, rotating styles, camera push/pull, synced SFX".

video-shot-demos turns video storyboards into fullscreen-recording-ready finished web animations: one shot = one standalone HTML. The whole collection shares a cinematic player chassis (black-screen opening + virtual clock + hover-invoked HUD + pause & replay), yet each shot is crafted in a completely different visual style. Built-in two complete finished instances (glm-5.3-range-test 29-shot safety test retrospective + doubao-paper-detective 11-shot paper-reading commercial, totaling 40 styles with zero repetition), 15 An'an emotional standing portraits, a WebAudio synthesized sound-effects engine, a shot-choreography system (push/pull/pan/track / follow shot / letterbox slow-mo) and a headless screenshot QA tool.

亮点:

• Cinematic player: black-screen "start playback" opening, virtual clock keeps CSS animations and JS cues from ever drifting, clean screen recording with zero jumps
• Shot language: opening pull-back / key close-up push / tracking shot / Ken Burns slow zoom / impact fast push; slow-mo segments auto-add letterbox + vignette + millisecond counter
• WebAudio synthesized SFX: zero audio files, 6 primitives (pop/whoosh/swipe/type/ding/thud), shot motion auto-triggers whoosh
• 40 visual style library (two collections: 29+11 shots): each style ships a font pairing + applicable content + finished-level live template; consecutive shots never reuse a style
• Dual-character commentary system: An'an 15 emotions + Juri 20 emotions, each page has ≥2 appearances (mid-page rapid-cut standing portraits + ending establishing shot); key pages get Juri snark → An'an reply, duo in frame
• Subtitle bar aligns sentence-by-sentence with the voiceover script, keywords highlighted; data footnotes cite sources, cross-page scoreboards scroll continuously
• Headless screenshot QA: fast-forward the virtual clock to any millisecond and capture a frame, check each for overlap / occlusion / animation glitches

复古报纸头条 震撼数字宣告	嘉年华老虎机 ★镜头推进典范	像素平台跳跃 ★镜头推进典范	审讯室软木板 证据链追查	机场安检 拦截与合规

_{↑ 5 of 40 style samples (first collection) — open the full style library (both collections total 40 finished pages, all directly runnable).}

Links: README · SKILL.md

---

Installation

#	方式	适用于	指定版本?
A	skills CLI (npx)	任意 Agent，一行安装，按需选择 Skill	✅ via tag URL
B	Git Clone + 手动复制	本地开发 / 魔改	✅ via commit
C	GitHub Releases .zip	CI / 生产环境固定版本	✅ via release tag

Option A · skills CLI (npx)

# 安装全部 Skill（推荐）
npx skills add https://github.com/Unclecheng-li/AI_Animation

# 安装单个 Skill
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ppt-animation
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/flowchart
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/network-protocol-viz
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/dynamic-archify
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/scholar-notes
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/card-theater
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/video-shot-demos
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/phone-ui-demos

默认安装 main 分支最新版本。 CLI 会从源码树直接读取每个 Skill 的最新 SKILL.md。

Option B · Git Clone

git clone https://github.com/Unclecheng-li/AI_Animation.git
# 将 skills/<skill-name> 复制到你的 Agent 技能目录

Option C · GitHub Releases

前往 Releases 页面 下载 .zip，解压后复制到 Agent 技能目录。

兼容性

Agent / Runtime	Skill 存放路径	状态
WorkBuddy	~/.workbuddy/skills/<name>/	✅ 已测试
Claude Code	.claude/skills/<name>/	✅ 兼容
Cursor	.agents/skills/<name>/	✅ 兼容
Codex CLI	.codex/skills/<name>/	✅ 兼容
Gemini CLI	extension manifest	✅ 兼容

SKILL.md 格式与 Agent 无关，只要 Agent 支持 Skills 规范，将文件夹复制到对应目录即可。

快速上手

安装 Skill 后，直接在 AI Agent 中说：

用 ppt-animation 制作一个关于"HTTP协议"的演示，暗色主题，5页

用 flowchart 演示 LSTM 的工作原理

用 network-protocol-viz 可视化 TCP 三次握手

用 dynamic-archify 画一个微服务架构图，带流动动画

把以上内容做成学霸笔记，Style A 风格

用 card-theater 演示 IPsec 数据流转过程，需要模式切换（传输模式 / 隧道模式）

用 video-shot-demos 把这期视频的口播稿做成分镜演示动画，每个镜头一个 HTML，输出到 demo/

用 phone-ui-demos 把这个 App 的功能做成手机录屏风格的演示动画，先出分镜表我确认

目录结构

ai-animation-skills/
├── skills/
│   ├── SKILL_TEMPLATE.md        ← 新增 Skill 的标准模板
│   ├── ppt-animation/
│   │   ├── SKILL.md             ← Agent 执行指令（核心）
│   │   ├── README.md            ← 人类可读文档
│   │   ├── references/          ← Prompt 参考
│   │   └── assets/              ← 模板 HTML 文件
│   ├── flowchart/
│   │   ├── SKILL.md
│   │   ├── README.md
│   │   ├── references/
│   │   └── assets/
│   ├── network-protocol-viz/
│   │   ├── SKILL.md
│   │   ├── README.md
│   │   ├── references/
│   │   └── assets/
│   ├── dynamic-archify/
│   │   ├── SKILL.md
│   │   ├── README.md
│   │   ├── renderers/           ← 5 种图表渲染器
│   │   ├── schemas/             ← JSON Schema 验证
│   │   ├── examples/            ← 示例 JSON
│   │   └── assets/              ← 模板 + GIF 导出库
│   ├── scholar-notes/
│       ├── SKILL.md
│       ├── README.md
│       ├── assets/              ← Style A + Style B 模板
│       ├── references/          ← 布局库 + 组件手册 + checklist
│       └── examples/            ← Style A/B 示例（8 个）
│   ├── card-theater/
│       ├── SKILL.md
│       ├── README.md
│       ├── assets/              ← 5 种模板 HTML
│       └── references/          ← Prompt 参考
│   ├── video-shot-demos/
│       ├── SKILL.md             ← 工作流 + 交付标准
│       ├── README.md
│       ├── references/          ← 播放器/镜头/音效/风格库/角色 五份规范
│       ├── assets/              ← 起步骨架 template.html
│       │   └── examples/        ← 两套成片实例（glm 29 镜头 + doubao 11 镜头，各带安安表情与图标）
│       └── scripts/             ← 无头截图质检工具
│   ├── phone-ui-demos/
│       ├── SKILL.md             ← 分镜表确认工作流 + 交付标准
│       ├── README.md
│       ├── references/          ← 播放器/手机舞台/大字幕/系统组件 四份规范
│       └── assets/              ← 起步骨架 + kexue 8 镜头成片实例
├── web_animation/               ← 原始示例 HTML（历史存档）
├── UI/                          ← UI 设计参考图
├── prompt.md                    ← Prompt 模板集合
├── package.json
├── CONTRIBUTING.md
└── README.md

---

贡献与许可

见 CONTRIBUTING.md，欢迎提交新的动画 Skill！

MIT — for educational use only.