Motion Design Skill
Скилл принципов motion-дизайна для агентов: тайминг, easing, хореография и приемы анимации Disney в применении к интерфейсу
- 2 980 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл состоит только из инструкций и справочных таблиц
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/motion-design-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит только из инструкций и справочных таблиц
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл дает агенту рамку решений по анимации интерфейса, не привязанную к конкретной технологии. Перед написанием кода агент проходит контрольный список из восьми шагов: определяет эмоциональную цель, выбирает характер движения, основное свойство, длительность и семейство easing. В комплекте таблицы длительностей и кривых, руководство по выбору свойств, готовые рецепты для входа и выхода, обратной связи по состоянию, фоновой анимации и хореографии нескольких элементов. Отдельные файлы разбирают три опоры движения, двенадцать принципов Disney в приложении к UI и адаптацию под платформу, доступность и производительность. Скилл работает с CSS, Framer Motion, GSAP, Lottie, Spring и другими системами анимации.
Для кого. Для фронтенд-разработчиков и дизайнеров интерфейсов, которым нужны обоснованные решения по анимации, а не случайные значения.
Подходит, если
- Нужно добавить анимации входа, обратной связи или переходов между состояниями
- Нужно выбрать длительность и кривую easing под характер интерфейса
- Нужно собрать согласованную хореографию появления нескольких элементов
Не подходит, если
- Нужна готовая библиотека анимаций, а не принципы и рекомендации
- Задача не связана с движением в интерфейсе
Пример запроса к агенту
Добавь этим карточкам аккуратную анимацию появления и подбери длительность и easing под спокойный премиальный тонОграничения
Скилл дает принципы и справочные таблицы, а не готовый код под ваш стек. Итоговую анимацию пишет агент, качество зависит от выбранной библиотеки и проекта. Материал на английском.
Как отключить. Удалите скилл через менеджер skills.sh или уберите папку motion-design из каталога скиллов агента.
Частые вопросы
С какими библиотеками анимации это работает?
Скилл не привязан к технологии. Принципы применимы к CSS, Framer Motion, GSAP, Lottie, Spring и другим системам.
Это набор готовых анимаций?
Нет. Это принципы, контрольные списки и справочные таблицы, по которым агент выбирает параметры и пишет анимацию сам.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыDesign Motion Principles
design-motion-principles
Скилл про плавность и анимацию интерфейсов: собирает интерактивные компоненты с осмысленным движением и проверяет существующие. По работам Эмиля Ковальски
Motion2Code содержит скилл веб-анимации: агент сверяет результат с кадрами ролика и показывает обе версии рядом.
Скиллы Эмиля Ковальски для дизайнеров и инженеров
Skills For Designers and Engineers
Скиллы по анимации и деталям интерфейса от Эмиля Ковальски: кривые, длительности, ревью анимаций, выбор UI-библиотек
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл оживляет любой рисунок кодом: персонажей, воду, дым, значки и целые сцены в React Native и SwiftUI без ощущения слайд-шоу
Скилл для Claude Code и Codex: делает из AI-видео и кадров веб-анимацию, которая следует за прокруткой, курсором, касанием или наклоном устройства
Коротко о README
README описывает скилл как набор принципов motion-дизайна для агентов, независимый от технологии. В основе файл SKILL.md с контрольным списком из восьми шагов, архетипами характера движения, таблицами длительностей и easing и руководством по выбору свойств. Папка director разбирает философию, принципы Disney и хореографию, папка patterns содержит рецепты для входа, обратной связи и фоновой анимации, папка reference собирает справочные таблицы и решение частых проблем. Установка выполняется одной командой через менеджер skills.sh, поддерживаются Claude Code, Cursor, Codex, GitHub Copilot и другие агенты. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: motion-design description: > Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. license: MIT metadata: author: LottieFiles version: "1.0.0" --- # Motion Design Skill ## When to Apply Use this skill when: - Creating UI animations (buttons, cards, modals, page transitions) - Designing micro-interactions and feedback animations - Building loading, success, or error states - Animating illustrations or decorative elements - Planning scroll-triggered or progress-based animations - Establishing brand motion identity - Choreographing multi-element sequences **Decision tree:** 1. Does it serve a functional purpose (feedback, guidance)? -> Timing rules for responsiveness 2. Does it express brand personality? -> Motion Personality archetypes 3. Does it tell a story or guide attention? -> Disney principles + choreography 4. Is this a complex multi-element scene? -> 1/3 Rule + stagger patterns ## Quick Reference: 8-Step Checklist Before creating any animation: 1. Emotional target? - joy, calm, urgency, elegance 2. Motion Personality? - Playful, Premium, Corporate, Energetic 3. Primary property? - position, scale, rotation, opacity 4. Duration? - see duration table below 5. Easing family? - entrance=decelerate, exit=accelerate 6. Hero element? - apply staging principles 7. Secondary + ambient layers? - add richness 8. 1/3 rules? - motion distance, simultaneous elements