К основному содержанию
скилл CX Codex

Animation Principles - Absolute Beginner — скилл для Claude Code

Объясняет 12 принципов анимации самыми простыми словами. Пригодится, если вы впервые берётесь за движение в интерфейсе или игре.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-code
npx skills add dylantarre/animation-principles --skill absolute-beginner -a claude-code
Открыть на GitHub

Что делает Animation Principles - Absolute Beginner

Скилл разбирает двенадцать приёмов, которые придумали аниматоры Disney: сжатие и растяжение, подготовка, акцент, ключевые позы, инерция, замедление на входе и выходе, дуги, вторичное движение, тайминг, преувеличение, объёмный рисунок и привлекательность. Каждый пункт подан одной-двумя фразами с бытовым примером — мяч, машина у светофора, волосы при остановке.

Это не справочник по API и не набор готового кода. Скилл нужен, чтобы поймать общий язык: вы описываете агенту, что должно происходить на экране, и он опирается на те же термины. Внутри — один файл SKILL.md, никаких скриптов и зависимостей.

Автор советует не брать все двенадцать принципов сразу, а начать с одного-двух. Для рабочего проекта это разумно: если анимация дёргается, причина обычно в тайминге или в отсутствии подготовки, и разбирать её проще по одному приёму.

Какие задачи решает

  • объяснить новичку, почему анимация выглядит дёрганой
  • договориться с агентом о терминах движения
  • выбрать, с какого принципа начать изучение
  • разобрать прыжок или удар по шагам
  • описать словами, что не так с движением в макете

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

  • Объясни принцип подготовки на примере кнопки, которая раскрывает меню
  • Почему моя анимация прыжка выглядит неестественно? Разбери по принципам
  • С чего начать, если я никогда не делал анимацию?

Как установить Animation Principles - Absolute Beginner

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-code
npx skills add dylantarre/animation-principles --skill absolute-beginner -a claude-code

2Вручную: положить файлы

~/.claude/skills/absolute-beginner/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/absolute-beginner/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора86

emotional-disconnect Разбирает, почему анимация в интерфейсе ощущается неправильно, и подбирает движение под нужную эмоцию. Пригодится, когда UI называют холодным или раздражающим. CX Codex +1 488установок state-changes Скилл для анимации элементов, которые меняются на месте: переключатели, аккордеоны, чекбоксы, состояния кнопок. Пригодится, когда интерфейсу нужны плавные переходы без входа и выхода. CX Codex +1 489установок Animation Principles - Deep Dive Скилл-справочник по 12 принципам анимации Диснея с техническими деталями: пропорции, тайминги, дуги, реализация в кадрах. Пригодится, когда агенту нужен контекст по анимации. CX Codex +1 487установок Animation Principles - Novice Скилл разбирает 12 принципов анимации и даёт конкретные упражнения, чтобы применить их в простых проектах. Пригодится, когда база уже есть, а практики не хватает. CX Codex +1 488установок technical-constraints Скилл для случаев, когда анимация упирается в поддержку браузеров, возможности платформы или технические требования. Помогает сохранить замысел, не ломая сборку. CX Codex +1 487установок comfort-safety Скилл для ИИ-кодинга, который задаёт правила анимаций в интерфейсах, где пользователю важно чувствовать себя в безопасности. CX Codex +1 486установок problem-diagnosis Помогает найти, какой принцип анимации нарушен, когда движение выглядит неправильно, но непонятно почему. CX Codex +1 487установок universal-industry Скилл с базовыми настройками анимации по 12 принципам Disney: тайминги, easing и правила для интерфейсов, когда отраслевых гайдлайнов нет. CX Codex +1 485установок

Похожие

animation-principles Owl-Listener Скилл для настройки одной конкретной анимации в интерфейсе: подбирает easing, длительность и порядок движения элементов. CX Codex +1 2 200установок 12-principles-of-animation raphael-salaja Находит ошибки в веб-анимациях по двенадцати принципам движения. Выводит список замечаний с номерами строк и сводную таблицу нарушений. CX Codex +1 2 200установок logo-animation iart-ai Скилл для ИИ-кодинга, который собирает анимацию логотипа: интро, сплэш, лоадер, отрисовку SVG-знака. Работает в вебе, видео и мобильных приложениях. CX Codex +1 2 800установок ui-animation mblode Скилл проектирует, проверяет и разбирает анимацию интерфейсов: пружины, жесты, прокрутку и переходы. Пригодится при работе с движением и звуками UI. CX Codex +1 10 400установок isometric-animation iart-ai Скилл для изометрических и 2.5D-анимаций: стопки слоёв, выдавленные блоки, взрывные схемы и лёгкий дрейф камеры. Собирается в один HTML-файл без сборки. CX Codex +1 1 400установок editorial-burgundy-principles-template nexu-io Создаёт трёхслайдовую презентацию в бордовой и розовой гамме для манифестов, принципов и культурных нарративов. Готовая HTML-страница с навигацией и сеткой карточек. CX Codex +1 2 700установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о Animation Principles - Absolute Beginner

Как установить Animation Principles - Absolute Beginner в Claude?

Выполните npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-code. После этого файл скилла окажется по пути ~/.claude/skills/absolute-beginner/SKILL.md.

Что делает этот скилл?

Разбирает 12 принципов анимации простыми словами, с примерами из жизни. Агент опирается на них, когда вы обсуждаете движение в интерфейсе или игре.

Нужно ли знать что-то заранее?

Нет, скилл рассчитан на полного новичка. Автор советует начать с одного-двух принципов, а не разбирать все сразу.

Исходный текст

SKILL.md · MIT
---
name: Animation Principles - Absolute Beginner
description: Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation
---

# Your First Look at Animation Magic

Animation makes drawings move in ways that feel real and fun. Disney animators discovered 12 tricks that make animation look great. Here they are in simple words:

## 1. Squash and Stretch
Things squish when they hit something and stretch when they move fast. Drop a ball - it flattens on the ground, then bounces back round.

## 2. Anticipation
Before a big move, there's a small move the other way. Before jumping up, you crouch down first.

## 3. Staging
Put important things where people will see them. Like putting the main actor in a spotlight on stage.

## 4. Straight Ahead and Pose to Pose
Two ways to draw: either draw every picture in order, or draw the important pictures first and fill in between.

## 5. Follow Through and Overlapping Action
When you stop, your hair keeps moving. Different parts move at different times, not all at once.

## 6. Slow In and Slow Out
Things speed up when starting and slow down when stopping. Like a car at a traffic light.

## 7. Arc
Most things move in curves, not straight lines. Throw a ball - it makes a rainbow shape in the air.

## 8. Secondary Action
Little movements that happen along with the main movement. Walking while whistling and swinging your arms.

## 9. Timing
How fast or slow something happens changes how it feels. Fast = exciting. Slow = calm or heavy.

## 10. Exaggeration
Make things bigger and more dramatic than real life. Cartoon characters can stretch their eyes wide when surprised.

## 11. Solid Drawing
Make flat pictures look like they have weight and depth. Things should feel like you could pick them up.

## 12. Appeal
Make characters interesting to watch. They should have something special that makes you want to keep looking.

## Remember
You don't need to use all 12 at once. Start with one or two. The more you practice, the more natural they become.

© dylantarre · MIT · dylantarre/animation-principles

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой