Новость

GreenSock выпустила официальные правила для нейросетей и агентов кодинга

The image features a black background with the text "Animate anything" written in white, with the word "Animate" slightly larger than "anything". The text is surrounded by four colorful shapes: a pink flower, a pink starburst, a pink flower, and a green arrow. The text "GSAP" is displayed in green at the bottom of the
Фото: GitHub

Знакомая картина: просишь нейросеть собрать элегантный скролл-эффект или сложный каскад плашек на сайте, а виртуальный ассистент упрямо генерирует устаревший синтаксис десятилетней давности, забывает очистить память или вешает тяжелую анимацию на свойства верстки. В GreenSock Animation Platform решили прекратить эти мучения разработчиков и моушн-дизайнеров. Команда GSAP выкатила собственный открытый репозиторий gsap-skills, созданный по стандарту Agent Skills. Это официальный пакет инструкций, шпаргалок и жестких архитектурных правил, который превращает языковые модели в компетентных аниматоров, знающих современную библиотеку от корки до корки.

Пакет ориентирован на среду агентского кодинга и без лишних танцев с бубном внедряется более чем в сорок популярных инструментов. Среди них — Claude Code, Cursor, Windsurf, GitHub Copilot, Codex и Google Antigravity. По-нашему, появление таких узкоспециализированных репозиториев — главное спасение для тех, кто собирает интерактивные промо-страницы и спецпроекты руками ИИ: модели перестают фантазировать несуществующие методы и учатся соблюдать гигиену веб-анимации.

Как подключить скиллы в рабочее пространство

Интеграция устроена прагматично: разработчики предлагают несколько путей в зависимости от привычного стека редакторов.

  • Быстрее всего развернуть набор через консоль: команда npx skills add https://github.com/greensock/gsap-skills самостоятельно определит активного агента на машине. Если среду нужно зафиксировать вручную, доступен флаг с указанием платформы, например --agent antigravity.
  • Пользователи Claude Code могут вызвать инструмент через встроенный каталог плагинов одной командой: /plugin marketplace add greensock/gsap-skills.
  • В редакторе Cursor правила подключаются через графический интерфейс: путь greensock/gsap-skills достаточно прописать в настройках по цепочке Settings -> Rules -> Add Rule -> Remote Rule (Github).
  • Для GitHub Copilot конфигурацию забирают прямо в корень проекта, скопировав файл .github/copilot-instructions.md и содержимое папки .github/instructions/.
  • Предусмотрен и ручной перенос директорий со скиллами в системные папки: в ~/.claude/skills/ для Claude Code, ~/.cursor/skills/ для Cursor, ~/.config/opencode/skills/ для OpenCode, ~/.codex/skills/ для OpenAI Codex, ~/.gemini/antigravity/skills/ для Google Antigravity, ~/.pi/agent/skills/ для Pi или непосредственно в локальную рабочую директорию .agent/skills/.

Анатомия репозитория: от базового API до чистки памяти

Внутри репозитория нет размытых рассуждений о прекрасном — всё разбито на прикладные модули, которые натаскивают нейросети на конкретные задачи визуального продакшена.

Модуль gsap-core вдалбливает агентам фундаментальную базу: работу с gsap.to(), gsap.from() и gsap.fromTo(), управление хронометражем, кривые сглаживания (easing), дефолтные параметры сцены и каскадные сдвиги (stagger), которые задают ритм движения списков. Блок gsap-timeline отвечает за режиссуру: построение цепочек, позиционные параметры, расстановку меток (labels), вложенные временные шкалы и контроль воспроизведения. Больше никаких рассинхронов, когда один элемент перекрывает другой раньше времени.

Связку движения со скроллом закрывает gsap-scrolltrigger. Модуль обучает ассистентов правильной настройке триггеров, привязке прогресса к полосе прокрутки (scrub), фиксации экранов на месте (pinning), а главное — вызову методов refresh и своевременному уничтожению триггеров при перестроении макета.

Отдельная гордость набора — модуль gsap-plugins. Он заставляет нейросети грамотно обращаться с тяжелой артиллерией: ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, наборами физических эффектов, CustomEase, EasePack, плагинами для SVG-графики и панелью отладки GSDevTools. Вспомогательный блок gsap-utils вооружает модели служебными функциями библиотеки: clamp, mapRange, normalize, interpolate, random, snap, toArray, selector, wrap и pipe — это избавляет код от самописных костылей математической обработки координат.

Производительность и жизнь внутри фреймворков

Модуль gsap-performance бьет по рукам за попытки анимировать свойства верстки, вызывающие перерисовку макета. Агентов принудительно учат двигать объекты исключительно через трансформации, точечно прописывать will-change, группировать операции в пакеты и щадить графический процессор при работе со ScrollTrigger. Пожалуй, именно этого правила сильнее всего не хватало автосгенерированному коду на сайтах-витринах.

Для реактивного веба авторы подготовили блоки gsap-react и gsap-frameworks. В React ассистенты теперь обязаны использовать хук useGSAP, правильно привязывать рефы через ссылки, изолировать область видимости с помощью gsap.context() и поддерживать серверный рендеринг (SSR). Во Vue и Svelte инструкции следят за жизненным циклом компонентов, изоляцией селекторов и гарантированной очисткой всех эффектов при размонтировании узлов.

Нас особенно подкупило напоминание в документации о лицензии. После того как платформу приобрела компания Webflow, абсолютно все плагины GSAP стали полностью бесплатными для любых коммерческих проектов. Расширения вроде SplitText или MorphSVG, за которые раньше требовалось платить членством в закрытом клубе Club GSAP, теперь ставятся напрямую из публичного npm-реестра без клубных аккаунтов, токенов авторизации и приватных репозиториев.

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

Ещё новости

Все новости →