AI Animation Skills
Двенадцать скиллов, по которым агент собирает однофайловые HTML-анимации: слайды, схемы протоколов, архитектурные диаграммы и демо для записи экрана
- 1 661 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент создает и записывает файлы HTML, примеры и шаблоны в рабочую папку проекта
- `dynamic-archify` запускает рендерер на Node.js, а `video-shot-demos` содержит средство проверки кадров через снимки экрана без окна браузера
- Установка всего репозитория добавляет в каталог скиллов офлайн-библиотеку на сотни мегабайт
Установка
- Работает в
Ручная установка
npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ppt-animationУстановка одного скилла. Имя папки замените на нужное: flowchart, network-protocol-viz, dynamic-archify, scholar-notes, card-theater, video-shot-demos, stacked-data-cards, win11-ui-demos, swiss-shot-demos или ui2v-motions.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент создает и записывает файлы HTML, примеры и шаблоны в рабочую папку проекта
- `dynamic-archify` запускает рендерер на Node.js, а `video-shot-demos` содержит средство проверки кадров через снимки экрана без окна браузера
- Установка всего репозитория добавляет в каталог скиллов офлайн-библиотеку на сотни мегабайт
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
AI Animation Skills — набор из двенадцати скиллов, по которым агент собирает однофайловые HTML-анимации: презентации, схемы, диаграммы и демонстрационные ролики. В каждой папке `skills/<имя>` лежат `SKILL.md` с инструкциями для агента, `README.md` для человека, подсказки в `references/` и шаблоны в `assets/`. Агент выбирает скилл по описанию задачи или по названию в вашем запросе. `ppt-animation` делает слайды в стиле PPT с поэтапным появлением элементов и пятью готовыми темами. `flowchart` рисует учебные схемы и объяснения работы моделей, например LSTM, на CSS и SVG. `network-protocol-viz` показывает TCP/IP, кадры Ethernet, маршрутизацию и DHCP. `dynamic-archify` строит архитектурные диаграммы, потоки данных и автоматы из текста или кода Mermaid, с движением потоков по линиям и экспортом в несколько форматов. Для него есть рендерер на Node.js с проверкой по JSON Schema и ручной режим SVG. `scholar-notes` оформляет конспекты как рукописную тетрадь в двух стилях, а `card-theater` собирает 3D-карусель карточек с боковой панелью повествования. Остальные скиллы рассчитаны на запись экрана. `video-shot-demos` по раскадровке делает по одному HTML на кадр: 29 стилей, движение камеры, звуки на WebAudio. `phone-ui-demos` показывает приложение на телефоне, где идут экран блокировки, чаты и настройки. `win11-ui-demos` воспроизводит рабочий стол Windows 11 с курсором и подсказками. `stacked-data-cards` выкладывает карточки тезисов стопкой по таймлинии, `swiss-shot-demos` ставит в каждый кадр диаграмму в швейцарской типографике, а `ui2v-motions` хранит офлайн-копию 1262 пакетов анимации GSAP с таблицей подбора по назначению. Видео получается записью экрана в полноэкранном режиме.
Для кого. Для авторов технических роликов, преподавателей и разработчиков, которым нужны анимированные схемы, презентации и демонстрации в одном HTML-файле.
Подходит, если
- Нужна презентация на 5–10 слайдов с анимацией для урока или видео, и PowerPoint не хочется
- Надо показать, как работает протокол, например TCP-рукопожатие, пошаговой анимацией
- Для технической документации требуется архитектурная схема с движущимися потоками данных
- Сценарий ролика нужно превратить в набор экранных демо, по одному HTML на кадр
- Конспект по технической теме хочется оформить как красивую страницу, а не как текстовый файл
Не подходит, если
- Нужен готовый видеофайл: скиллы выдают HTML, ролик вы записываете с экрана сами
- Нужны редактируемые слайды в формате PPTX: на выходе HTML-страницы
- Требуется анимация для интерфейса продукта: это сценарные демо для записи, а не компоненты для встраивания
- Нужен точный инженерный граф кода без анимации: такие задачи решают скиллы для draw.io и подобные инструменты диаграмм
Пример запроса к агенту
Сделай ppt-animation презентацию про протокол HTTP, тема dark-tech, 5 страницОграничения
- Автор проверял набор только в WorkBuddy. Для Claude Code, Cursor, Codex CLI и Gemini CLI в таблице совместимости стоит отметка «совместимо» без отдельной проверки.
- Папка `ui2v-motions` — офлайн-копия репозитория с ui2v.com на 9669 файлов и 641 МБ. Установка всех скиллов командой для всего репозитория включает и ее, поэтому нужные скиллы удобнее ставить по одному.
- Рендерер `dynamic-archify` работает на Node.js. Без него остается ручной режим SVG.
- Лицензия MIT, при этом автор приписывает, что материалы предназначены только для образовательного использования.
- Скиллы ставятся с ветки `main` и меняются вместе с ней. Зафиксировать версию можно ссылкой на тег или коммит либо архивом из раздела релизов. Часть инструкций в `SKILL.md` написана по-китайски.
Как отключить. Удалите папки нужных скиллов из каталога скиллов агента: `.claude/skills/<имя>/` в Claude Code, `.agents/skills/<имя>/` в Cursor, `.codex/skills/<имя>/` в Codex CLI. Готовые HTML-файлы лежат там, куда агент их сохранил, и от скилла не зависят: они открываются сами.
Частые вопросы
Как сделать анимированную презентацию в HTML с помощью ИИ-агента?
Скилл `ppt-animation` собирает однофайловую презентацию 16:9, где после перелистывания элементы страницы появляются по очереди. Есть темы dark-tech, газетная теплая, чистая белая, киберпанк и темный градиент, переключение клавишами, колесом и щелчком. Запрос из примера автора: «Сделай презентацию ppt-animation про протокол HTTP, тема dark-tech, 5 страниц».
Как нарисовать архитектурную схему с движущимися потоками?
`dynamic-archify` принимает описание на естественном языке или код Mermaid и строит один из пяти типов: архитектуру, процесс, последовательность, поток данных или автомат. Диаграмма получается встроенным SVG с переключением темной и светлой темы, бегущими линиями и частицами. Рендерер работает на Node.js с проверкой по JSON Schema, без Node есть ручной режим SVG.
Как получить видео, если скиллы делают HTML?
Откройте HTML на весь экран и запишите экран. `video-shot-demos` создан под такую запись: ролик стартует с черного экрана, в нем есть виртуальные часы, подсказки по наведению, пауза и повтор. На один кадр приходится один HTML, а стиль кадров чередуется.
Чем `flowchart` отличается от `dynamic-archify`?
`flowchart` легче и рассчитан на учебные и научно-популярные объяснения в видео: важно, чтобы получилось красиво и понятно. `dynamic-archify` рассчитан на технические документы и ревью систем, где нужны точность и экспорт.
Можно ли поставить один скилл, а не весь набор?
Да. Для отдельного скилла дается ссылка вида `npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ppt-animation`, а полная команда без пути ставит все двенадцать, включая тяжелый `ui2v-motions`.
В какие агенты ставятся скиллы?
Папка скилла копируется в каталог скиллов агента: `.claude/skills/` для Claude Code, `.agents/skills/` для Cursor, `.codex/skills/` для Codex CLI, `~/.workbuddy/skills/` для WorkBuddy. Для Gemini CLI указан манифест расширения.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыMotion Skills для ИИ-агентов
motion-skills
Более 50 открытых скиллов для моушн-графики, анимации и видео: кинетическая типографика, графики, объяснялки, TikTok и Reels, WebGL, Manim
Скилл превращает идею, ссылку или скринкаст в готовое видео: аватар HeyGen, b-roll, субтитры и контроль качества
Пять скиллов: веб-презентации для записи видео, дизайн веб-страниц, промпты для GPT Image 2, поиск по базе знаний и статьи
Скилл для Cursor, Claude Code и Codex: по названию продукта или ссылке собирает 4K-ролик с музыкой, озвучкой и проверкой
Скилл для промо-роликов и кинетической типографики: идея и раскадровка до сборки, рендер в MP4 через Chrome и ffmpeg, проверка шестью гейтами
Скилл рисует интерактивные изометрические иллюстрации в SVG: шейдеры WebGL, страница HTML или компонент React, идея объясняется работающим устройством
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| AI Animation Skills (эта запись) | нет | 1 661 | |
| Awesome Seedance | нет | 2 327 | промпты и кейсы для Seedance 2.5 и 2.0 |
| Awesome Seedance 2 Prompts | нет | 2 187 | более 2000 промптов для видеомодели Seedance 2.0 |
| Awesome Gemini 3 Prompts | нет | 523 | избранные промпты для Gemini с изображениями |
Коротко о README
В репозитории лежат двенадцать папок скиллов, шаблон нового скилла `SKILL_TEMPLATE.md`, макеты интерфейса в `UI/`, исходные промпты `prompt.md` и `original-prompt.txt`, `package.json` и правила участия. Описание на китайском и английском открывается галереей с превью каждого скилла, затем идут подробные описания, три способа установки, таблица совместимости с агентами, примеры запросов и структура каталогов. В папке `dynamic-archify` лежат схемы, рендереры, примеры и тесты.
Бейдж для README
Исходный SKILL.md
--- name: "flowchart" description: "生成教育/科普类流程图、概念图、原理演示的动画 HTML 页面。用 CSS/SVG 绘制节点和连线，支持流动箭头、逐步出现、hover 高亮等动画效果。适合技术讲解、视频科普、PPT 配图场景。" version: "0.2.0" triggers: - "流程图" - "概念图" - "原理演示" - "示意图" - "神经网络演示" - "AI 模型可视化" - "flowchart" - "flow diagram" --- # Flowchart Skill ## 你是什么 你是一个专门生成**教育/科普类流程图与原理演示动画**的专家。每次被激活，你会根据用户描述的概念、流程或模型，生成一个完整的单文件 HTML，用动画直观展示其工作原理和数据流动。 **与 `dynamic-archify` 的区别：** - `flowchart` → 偏教育/科普，面向视频演示，轻量化，注重"好看 + 直观" - `dynamic-archify` → 偏工程/架构，面向技术文档，专业级，注重"精确 + 可导出" ## 支持的图表类型 | 类型 | 说明 | 示例 | |------|------|------| | 流程图 | 步骤流程、决策分支、循环 | 攻击链、渗透流程、API 调用链 | | 概念图 | 概念关系、知识结构、对比 | AI 模型对比、协议分层、架构分层 | | 原理演示 | 模型/算法/协议的动态工作过程 | RNN 展开、LSTM 门控、TCP 握手 | | 时序图 | 消息交互、请求响应、调用链 | 客户端-服务端交互、认证流程 | | 对比图 | 两种/多种方案的并排对比 | RNN vs LSTM、HTTP vs HTTPS | | 时间线 | 事件发展、版本演进、历史脉络 | 木马发展史、技术演进 | | 系统概览 | 简化的系统架构、模块关系 | 微服务拓扑、网络拓扑（简化版） | ### AI/ML 模型可视化（经典子集） 本 Skill 保留了 AI/ML 模型可视化的完整能力，已有以下示例： | 模型 | 动画重点 | 示例文件 | |------|---------|---------| | MLP | 前向传播、层间权重流动 | `assets/MLP.html` | | RNN | 时间步展开、隐藏状态传递 | `assets/RNN.html` |