Motion Design Skill

Установка

npx skillfoxx add skills/motion-design-skill

npx skills add lottiefiles/motion-design-skill --skill motion-design -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .claude/skills
cp -R "$tmp/skills/motion-design" .claude/skills/motion-design

npx skills add lottiefiles/motion-design-skill --skill motion-design -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-design

npx skills add lottiefiles/motion-design-skill --skill motion-design -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .github/skills
cp -R "$tmp/skills/motion-design" .github/skills/motion-design

npx skills add lottiefiles/motion-design-skill --skill motion-design -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-design

npx skills add lottiefiles/motion-design-skill --skill motion-design -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .devin/skills
cp -R "$tmp/skills/motion-design" .devin/skills/motion-design

npx skills add lottiefiles/motion-design-skill --skill motion-design -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .cline/skills
cp -R "$tmp/skills/motion-design" .cline/skills/motion-design

npx skills add lottiefiles/motion-design-skill --skill motion-design -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .roo/skills
cp -R "$tmp/skills/motion-design" .roo/skills/motion-design

npx skills add lottiefiles/motion-design-skill --skill motion-design -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-design

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/lottiefiles/motion-design-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/motion-design/
git -C "$tmp" checkout f9a8a041b85185ee4881b3471d3415e939aac772
mkdir -p .agents/skills
cp -R "$tmp/skills/motion-design" .agents/skills/motion-design

npx skills add LottieFiles/motion-design-skill

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл дает агенту рамку решений по анимации интерфейса, не привязанную к конкретной технологии. Перед написанием кода агент проходит контрольный список из восьми шагов: определяет эмоциональную цель, выбирает характер движения, основное свойство, длительность и семейство easing. В комплекте таблицы длительностей и кривых, руководство по выбору свойств, готовые рецепты для входа и выхода, обратной связи по состоянию, фоновой анимации и хореографии нескольких элементов. Отдельные файлы разбирают три опоры движения, двенадцать принципов Disney в приложении к UI и адаптацию под платформу, доступность и производительность. Скилл работает с CSS, Framer Motion, GSAP, Lottie, Spring и другими системами анимации.

Для кого. Для фронтенд-разработчиков и дизайнеров интерфейсов, которым нужны обоснованные решения по анимации, а не случайные значения.

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

Добавь этим карточкам аккуратную анимацию появления и подбери длительность и easing под спокойный премиальный тон

Ограничения

Скилл дает принципы и справочные таблицы, а не готовый код под ваш стек. Итоговую анимацию пишет агент, качество зависит от выбранной библиотеки и проекта. Материал на английском.

Как отключить. Удалите скилл через менеджер skills.sh или уберите папку motion-design из каталога скиллов агента.

Проверка безопасности

• Скилл состоит только из инструкций и справочных таблиц

Коротко о README

README описывает скилл как набор принципов motion-дизайна для агентов, независимый от технологии. В основе файл SKILL.md с контрольным списком из восьми шагов, архетипами характера движения, таблицами длительностей и easing и руководством по выбору свойств. Папка director разбирает философию, принципы Disney и хореографию, папка patterns содержит рецепты для входа, обратной связи и фоновой анимации, папка reference собирает справочные таблицы и решение частых проблем. Установка выполняется одной командой через менеджер skills.sh, поддерживаются Claude Code, Cursor, Codex, GitHub Copilot и другие агенты. Лицензия MIT.

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

Похожие