motion · motiondivision — скилл для Claude Code: анимации и установка
Скилл помогает писать анимации на Motion и CSS, искать примеры и разбирать проблемы с производительностью. Пригодится при создании UI и обновлении Motion.
npx skills add motiondivision/ai-kit --skill motion -a claude-codeЧто делает motion
Скилл подсказывает, как анимировать интерфейс на Motion или обычном CSS, и учитывает особенности vanilla JS, React, Vue, Base UI и Radix. Он также ищет документацию и примеры, генерирует CSS-пружины с отскоком и открывает редактор кривых перехода.
Для проверки производительности предусмотрены аудит кода и runtime-аудит с MotionScore и Performance Doctor. Эти функции требуют Motion+; для поиска, генерации easing и редактора переходов нужен Motion MCP-сервер. Базовые рекомендации по анимации доступны без сервера. При переходе с Framer Motion скилл сначала проверяет установленную версию и ведёт по руководству миграции; одновременно устанавливать framer-motion и motion нельзя.
Какие задачи решает
- анимировать компонент на Motion или CSS
- найти пример для карусели или модального окна
- сгенерировать CSS-пружину с отскоком
- проверить код анимации на рывки
- перейти с Framer Motion на Motion
Примеры запросов агенту
- Анимируй появление этой панели на React.
- Сгенерируй CSS-пружину с заметным отскоком.
- Проверь
src/Modal.tsxна проблемы с производительностью анимации.
Как установить motion
1Через Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a claude-code2Вручную: положить файлы
~/.claude/skills/motion/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/motion/
1Через Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a codex2Вручную: положить файлы
.agents/skills/motion/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a cursor2Вручную: положить файлы
.cursor/skills/motion/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install motiondivision/ai-kit motion2Вручную: положить файлы
.github/skills/motion/SKILL.md1Через Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a gemini-cli2Командой платформы
gemini skills install https://github.com/motiondivision/ai-kit --path plugins/motion/skills/motionВручную: положить файлы
.devin/skills/motion/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о motion
Как установить motion в Claude Code?
Выполните npx skills add motiondivision/ai-kit --skill motion -a claude-code. Файл скилла появится по пути ~/.claude/skills/motion/SKILL.md.
Что делает motion?
Он помогает создавать анимации на Motion и CSS, искать документацию и примеры, а также генерировать CSS-пружины. Аудит производительности доступен через Motion+.
Нужен ли MCP-сервер для работы motion?
Базовые рекомендации по анимации работают без сервера. Поиск, генерация easing и редактор переходов требуют Motion MCP-сервера; аудиты MotionScore относятся к Motion+.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — motion от других авторов.
