# anime-js

Скилл для ИИ-агента, который подсказывает, как собрать анимацию на Anime.js по 12 принципам Disney.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 637 установок · ★ 124
- Автор: dylantarre
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/09-by-tool-framework/anime-js/SKILL.md
- Обновлён: 2025-12-30
- HTML: https://affpapa.org/nevibecode/skills/dylantarre-anime-js

## Что делает

Скилл описывает все 12 принципов анимации Disney и показывает для каждого готовый приём на Anime.js. Squash and stretch через `scaleX` и `scaleY`, anticipation через `anime.timeline()`, follow through с относительным сдвигом `'-=450'`, арки через `anime.path()` по SVG-контуру. Агент берёт нужный раздел и подставляет ваши селекторы.

Внутри — примеры кода на JavaScript: таймлайны, `keyframes`, `anime.stagger()`, встроенные easing-функции плюс `spring()` и `elastic()`. Есть разделы про тайминг (быстро, обычно, медленно), преувеличение с overshoot и объём через `rotateX`/`rotateY` с `perspective`.

Скилл рассчитан на проект, где Anime.js уже подключён: без библиотеки примеры не запустятся. Ставится одной командой через `npx skills add`, файл ложится в `~/.claude/skills/anime-js/SKILL.md`.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill anime-js -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/anime-js/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/anime-js/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill anime-js -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/anime-js/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill anime-js -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/anime-js/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles anime-js
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/anime-js/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill anime-js -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/09-by-tool-framework/anime-js
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/anime-js/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill anime-js -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/09-by-tool-framework/anime-js/SKILL.md

## Когда брать
- собрать прыжок персонажа с squash and stretch
- сделать замах перед движением через таймлайн
- рассинхронизировать волосы и плащ относительно тела
- пустить элемент по SVG-контуру
- подобрать easing под драматичный или резкий переход

## Примеры запросов агенту
- Сделай анимацию карточки на Anime.js с принципом appeal — мягкий scale и тень
- Покажи, как через anime.timeline() сделать anticipation перед прыжком мяча
- Как в Anime.js пустить элемент по SVG-пути через anime.path()?

## Похожие
- [animejs](https://affpapa.org/nevibecode/skills/animejs.md) — скилл · 2800 установок
- [gsap-plugins](https://affpapa.org/nevibecode/skills/gsap-plugins.md) — скилл · 67200 установок
- [gsap-scrolltrigger](https://affpapa.org/nevibecode/skills/freshtechbro-gsap-scrolltrigger.md) — скилл · 2800 установок
- [gsap](https://affpapa.org/nevibecode/skills/mengto-gsap.md) — скилл · 1800 установок
- [animation-vocabulary](https://affpapa.org/nevibecode/skills/animation-vocabulary.md) — скилл · 239000 установок
- [find-animation-opportunities](https://affpapa.org/nevibecode/skills/find-animation-opportunities.md) — скилл · 208900 установок

## Другие версии с тем же именем
- [anime-js · mindrally](https://affpapa.org/nevibecode/skills/anime-js.md) — 736 установок

Из того же набора: [dylantarre/animation-principles](https://affpapa.org/nevibecode/by/dylantarre/animation-principles.md) — 86 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md