Как повторить
- Поставьте Bun, среду для запуска скриптов навыка. Автор тестировал навык на macOS и Linux, на Windows не проверял.
curl -fsSL https://bun.sh/install | bash- Добавьте навык в Claude Code через общий реестр навыков для агентов:
npx skills add NiazMorshed2007/reanimate -gФлаг -a claude-code убирает вопрос о выборе агента.
- Опишите задачу в Claude Code своими словами или явной командой:
/reanimate hero-секцию на <url>, в src/components/Hero.tsx. Hero-секция здесь означает первый экран сайта. Команда надёжнее: агент точно поймёт, что нужно подключить навык, а не писать анимацию по памяти. При первом запуске скачаются браузер Chromium для Playwright (программы, которая управляет браузером) и ffmpeg (программа для работы с видео). - Агент выберет уровень точности и запишет план в
.reanimate/<name>/spec.md. Уровень можно задать и самому, назвав его в просьбе, например «clone this animation». По умолчанию агент добивается совпадения движения и тайминга. Точное совпадение пикселей, цветов и шрифтов даёт отдельный, более тяжёлый режим pixel-faithful. - Дальше агент записывает оригинал, пишет код, снимает копию и сравнивает их. По документации на это уходит 2–5 раундов.
- В конце агент выдаёт отчёт: таблицу расхождений по таймингу и пикселям для каждого элемента и путь к листам со сравнением кадров.
Как проверить результат
Для первого раза возьмите простую CSS-анимацию, например эффект при наведении на одну кнопку, и попросите скопировать её с уровнем «clone this animation». В отчёте расхождение по таймингу должно быть в пределах ±80 мс, а в папке .reanimate/ должны лежать файлы сравнения, которые можно открыть. Если агент выдал код без записей и без папки .reanimate/, навык не подключился и агент писал анимацию по памяти.
Как это устроено
Reanimate написал независимый автор, к Anthropic он отношения не имеет. Playwright запускает браузер без окна и снимает оригинал и копию в одинаковых условиях: тот же размер экрана, запуск анимации, длительность и частота кадров. Так сравнение показывает только разницу в коде.
Тайминги и easing (кривую ускорения) CSS-анимаций скрипт берёт прямо из браузера и сохраняет в inspect.json. Canvas и WebGL записываются с виртуальными часами: время в браузере идёт под управлением скрипта, поэтому случайные частицы каждый раз рисуются одинаково. compare.ts считает расхождение кадров в процентах, easing.ts вычисляет кривую. После каждого раунда агент вносит самую маленькую правку из тех, на которые указали цифры. Всего раундов не больше пяти.
Ссылки
- Reanimate на GitHub: репозиторий навыка с README и SKILL.md, бесплатно (MIT), 986 звёзд на 2026-11-03.
- skills на npm: программа для установки навыков в агентов, через неё работает
npx skills add, бесплатно (MIT).
Источник: NiazMorshed2007, GitHub (репост в Telegram-канале @aiaiai).