animejs · bowtiedswan — скилл для Claude Code: что делает и как установить
Передаёт агенту справочные данные по Anime.js v4. Пригодится при вёрстке интерфейсной анимации, морфинга SVG и сборке таймлайнов.
npx skills add BowTiedSwan/animejs-skills --skill animejs -a claude-code
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a claude-codeЧто делает animejs
Скилл загружает в контекст структуру документации Anime.js четвёртой версии. Ассистент узнаёт синтаксис методов animate, createTimeline и createTimer. Туда же входят параметры для физики пружин через createSpring, разбивки текста утилитой splitText и привязки движения к прокрутке страницы через onScroll.
Справочник ориентирован строго на v4 с модульной структурой вроде animejs/animation и tree-shaking. Если проект написан под синтаксис третьей версии библиотеки, сгенерированный код потребует правок. В скилле описаны новые механизмы макета createLayout, параметры жестов createDraggable и методы морфинга morphTo.
Для работы самого кода в браузере понадобится пакет animejs из npm или подключение через ESM либо UMD из CDN. Скилл подсказывает сигнатуры функций и списки колбэков, избавляя от ручного поиска по исходникам.
Какие задачи решает
- собрать таймлайн для серии элементов страницы
- настроить морфинг контуров SVG через
morphTo - связать параметры анимации со скроллом через
onScroll - добавить физику перетаскивания блоков с помощью
createDraggable
Примеры запросов агенту
- Собери таймлайн Anime.js v4 для поочерёдного появления карточек товаров
- Покажи пример морфинга двух SVG-путей через morphTo в animejs
- Настрой скролл-анимацию через onScroll для фиксированной шапки сайта
Как установить animejs
1Через Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill animejs -a claude-codenpx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a claude-code2Вручную: положить файлы
~/.claude/skills/bowtiedswan-animejs/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/bowtiedswan-animejs/
1Через Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a codex2Вручную: положить файлы
.agents/skills/bowtiedswan-animejs/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a cursor2Вручную: положить файлы
.cursor/skills/bowtiedswan-animejs/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install BowTiedSwan/animejs-skills bowtiedswan-animejs2Вручную: положить файлы
.github/skills/bowtiedswan-animejs/SKILL.md1Через Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a gemini-cli2Командой платформы
gemini skills install https://github.com/BowTiedSwan/animejs-skillsВручную: положить файлы
.devin/skills/bowtiedswan-animejs/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о animejs
Как установить animejs в Claude Code?
Выполните в терминале команду npx skills add BowTiedSwan/animejs-skills --skill animejs -a claude-code.
Что делает скилл animejs?
Он передаёт ассистенту справочник по API Anime.js v4. Модель сразу видит сигнатуры методов для таймлайнов, SVG, жестов перетаскивания и скролла.
С какой версией Anime.js работает этот скилл?
Справочник составлен под Anime.js v4 с модульным импортом через animejs/timeline или animejs/animation. Для кода на базе устаревшего API v3 эти примеры не подойдут.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — animejs от других авторов.
