animation-principles · owl-listener — скилл для Claude Code: анимации в UI
Скилл для настройки одной конкретной анимации в интерфейсе: подбирает easing, длительность и порядок движения элементов.
npx skills add Owl-Listener/designer-skills --skill animation-principles -a claude-codeЧто делает animation-principles
Скилл помогает довести до ума одну анимацию, а не всю систему движения. Он разбирает её по принципам: easing для входа, выхода и перемещения, длительность по масштабу изменения, очерёдность связанных элементов. Для входа подходит ease-out, для выхода ease-in, линейный — только для прогресс-баров. Длительности разложены по диапазонам: 50–100 мс для состояний кнопок и переключателей, 150–250 мс для тултипов и мелких сдвигов, 250–400 мс для модалок и переходов между страницами, 400–700 мс для сложной хореографии.
Отдельно скилл задаёт ритм появления группы элементов: задержка 30–50 мс между соседними, первым идёт самый важный, вся последовательность укладывается в 700 мс. Направление движения у связанных элементов должно совпадать. Анимацию стоит делать прерываемой — её могут отменить на полпути.
Скилл советует поддержать prefers-reduced-motion и проверить результат на слабом устройстве. Для производительности предлагает will-change или transform. Если вы настраиваете общие токены длительности и easing для всего продукта, это уже задача скилла motion-system из design-systems, а полная спецификация взаимодействия — у micro-interaction-spec. Ставить этот скилл имеет смысл, когда конкретный переход дёргается или кажется вялым.
Какие задачи решает
- подобрать easing для появления и исчезновения элемента
- уложить длительность перехода в разумный диапазон
- выстроить очерёдность появления списка карточек
- сделать анимацию прерываемой на полпути
- поддержать
prefers-reduced-motionв переходе
Примеры запросов агенту
- настрой анимацию появления модалки: easing, длительность, порядок элементов
- этот переход между страницами кажется вялым — разбери его по принципам анимации
- сделай появление списка карточек со stagger и проверь
prefers-reduced-motion
Как установить animation-principles
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill animation-principles -a claude-code2Вручную: положить файлы
~/.claude/skills/animation-principles/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/animation-principles/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill animation-principles -a codex2Вручную: положить файлы
.agents/skills/animation-principles/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill animation-principles -a cursor2Вручную: положить файлы
.cursor/skills/animation-principles/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills animation-principles2Вручную: положить файлы
.github/skills/animation-principles/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill animation-principles -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/animation-principlesВручную: положить файлы
.devin/skills/animation-principles/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill animation-principles -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о animation-principles
Как установить animation-principles в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill animation-principles -a claude-code. Скилл появится в ~/.claude/skills/animation-principles/SKILL.md.
Что делает animation-principles?
Применяет принципы анимации — easing, длительность, staging, follow-through — к одной конкретной анимации в интерфейсе. Помогает, когда нужно настроить, как движение ощущается.
Чем animation-principles отличается от motion-system?
animation-principles работает с одной анимацией. Для общих токенов длительности и easing по всему продукту нужен motion-system из design-systems, а для полной спецификации взаимодействия — micro-interaction-spec.
Исходный текст
SKILL.md · MIT
--- name: animation-principles description: Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`. --- # Animation Principles You are an expert in applying motion design principles to create purposeful UI animations. ## What You Do You apply animation principles to make interfaces feel natural, guide attention, and communicate state changes. ## Core UI Animation Principles ### Easing - Ease-out: decelerating (entering elements) - Ease-in: accelerating (exiting elements) - Ease-in-out: both (moving between positions) - Linear: only for continuous animations (progress bars) ### Duration - Micro (50-100ms): button states, toggles - Short (150-250ms): tooltips, fades, small movements - Medium (250-400ms): page transitions, modals - Long (400-700ms): complex choreography ### Motion Principles - **Purposeful**: every animation communicates something - **Quick**: faster is almost always better in UI - **Natural**: follow physics (acceleration, deceleration) - **Choreographed**: related elements move in coordinated sequence - **Interruptible**: animations can be cancelled mid-flight ## Animation Types - **Entrance**: fade in, slide in, scale up - **Exit**: fade out, slide out, scale down - **Emphasis**: pulse, shake, bounce - **Transition**: morph, crossfade, shared element - **Loading**: skeleton shimmer, spinner, progress ## Stagger and Sequence - Stagger related items by 30-50ms each - Lead with the most important element - Limit total sequence duration to under 700ms - Use consistent direction for related movements ## Best Practices - Support prefers-reduced-motion - Don't animate for the sake of it - Test on low-powered devices - Keep animations under 400ms for responsive feel - Use will-change or transform for performance
© Owl-Listener · MIT · Owl-Listener/designer-skills
Похожие скиллы
Всё по теме «Дизайн» →Сначала — animation-principles от других авторов.
