AI-Animation-Skill: turning science explainer text into animated HTML slides

The deliverable is an HTML file, not a deck you can edit later

The repository description is in Chinese and states the goal plainly. It is a toolkit that uses AI to generate HTML presentation animations, letting video creators turn science explainer text into polished demo animations quickly.

What the README is emphatic about is the scope. The tagline reads: not a collection of templates, but a runnable AI animation generation workflow. It is built on a curated set of prompt templates packaged as a Skill, working with OpenClaw, Workbuddy and QClaw, and the promise is a two-step conversion from explainer text to a finished animation.

The two modes are described in the README's own terms. Mode one, the default, takes the science text and generates a basic HTML page, then restructures it with a Level2 slide template into a polished presentation file. Mode two is optional and takes HTML that has already been generated, restructures it with an Animation flowchart template, and produces a flat UI style instead of slides.

The output medium matters for how you use it. Because the result is HTML with CSS animation, it is something you can record with a screen capture tool and drop into a video, or open in a browser and present. It is not a PowerPoint file, and there is no export path to one mentioned anywhere in the documentation. The `ppt` topic tag reflects the visual style of the result rather than the file format, and the templates are described as HTML carousel presentations.

The target use cases are listed as video material for Bilibili, classroom teaching and technical sharing, which tells you the intended workflow is generate, then record, rather than generate, then edit.

Forty-four templates split across a carousel set and a flowchart set

The distilled content table gives the counts, and they are the core of the repository.

There are 26 high quality HTML carousel templates in the PPT Level2 set, with a selection guide in a SUMMARY.md. There are 4 reusable base carousel templates as a fallback. And there are 14 flowchart-style HTML templates, also with a selection guide. Plus the workflow itself, the full chain from text to HTML to Level2 restructuring to flowchart.

The Level2 catalogue is organized into nine numbered series, and each series targets a different rhetorical job. Series 1 with one template covers concept introduction and comparison, using a versus comparison card and an SVG flowchart. Series 2 covers concept definition and hierarchical structure, and is described as the most varied with 13 animations. Series 3 has three templates for lightweight, step-by-step and minimalist content, where 3-3 is noted as the lightest at 331 lines. Series 4 covers cases, experiments and code, with a code rain animation. Series 5 covers warnings, failures and danger, and 5-4 reaches 15 animations across 13 pages. Series 6 covers guardrails, architecture and feedback, with 6-2 as a red and green versus comparison. Series 7 covers tracing, context and the doom loop, with 7-2 reaching 17 animations. Series 8 covers debate, comparison and fusion, and 8-3 reaches 30 versus comparison pairs. Series 9 covers summary, consensus and refinement, with 9-3 the most refined at 5 pages.

The base set of four is described as simple style, rich charts, best visual effect and general recommendation for 3, and an adjustable layout for 4.

The Animation set is topic-led, and here the bias of the template catalogue becomes obvious. There is a block of recurrent network templates, RNN-2 through RNN-7, covering layered cards, step-by-step presentation, standardisation flow, the fatal flaw, gradient explosion warning and a two-problem comparison. LSTM-1 covers the three-stage gating. Then onehot and onehot-drawback cover encoding and its sparsity drawback, word2vec-1 covers semantic vectors, Comprehension covers an understanding architecture, GPU covers compute hardware, Cross-modal disentanglement - 2 covers multimodal work, and The fatal flaw of DNN covers deep learning problems.

So if your explainer is about a transformer, a database, or a supply chain, the closest matches are the generic RNN and architecture ones. The catalogue is deepest exactly where a lot of technical explainer content sits, and thinner elsewhere.

Installation is copying a folder and restarting the agent

The quickstart gives the install for Workbuddy as an example, and it is three steps with no build tooling involved.

You download the project, copy the AI-Animation-Skill folder into the `~/.workbuddy/skills/` directory, and restart WorkBuddy. Other agents use their own equivalent directory, and the README names OpenClaw, Workbuddy and QClaw as the environments this skill is built for.

What makes this a skill rather than a library is the presence of SKILL.md at the root of the repository.

The installed tree is small, and the README prints its top level in full:

AI-Animation-Skill/
└── assets/

Everything else lives under `assets/templates/`, which is where the carousel and flowchart files are kept. The project structure in the README lists it as the skill main file, the workflow definition, alongside the README, the LICENSE and the assets directory holding the templates. The agent reads that file to learn what the skill does and how to run it, in the same way the Agent Skills format used by other coding agents expects.

The usage itself is conversational rather than programmatic. In mode one you paste the science content into the conversation and say that you want a PPT generated, the skill produces a basic HTML page, chooses a Level2 template to restructure it, and outputs the presentation file. In mode two you first complete mode one to get AI_Animation.html, then ask for a flowchart, and the skill picks an Animation template and restructures it into the flat UI style.

There is no CLI, no configuration file and no build step, and the technology stack section confirms the intent. The front end is HTML5, CSS3 and JavaScript with no framework dependency, the animation layer uses CSS animation, keyframes, 3D transforms and canvas particles, and the compatibility target is modern browsers including Chrome, Firefox, Safari and Edge.

The template selection guides are the part that matters for output quality

Two of the template families ship a SUMMARY.md, and those files are the mechanism by which an agent chooses well.

The README is explicit that the model selects the most appropriate template automatically based on the type of explainer content, and points to the SUMMARY.md for details. The same file exists in the Animation directory. The project structure section annotates them as reference documents for AI template selection, and the Animation section calls out its SUMMARY.md the same way.

That is a deliberate design choice. A skill that just ships 44 files would put the whole burden on the agent to reason about which one fits, which is exactly the kind of judgment a model does unreliably. A selection guide that maps content type to template series turns a vague prompt into a lookup, and the series table in the README is that mapping written out: series 1 for concept introduction, series 2 for concept definition, series 4 for code, series 8 for debate, and so on.

The cost is that the catalogue is a fixed point of view. The guides describe the templates in terms of rhetorical structure rather than subject matter, which is the right axis for reuse, but it means the templates themselves are styled. The 26 Level2 templates appear to be variations on a common design language with different animation sets, and the numbers in the table, 13 animations for series 2, 30 versus comparison pairs for 8-3, 5 pages for 9-3, are the distinguishing details between them.

So the output of this skill is a recognizable house style. That is an advantage when you want consistency across a video series, and a limitation when you want each piece to look distinct.

Compared with a slide generator and with a hand-written animation

Two other approaches cover the same ground, and the difference in approach is about who writes the code.

A slide generation service, from a hosted tool or a Python library that writes a deck file, produces an editable artifact. You get a text outline, a title, bullet points, and an export to a format you can adjust. The difference in approach is that the animation is secondary and the structure is primary, so the result reads as a document with transitions rather than as a motion piece.

A hand-written animation gives you full control over timing and choreography, and it is the right answer for a hero moment where the animation carries the explanation. The difference is that you write the CSS keyframes yourself, and for a series of videos that cost multiplies.

This skill sits in the middle and makes a deliberate trade. It assumes the animation is the point, and it uses the model to write the markup for it. The template set is what makes that feasible, since a model asked to animate an explanation from scratch produces unpredictable output, while a model asked to restructure its output into a known template produces something that holds together.

The consequence is that the animation vocabulary is fixed at 44 designs. There is no template for, say, a timeline reveal or a morphing diagram, and the flowchart set leans towards explaining model architecture. A creator whose explainer is a walkthrough of a UI or a historical narrative will find the fit less comfortable than one whose explainer is about how a neural network works.

A small repository with a short history

The maintenance facts are modest, and worth stating before anyone plans a series around it.

The repository is not archived, and the last push was on 2026-04-16. The listed releases are AI.1.1.0 on 2026-04-16 and AI on 2026-04-12, so two release entries a few days apart and then nothing since April. The version naming in the release list, AI.1.1.0, does not follow a semantic version scheme in the usual sense.

The top level of the repository is four entries, `CHANGELOG.md`, `LICENSE`, `README.md` and `SKILL.md`, plus the `assets/` directory. There is no source tree, no build configuration and no test suite, because the deliverable is the SKILL.md file and a set of static HTML files.

The licence is MIT, with the terms in the LICENSE file, and the README states the project uses the MIT License. That is the permissive end of the scale, and it is worth noting in a way specific to this project rather than in general: the templates are the asset, and MIT permits you to take them, modify them and use them in videos you produce without attribution requirements beyond retaining the notice.

The project also links a changelog at CHANGELOG.md for the update history, and the templates are numbered and named in a way that suggests a curated set rather than a growing collection. Whether that set grows is a question the changelog would answer over time, and the README points to it for that.

Editorial conclusion

Adopt AI-Animation-Skill if you produce video or classroom material from written explainers and want the output to be a self-contained HTML file you can screen record, and if your agent environment can load a skill directory. Do not adopt it if you need editable slide decks, since the deliverable is HTML rather than a presentation format, and check the template catalogue first because the built-in topics lean towards neural network and machine learning explainers. Verify first that the agent you use reads SKILL.md and that the generated file opens in the browsers you target, since the templates use CSS animation, keyframes, 3D transforms and canvas particles.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. README
4. Releases
5. Unclecheng-li/AI-Animation-Skill on GitHub