5 скиллов Claude Code для анимаций уровня студии

В чём фокус

Анимация — самая дорогая часть фронтенда, и это не случайность. Красивый скролл с параллаксом, кнопка, которая отзывается на наведение как живая, 3D-сцена на главной — за каждым таким эффектом стоят годы насмотренности и знание довольно капризных библиотек. Поэтому студии берут за «оживший» лендинг сотни тысяч, а фрилансеры-моушнеры расписаны на месяцы вперёд. Порог входа держится не на секретных инструментах, а на опыте, который долго набирать.

Claude Code без подготовки эту задачу решает посредственно. Попроси его «добавь красивую анимацию» — и получишь дефолтный fade-in на полсекунды, который выглядит ровно как тысячи других сайтов, собранных нейросетью. У этого даже название появилось: AI slop. Модель знает синтаксис библиотек, но не знает вкуса: какой должна быть длительность, какая кривая easing уместна, в каком порядке элементам выходить на сцену.

Скиллы чинят ровно это. Скилл — это папка с инструкциями, которую Claude Code подхватывает сам, когда задача совпадает с её темой (официальная дока по skills). По сути ты нанимаешь в проект специалиста: его знания лежат в файлах, и модель читает их перед тем, как писать код. Пять скиллов из этого гайда собирают полный штат моушн-студии: аниматор, 3D-художник, режиссёр, арт-директор и выпускающий, который вычищает «нейросетевой» вид. Все пять бесплатные и открытые, у всех лицензия MIT.

Идея в одну строку: вкус и опыт моушн-дизайнера можно положить в папку проекта — и Claude будет читать их перед каждой анимацией. Пять таких папок уже написаны, осталось поставить.

Шаг 0: что нужно до старта

Всё ниже работает поверх Claude Code — Claude, встроенного в редактор кода: он читает файлы проекта, запускает команды и правит код сам. Если он ещё не стоит:

Установка с нуля и оплата российской картой — Claude Code из России за вечер →
Вариант без подписки, на бесплатных моделях — Claude Code бесплатно →

Про сами скиллы достаточно знать две вещи. Первая: скилл живёт в папке .claude/skills проекта (или в общей ~/.claude/skills), и внутри обязательно лежит файл SKILL.md с инструкциями. Вторая: ставить руками почти ничего не придётся — у большинства репозиториев из гайда установка сводится к одной команде npx skills add, которая скачает и разложит всё сама. Терминал открывается прямо в VS Code: Terminal → New Terminal.

GSAP Skill — штатный аниматор

GSAP — библиотека, на которой держится добрая половина всех «дорогих» анимаций в вебе: скролл-сцены, пиновка секций, разлетающийся по буквам текст. И это тот редкий случай, когда скилл выпустили сами создатели библиотеки: greensock/gsap-skills — официальный репозиторий GreenSock, и у него уже больше 12 тысяч звёзд на GitHub. Значимость этого легко недооценить: модель перестаёт писать GSAP-код «по памяти» из старых версий и начинает писать так, как рекомендуют авторы.

Внутри не один скилл, а восемь: ядро (tween-ы, easing, stagger), таймлайны, ScrollTrigger для скролл-анимаций, плагины вроде Flip, Draggable и SplitText, утилиты, интеграция с React через useGSAP, оптимизация производительности и обвязка под Vue и Svelte (список в README репо). Claude сам подтягивает нужный модуль под задачу: просишь скролл-сцену — читает ScrollTrigger, просишь анимацию в React-компоненте — читает React-паттерны.

▸установка · терминал в корне проекта

npx skills add https://github.com/greensock/gsap-skills

# или как плагин Claude Code:
/plugin marketplace add greensock/gsap-skills

Проверить проще всего на классике жанра — скролл-сцене. Такой промпт без скилла почти гарантированно даст кривой или устаревший код, со скиллом — рабочую сцену:

▸мини-промпт для проверки

Сделай hero-секцию лендинга: заголовок разлетается по буквам
при загрузке (SplitText), а при скролле секция пинуется и
картинка проезжает с параллаксом (ScrollTrigger). Плавные
easing, без резких стартов.

Three.js Skills — 3D-художник

Если GSAP отвечает за движение плоского интерфейса, то Three.js — это третье измерение: вращающиеся продукты, частицы, шейдерные фоны, интерактивные сцены. Библиотека мощная и многословная, и именно на ней Claude без подсказок чаще всего спотыкается: путает сигнатуры конструкторов и API разных версий. Сборник CloudAI-X/threejs-skills (2,7 тыс. звёзд) решает это в лоб: даёт модели точные справки по API и рабочие примеры, разложенные по десяти модулям — от основ сцены и геометрии до материалов, света, текстур, анимации, загрузчиков моделей, шейдеров, постобработки и интерактива.

Ставится он по-старинке, клонированием в папку скиллов проекта — README прямо говорит копировать файлы в .claude/skills:

▸установка · терминал в корне проекта

git clone https://github.com/CloudAI-X/threejs-skills.git .claude/skills/threejs-skills

▸мини-промпт для проверки

Собери фон для hero-секции на Three.js: тёмная сцена,
несколько тысяч частиц медленно дрейфуют и реагируют на
движение мыши. Держи 60 fps, на мобильных частиц меньше.

Один честный совет: 3D — это гарнир, а не основное блюдо. Одна сцена в hero выглядит как работа студии, 3D в каждой секции — как шаблон из 2015 года. Поэтому этот скилл ставится по потребности, а не в обязательный набор.

Motion Design Skill — режиссёр движения

Первые два скилла учат Claude «как написать код анимации». Этот — «какой анимация должна быть», и в штате студии это роль режиссёра. LottieFiles/motion-design-skill выпустила команда LottieFiles — та самая платформа, вокруг которой построена индустрия UI-анимации. Внутри нет ни строчки про конкретную библиотеку: скилл описывает принципы, которые работают что в CSS, что в GSAP, что во Framer Motion.

Конкретно там четыре блока: таблицы таймингов и easing-кривых под разные типы движения, хореография — в каком порядке и с какими задержками выводить группы элементов, двенадцать классических принципов диснеевской анимации, адаптированных под интерфейсы, и четыре «характера движения» для настройки анимации под тон бренда (README репо). Авторы называют подход philosophy-first: модель сначала решает, что анимация должна сообщить, и только потом пишет код. На практике это ровно та разница, которую видно глазом: элементы перестают вываливаться одновременно и начинают выходить на сцену по очереди, как поставленный номер.

▸установка · терминал в корне проекта

npx skills add LottieFiles/motion-design-skill

▸мини-промпт для проверки

Появление карточек тарифов сейчас скучное. Поставь
хореографию: продумай порядок, задержки и easing так, чтобы
взгляд шёл от заголовка к ценам. Объясни выбор таймингов.

Design DNA — арт-директор

Самая частая просьба к дизайнеру звучит как «сделай как вон там». Человеку для этого нужен насмотренный глаз, Claude — скилл zanwei/design-dna (1,1 тыс. звёзд). Он берёт референс — скриншот, картинку или ссылку на сайт — и разбирает его визуальный язык в машиночитаемый JSON: токены цветов и типографики, качественное описание стиля, визуальные эффекты. Работает в три фазы: структура, анализ референса, генерация твоего интерфейса по извлечённой «ДНК» (README репо).

Зачем это в подборке про анимации: движение не живёт в вакууме. Дорогая анимация на дешёвой вёрстке смотрится как смокинг с кроссовками. Design DNA закрывает вопрос «на чём эти анимации будут стоять»: файл с ДНК коммитится в репозиторий, переиспользуется между проектами, и любой следующий промпт наследует тот же визуальный язык. Субъективное «сделай в таком вайбе» превращается в спецификацию, которую модель читает буквально.

▸установка · терминал в корне проекта

npx skills add zanwei/design-dna

▸мини-промпт для проверки

Вот скриншот сайта, чей стиль мне нравится: ref.png.
Извлеки его Design DNA в JSON, сохрани в проект и собери
по нему секцию с моими тарифами из content/pricing.md.

Genjutsu — выпускающий, который убирает «нейросетевой» вид

Последний член команды — самый характерный. Скилл AThevon/genjutsu раньше назывался creative-excellence, а после ребрендинга получил имя из «Наруто» и слоган «The art of illusion. Cast motion. Paint signatures. Zero AI slop». Красный энсо на логотипе — не случайность: весь скилл построен вокруг одной цели — чтобы результат не выглядел сгенерированным.

Внутри два главных приёма и пятнадцать подскиллов. Команда /genjutsu:cast («Иллюзионист») точечно усиливает конкретные взаимодействия и анимации, /genjutsu:paint («Мастер-художник») строит визуальную систему с нуля. Подскиллы закрывают весь стек: принципы движения, отдельные правила для мобильных и десктопа, дизайн-аудит, слои под GSAP, Framer Motion, чистый CSS, Three.js с React Three Fiber, генеративный Canvas — и даже нативные Jetpack Compose и SwiftUI (README репо). Звёзд у него пока немного, 75 — это самый молодой скилл подборки, но именно он связывает остальные четыре в единый процесс.

▸установка · внутри Claude Code

/plugin marketplace add AThevon/genjutsu
/plugin install genjutsu

▸мини-промпт для проверки

/genjutsu:cast — пройдись по главной странице: hover-состояния
кнопок, появление секций, микровзаимодействия. Сейчас всё
выглядит сгенерированным, надо чтобы выглядело поставленным.

Штат моушн-студии из пяти скиллов Claude Code: GSAP, Three.js, Motion Design, Design DNA, Genjutsu — роль и репозиторий каждого — Пять скиллов — пять ролей моушн-студии внутри Claude Code

В каком порядке ставить

Соблазн поставить все пять разом лучше сдержать: каждый скилл — это инструкции, которые попадают в контекст модели, а контекст не резиновый. Правильная стратегия — как найм в настоящую студию: сначала ключевые роли, остальные по мере задач.

Начинай с пары «режиссёр плюс аниматор»: Motion Design Skill задаёт вкус, GSAP Skill даёт руки. Уже эти два меняют картину радикально — тайминги, хореография и корректный код скролл-сцен закрывают девяносто процентов задач обычного сайта. Третьим ставь Design DNA, когда появится референс, на который хочется равняться: он свяжет анимации с визуальным языком. Three.js Skills подключай только под конкретную задачу с 3D — держать его постоянно нет смысла. А Genjutsu ставь последним и прогоняй как финальный проход перед публикацией: его работа — полировка того, что собрали остальные.

Порядок установки пяти скиллов: Motion Design и GSAP первыми, затем Design DNA, Three.js по потребности, Genjutsu — финальная полировка — Порядок подключения: база → стиль → 3D по задаче → полировка

Проверить, что скиллы подхватились, просто: спроси у Claude «какие скиллы тебе сейчас доступны» — он перечислит всё, что видит в .claude/skills и в установленных плагинах.

◆ от анимаций — к заводу

Студия собрана. А кто будет приносить ей заказы?

Скиллы дают продукту вид, за который платят. Дальше идёт система, которая приводит людей: контент пачками, воронки на кодовые слова, лид-магниты и платёжки — всё в том же Claude Code. Эту систему собираем на практикуме, по шагам.

Что за практикум →

Чтобы не споткнуться

Три места, где новички теряют время — и как пройти их сразу.

Скилл — не волшебная кнопка

«Сделай красиво» остаётся плохим промптом даже с пятью скиллами. Давай контекст: что за секция, какое настроение, какой референс. Скилл добавляет модели вкус и знания, но задачу по-прежнему ставишь ты.

Не набирай весь штат в один проект

Каждый активный скилл ест контекст. Для лендинга без 3D пара Motion Design + GSAP лучше, чем все пять сразу: модель глубже читает то, что реально нужно, и меньше путается.

Проверяй глазами, не на слово

Анимация — это про ощущение, и финальный судья тут ты. Открой страницу, поскроль, наведи мышку. Что-то дёргается или суетится — так и скажи Claude: «вот эта анимация суетливая, сделай спокойнее». Он поймёт.

А если…

Четыре сомнения, которые ловят на входе. Отвечаю прямо.

…я не программист и слова GSAP не знаю?

Тебе и не нужно. Скиллы существуют ровно затем, чтобы техническую часть знал Claude. Твоя работа — сказать, что должно происходить на экране, обычными словами, и оценить результат глазами.

…это всё платное?

Все пять репозиториев открытые, с лицензией MIT. Платишь ты только за подписку на Claude, которая у тебя и так есть. В этом и фокус: штат моушн-студии добавляется к подписке за ноль рублей.

…у меня уже готовый сайт, не сломается?

Скилл сам по себе ничего в проекте не меняет — это знания, а не правки. Меняет Claude по твоим задачам, как обычно. Работай через план: сначала попроси показать, что он собирается трогать, потом одобряй.

…скиллы конфликтуют между собой?

Они дополняют друг друга: Motion Design отвечает на «какой», GSAP и Three.js на «как», Design DNA на «в каком стиле», Genjutsu полирует. У Genjutsu есть свой GSAP-подскилл — если стоят оба, ничего страшного, но начать можно и с одного Genjutsu.

Зачем тебе это на самом деле

Сайтов, собранных нейросетью, за последний год стало столько, что глаз научился узнавать их за секунду: одинаковые градиенты, одинаковый fade-in, одинаковая пустота в движении. На этом фоне страница, где элементы выходят как поставленный номер, а кнопка отвечает на касание, читается как дорогая — даже если человек не может объяснить почему. Движение стало новым признаком того, что над продуктом работали люди со вкусом.

Пять скиллов из этого гайда — способ получить этот признак, не нанимая студию. Ты один, с подпиской на Claude и пятью папками инструкций, выпускаешь то, что раньше требовало команды из четырёх специалистов. Для эксперта, который продаёт свои продукты, это прямая экономика: лендинг курса, сайт услуги, страница лид-магнита перестают выглядеть самоделкой и начинают конвертить как работа студии.

А дальше

Скиллы для анимаций — один этаж системы. Ниже лежит каркас проекта, чтобы Claude не путался и не переписывал рабочее — про него отдельный гайд: Каркас вайбкодинг-проекта →. Выше — то, ради чего всё затевалось: продукты и контент, которые эти анимации продают.

У нас эта верхняя часть собрана в контент-завод на Claude Code: тренды, карусели и рилсы пачкой, воронки на кодовые слова, лид-магниты и платёжки. Как и скиллы, завод собирается один раз и дальше работает на тебя.