скилл CX Codex

animate · delphi-ai — скилл для Claude Code: что делает и как установить

Q: Как установить animate в Claude Code?

Выполните в терминале команду `npx skills add delphi-ai/animate-skill --skill animate -a claude-code`.

Q: Какие зависимости нужны для работы примеров?

Для сложных компонентов требуется выполнить установку `pnpm add framer-motion react-use-measure usehooks-ts`. Простые эффекты работают на стандартном CSS.

Справочник правил и готовых сниппетов для создания анимаций в React и Next.js. Помогает настроить переходы и диалоговые окна с учётом производительности.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add delphi-ai/animate-skill --skill animate -a claude-code
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a claude-code

Открыть на GitHub

Что делает animate

Скилл добавляет в контекст агента шаблоны плавных переходов для веб-интерфейсов. Внутри собраны рекомендации по таймингам и свойствам CSS-переходов. Подсказки опираются на материалы курса Эмиля Ковальски по веб-анимациям.

Набор учит модель изменять только свойства transform и opacity, чтобы не перегружать рендеринг в браузере. Для интерактивных компонентов агент выбирает пружины вместо линейных функций. При сборке сложных сценариев со сменой вкладок или аккордеонами в проект нужно установить внешние пакеты framer-motion, react-use-measure и usehooks-ts.

Какие задачи решает

подобрать кривые плавности и тайминги для интерфейса
настроить появление и скрытие модального окна через AnimatePresence
добавить индикатор активной вкладки со сменой положения через layoutId
учесть системные настройки доступности prefers-reduced-motion

Примеры запросов агенту

Сделай появление карточек в списке с небольшой задержкой для каждого элемента через Framer Motion.
Добавь анимацию нажатия кнопки и подъёма карточки при наведении через CSS-переходы.
Напиши компонент диалога с правильной скоростью закрытия и масштабированием.

Как установить animate

1Через Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill animate -a claude-code

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a claude-code

2Вручную: положить файлы

~/.claude/skills/delphi-ai-animate/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/delphi-ai-animate/

1Через Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a codex

2Вручную: положить файлы

.agents/skills/delphi-ai-animate/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a cursor

2Вручную: положить файлы

.cursor/skills/delphi-ai-animate/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install delphi-ai/animate-skill delphi-ai-animate

2Вручную: положить файлы

.github/skills/delphi-ai-animate/SKILL.md

1Через Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a gemini-cli

2Командой платформы

gemini skills install https://github.com/delphi-ai/animate-skill

Вручную: положить файлы

.devin/skills/delphi-ai-animate/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о animate

Как установить animate в Claude Code?

Выполните в терминале команду npx skills add delphi-ai/animate-skill --skill animate -a claude-code.

Для каких библиотек предназначен этот скилл?

Скилл ориентирован на веб-проекты на React и Next.js, использующие нативный CSS и Framer Motion.

Какие зависимости нужны для работы примеров?

Для сложных компонентов требуется выполнить установку pnpm add framer-motion react-use-measure usehooks-ts. Простые эффекты работают на стандартном CSS.

Похожие скиллы

Всё по теме «Фронтенд и UI» →

Сначала — animate от других авторов.

animate emilkowalski Создаёт анимации интерфейса с нуля по принципам Эмиля Ковальски. Пригодится при верстке переходов или оживлении компонентов. CX Codex +1 172 700установок animate aladicf Добавляет в интерфейс движение: переходы, микроинтеракции, жесты и состояния наведения. Пригодится, когда UI кажется мёртвым или дёргается при частом использовании. CX Codex +1 607установок mastering-animate-presence raphael-salaja Проверяет код Motion и Framer Motion на ошибки в AnimatePresence и exit-анимациях. Пригодится при ревью модалок и списков. CX Codex +1 322установок framer-motion-animator patricio0312rev Скилл помогает создавать анимации и микроинтерфейсы на Framer Motion: от переходов между страницами до жестов свайпа и скролла. Пригодится при вёрстке интерактивных React-компонентов. CX Codex +1 11 100установок animation-performance emilkowalski Диагностический скилл, который ищет причину пропущенных кадров в веб-анимациях и подсказывает, какой свойство анимировать вместо дорогого. CX Codex +1 36 800установок page-transition-animation iart-ai Скилл для анимации переходов между страницами в Next.js App Router и починки неработающего exit в Framer Motion AnimatePresence. CX Codex +1 2 300установок motion-dev-animations Motion Dev Standards Генерирует GPU-анимации на Motion.dev для React, Next.js, Svelte и Astro. Помогает настроить физику пружин, скролл-эффекты и жесты с учётом prefers-reduced-motion. CX Codex +1 594установок micro-interaction iart-ai Скилл для мелкой анимации интерфейса: ховеры, тоглы, тосты, шторки, перестановка списков. Пригодится, когда UI нужно оживить, а не украсить. CX Codex +1 2 500установок