AI Animation Skills

Install

Works in

• Claude Code
• Cursor
• Codex
• Gemini CLI
• Koda
• Coddy

Manual install

npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ppt-animation

What it does

AI Animation Skills is a set of twelve skills that make an agent build single-file HTML animations: presentations, diagrams and demo clips. Every `skills/<name>` folder holds a `SKILL.md` with instructions for the agent, a `README.md` for people, prompt notes in `references/` and templates in `assets/`. The agent picks a skill from the description of your task or from the name in your request. `ppt-animation` makes PPT-style slides with elements easing in step by step and five ready themes. `flowchart` draws educational diagrams and explanations of how models such as LSTM work, in CSS and SVG. `network-protocol-viz` shows TCP/IP, Ethernet frames, routing and DHCP. `dynamic-archify` builds architecture diagrams, data flows and state machines from text or Mermaid code, with motion along the lines and export to several formats. It comes with a Node.js renderer with JSON Schema validation and a manual SVG mode. `scholar-notes` formats notes as a handwritten notebook in two styles, and `card-theater` builds a 3D card carousel with a narrative sidebar. The rest are made for screen recording. `video-shot-demos` turns a storyboard into one HTML per shot, with 29 styles, camera moves and WebAudio sound effects. `phone-ui-demos` shows an app on a phone going through a lock screen, chats and settings. `win11-ui-demos` reproduces a Windows 11 desktop with a cursor and hints. `stacked-data-cards` lays argument cards into a stack along a timeline, `swiss-shot-demos` puts a chart in Swiss typography into every shot, and `ui2v-motions` keeps an offline copy of 1,262 GSAP animation packages with a lookup table by purpose. A video comes from recording the screen in full-screen mode.

Who it is for. For authors of technical videos, teachers and developers who need animated diagrams, presentations and demos in a single HTML file.

Example request

Make a ppt-animation presentation about the HTTP protocol, dark-tech theme, 5 pages

Limitations

• The author tested the set only in WorkBuddy. For Claude Code, Cursor, Codex CLI and Gemini CLI the compatibility table says compatible, without a separate check.
• The `ui2v-motions` folder is an offline copy of the ui2v.com repository with 9,669 files and 641 MB. Installing all skills with the whole-repository command includes it, so install the skills you need one by one.
• The `dynamic-archify` renderer runs on Node.js. Without it only the manual SVG mode remains.
• The license is MIT, and the author adds that the materials are for educational use only.
• Skills install from the `main` branch and change with it. You can pin a version with a tag or commit link or a release archive. Some of the `SKILL.md` instructions are written in Chinese.

How to disable. Delete the folders of the skills you want to drop from the agent's skills directory: `.claude/skills/<name>/` in Claude Code, `.agents/skills/<name>/` in Cursor, `.codex/skills/<name>/` in Codex CLI. The finished HTML files sit wherever the agent saved them and do not depend on the skill: they open on their own.

README in short

The repository holds twelve skill folders, a `SKILL_TEMPLATE.md` for new skills, interface mockups in `UI/`, the original prompts `prompt.md` and `original-prompt.txt`, a `package.json` and contribution rules. The description, in Chinese and English, opens with a gallery of previews for every skill, followed by detailed descriptions, three install routes, an agent compatibility table, sample requests and the directory structure. The `dynamic-archify` folder holds schemas, renderers, examples and tests.