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

Animation Principles - Teaching Others — скилл для Claude Code

Помогает объяснить 12 принципов анимации ученикам, менти и коллегам разного уровня: что показать первым и на чём обычно спотыкаются.

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

Что делает Animation Principles - Teaching Others

Скилл разбирает каждый из 12 принципов анимации по одной схеме: что показать в первую очередь, где ученики путаются и какой фразой объяснить суть. Для squash and stretch это упражнение с прыгающим мячом и демонстрация на пластилине, для anticipation — видео реальных спортсменов, для staging — проверка силуэтом.

Внутри есть отдельная последовательность обучения. Начинать советует с timing и squash/stretch на мяче, затем добавлять arcs и slow in/out, а staging и appeal оставить на потом — они требуют насмотренности. Это не генератор уроков, а методичка для разговора: скилл подсказывает формулировки и типичные ошибки, а не рисует за вас.

Полезен, когда вы ментор или тимлид и объясняете одно и то же разным людям. Ключевые фразы вроде «объём остаётся, форма меняется» даны готовыми — их можно брать в разговор как есть.

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

  • объяснить squash and stretch ученику, который сохраняет форму вместо объёма
  • показать разницу между straight ahead и pose to pose на одном действии
  • подобрать пример для follow through, чтобы движение не обрывалось на одном кадре
  • выстроить порядок изучения принципов от простого к сложному
  • объяснить, почему appeal нужен даже отрицательному персонажу

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

  • Помоги объяснить ученику принцип anticipation — что показать сначала и на чём он обычно путается
  • Составь план занятия по 12 принципам анимации для новичков, начиная с timing и squash and stretch
  • Мой менти делает движение по прямым линиям. Как объяснить ему принцип arcs?

Как установить Animation Principles - Teaching Others

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill animation-principles---teaching-others -a claude-code
npx skills add dylantarre/animation-principles --skill teaching-others -a claude-code

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

~/.claude/skills/teaching-others/SKILL.md

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

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

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

brand-strategist Помогает описать характер бренда через движение: тайминги, кривые, степень растяжения. Пригодится, когда анимация в продукте должна звучать так же, как логотип и голос бренда. CX Codex +1 503установок exit-animations Скилл подсказывает агенту, как анимировать исчезновение элементов: закрытие модалок, скрытие уведомлений, удаление строк списка. CX Codex +1 500установок Animation Principles - Expert Скилл для тех, кто уже освоил базовые принципы анимации и хочет нарушать их намеренно: анти-сквош, пропущенное anticipation, сломанные дуги. CX Codex +1 499установок timing-calibration Скилл разбирает жалобы «слишком быстро» и «слишком медленно» и подбирает длительности и easing по типу действия. CX Codex +1 497установок user-feedback-clarity Скилл для ИИ-агента, который разбирает, почему пользователи не замечают отклик интерфейса, и подсказывает, как это исправить. CX Codex +1 496установок power-confidence Скилл задаёт правила анимаций, которые читаются как сила и власть: тяжёлое движение, резкая остановка, минимум отскока. Пригодится на hero-секциях и витринах премиум-продуктов. CX Codex +1 495установок universal-patterns Задаёт базовые длительности, кривые изинга и 12 принципов анимации для любого движения в интерфейсе. Пригодится, когда агент пишет CSS-переходы и не угадывает с таймингом. CX Codex +1 493установок secondary-action-mastery Скилл учит добавлять вторичное движение так, чтобы оно поддерживало главное действие, а не спорило с ним. Пригодится в UI-анимации и игровом филе. CX Codex +1 494установок

Похожие

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

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

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

Вопросы о Animation Principles - Teaching Others

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

Выполните npx skills add dylantarre/animation-principles --skill animation-principles---teaching-others -a claude-code. Скилл окажется в ~/.claude/skills/teaching-others/SKILL.md.

Что делает Animation Principles - Teaching Others?

Разбирает 12 принципов анимации с точки зрения преподавания: что показать первым, какая ошибка встречается чаще всего и какой фразой объяснить принцип.

С чего скилл советует начинать обучение?

С timing и squash/stretch на упражнении с мячом. Потом добавляются arcs и slow in/out, а staging и appeal идут позже.

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

SKILL.md · MIT
---
name: Animation Principles - Teaching Others
description: Use when someone needs to explain animation principles to students, mentees, or team members at various skill levels
---

# Teaching the 12 Principles Effectively

Teaching animation principles requires meeting students where they are. Here's how to communicate each principle at different levels.

## Teaching Strategies by Principle

### 1. Squash and Stretch
**Show first:** Bouncing ball exercise - universal, immediate, undeniable.
**Common confusion:** Students preserve shape instead of volume. Use clay demonstration.
**Key phrase:** "Volume stays the same, shape changes."

### 2. Anticipation
**Show first:** Video of real athletes - every jump has a crouch.
**Common confusion:** Making anticipation too large or too long.
**Key phrase:** "The audience needs a heads-up."

### 3. Staging
**Show first:** Silhouette test. If they can't read it as a shadow, it fails.
**Common confusion:** Cluttering with detail before establishing clarity.
**Key phrase:** "What's the ONE thing this frame says?"

### 4. Straight Ahead / Pose to Pose
**Show first:** Same action animated both ways - compare results.
**Common confusion:** Thinking one method is "correct."
**Key phrase:** "Pose to pose for control, straight ahead for discovery."

### 5. Follow Through / Overlapping
**Show first:** Slow-motion hair, fabric, tails. Nature demonstrates constantly.
**Common confusion:** Everything stopping at the same frame.
**Key phrase:** "Nothing stops at once. What's attached keeps going."

### 6. Slow In / Slow Out
**Show first:** Push a heavy box versus a light one. Spacing changes.
**Common confusion:** Even spacing (tweening syndrome).
**Key phrase:** "More drawings where it slows, fewer where it's fast."

### 7. Arcs
**Show first:** Trace hand during natural gesture - it curves.
**Common confusion:** Mechanical point-to-point movement.
**Key phrase:** "Almost everything curves. Straight lines are exceptions."

### 8. Secondary Action
**Show first:** Walking while talking on phone - multiple layers.
**Common confusion:** Secondary action competing with primary.
**Key phrase:** "It adds flavor but shouldn't steal the show."

### 9. Timing
**Show first:** Same action at 4, 8, 12, 24 frames - feel the difference.
**Common confusion:** Defaulting to same timing for everything.
**Key phrase:** "Timing is the acting. Same pose, different timing = different meaning."

### 10. Exaggeration
**Show first:** Compare photo reference to Disney interpretation.
**Common confusion:** Fear of pushing too far (more common than pushing too much).
**Key phrase:** "Find reality, then push 20% past it."

### 11. Solid Drawing
**Show first:** Turn a simple character 360 degrees. Volume must hold.
**Common confusion:** Drawing symbols instead of forms.
**Key phrase:** "Can you imagine walking around it?"

### 12. Appeal
**Show first:** Character lineup - which ones do you want to watch?
**Common confusion:** Thinking appeal means "pretty."
**Key phrase:** "Appeal is magnetic. Even villains need it."

## Teaching Sequence
Start with Timing + Squash/Stretch (bouncing ball). Add Arcs + Slow In/Out. Build complexity gradually. Staging and Appeal come later - they require visual vocabulary.

© dylantarre · MIT · dylantarre/animation-principles

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

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

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