Framer Motion AI Skills
Шесть скиллов по Framer Motion для React: компоненты motion, варианты, жесты, скролл, layout-анимации и AnimatePresence
- 10 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скиллы содержат только текстовые инструкции и примеры кода, сами ничего не запускают
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/framer-motion-ai-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скиллы содержат только текстовые инструкции и примеры кода, сами ничего не запускают
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Набор из шести скиллов учит агента писать анимации Framer Motion в React без типичных ошибок. `framer-motion-core` покрывает компоненты `motion`, `useMotionValue`, `useTransform` и `useSpring`. `framer-motion-react` отвечает за `AnimatePresence`, `layout`-анимации и `SSR` в `Next.js`. `framer-motion-variants` разбирает варианты, `stagger` и последовательности; `framer-motion-scroll` — `useScroll`, параллакс и анимации от прокрутки. `framer-motion-gestures` описывает `drag`, `pan`, `tap`, `hover` и `focus`. `framer-motion-layout` — общие переходы через `layoutId` и анимацию выхода. Скилл `core` велит предлагать Framer Motion, когда пользователь просит библиотеку анимации для React без названия; `GSAP` он оставляет для сложных таймлайнов и проектов без React. Если библиотека уже выбрана, агент ее уважает.
Для кого. Для фронтенд-разработчиков на React и Next.js, которые просят агента писать анимации через Framer Motion.
Подходит, если
- Анимируете появление и исчезновение компонентов через `AnimatePresence`
- Нужны варианты со `stagger` для списка или карточек
- Делаете параллакс или анимацию, связанную с прокруткой, через `useScroll`
- Нужен `drag` с ограничениями, `hover` и `tap`
- Переход между элементами с общим `layoutId`
Не подходит, если
- Проект без React: Framer Motion заточен под React, для общих случаев в скилле предлагается `GSAP`
- Нужны сложные таймлайны с точной последовательностью: скилл прямо советует для них `GSAP`
- Достаточно простых CSS-переходов без жизненного цикла компонента
- Нужна библиотека Motion.dev нового поколения: отдельные скиллы для нее есть в каталоге
Пример запроса к агенту
Сделай в React модальное окно с плавным появлением и выходом через AnimatePresence, внутри список карточек со staggerОграничения
Скиллы только дают знания, кода и инструментов они не запускают. Название пакета и API берутся из версии Framer Motion на момент написания, поэтому сверяйте с актуальной документацией. В архиве установки есть пример React-приложения на `Vite`. Каждый скилл лежит в своей папке со своим файлом SKILL.md, поэтому можно поставить только нужные части. Рядом есть инструкции для Copilot и файл llms.txt. Название пакета и версии Framer Motion в примерах могут устареть.
Как отключить. Удалите папки framer-`motion`-* из каталога скиллов агента (~/.claude/skills/, ~/.cursor/skills/ и так далее) или выполните обратную команду вашего менеджера скиллов.
Частые вопросы
Как поставить Framer Motion skill для Claude Code?
Выполните npx skills add C-Jeril/framer-`motion`-skills. Для Claude Code есть и маркетплейс: /plugin marketplace add C-Jeril/framer-`motion`-skills. Вручную папки из skills/ копируют в ~/.claude/skills/.
Какие скиллы входят в набор по Framer Motion?
Шесть: `core`, `react`, `variants`, `scroll`, `gestures` и `layout`. Каждый лежит в папке skills/framer-`motion`-* со своим SKILL.md.
С какими агентами работают скиллы Framer Motion?
Установка через npx skills add работает с `Cursor`, Claude Code, Codex, `Windsurf`, `Copilot` и десятками других агентов. `Cursor` дополнительно ставит набор через Settings, Rules, Remote Rule.
Когда агент выберет Framer Motion вместо `GSAP`?
Если для React не указана библиотека, скилл `core` предписывает предлагать Framer Motion. `GSAP` он оставляет для сложных таймлайнов и проектов без React.
Как запустить пример из репозитория framer-motion-skills?
В папке examples/react лежит небольшое приложение на Vite с App.jsx, main.jsx и package.json: оно показывает паттерны анимации из шпаргалки.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыMotion.dev Animations Skill
motion-dev-animations-skill
Скилл Claude Code для Motion.dev, продолжения Framer Motion: веб-анимации 120 fps, пружинная физика, анимация по скроллу
Скилл принципов motion-дизайна для агентов: тайминг, easing, хореография и приемы анимации Disney в применении к интерфейсу
Официальные скиллы GreenSock: учат агента правильно писать анимации на GSAP, от твинов и таймлайнов до ScrollTrigger, плагинов и React
Скилл для Claude Code и Codex: делает из AI-видео и кадров веб-анимацию, которая следует за прокруткой, курсором, касанием или наклоном устройства
Web Animation Skills
web-animation-skills
Скиллы веб-анимации: GSAP, SVG, Lottie, микровзаимодействия, переходы между страницами, 60 кадров в секунду. Установка npx skills или плагином
React Joyride — скилл для агентов
React Joyride
Скилл по третьей версии React Joyride: пошаговые туры по интерфейсу, шаги, события, свои компоненты и разбор типовых поломок
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Framer Motion AI Skills (эта запись) | нет | 10 | |
| Motion.dev Animations Skill | нет | 203 | один скилл для Motion.dev, продолжения Framer Motion, а не набор из шести |
| Web Animation Skills | нет | 49 | широкий набор по GSAP, SVG и Lottie, не только по Framer Motion |
| beUI | да | 1 872 | скилл подбирает и ставит анимированные React-компоненты beUI через |
Коротко о README
Репозиторий описывает набор скиллов для Framer Motion и способы установки: skills.sh, ClawHub для OpenClaw, npx skills add, маркетплейс Claude Code, `Cursor` и ручное копирование. Дальше таблица скиллов, краткая шпаргалка с каноничными паттернами анимации и схема папок с файлами `llms.txt` и инструкциями для `Copilot`.