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

Animation Principles - Universal Reference — скилл для Claude Code

Справочник по 12 классическим принципам анимации Диснея с разбором для новичков и опытных специалистов. Помогает агенту подбирать точную глубину ответа.

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

Что делает Animation Principles - Universal Reference

Скилл добавляет в контекст классические 12 принципов анимации Диснея. Каждый принцип разобран в четырёх плоскостях: основная суть, простое объяснение для начинающих, технические нюансы для опытных специалистов и ключевой вывод. Это помогает модели калибровать глубину терминов, когда опыт собеседника заранее неизвестен.

Материал сгруппирован по четырём категориям: физика движения, визуальная ясность, выразительность и метод компоновки. Описание детально разбирает сохранение объёма при сжатии, тест силуэта, иерархию задержек и кастомные кривые замедления вроде snap или bounce. Прямые траектории движения скилл советует использовать только при наличии специального обоснования.

Скрипты и ключи API не требуются.

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

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

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

  • Объясни принцип Slow In and Slow Out для новичка на примере CSS-переходов.
  • Как применить Staging и Anticipation при появлении диалогового окна?
  • Разбери вторичное действие (Secondary Action) и тайминг для анимации спиннера.

Как установить Animation Principles - Universal Reference

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill animation-principles---universal-reference -a claude-code
npx skills add dylantarre/animation-principles --skill universal-reference -a claude-code

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

~/.claude/skills/universal-reference/SKILL.md

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

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

Вопросы о Animation Principles - Universal Reference

Как установить Animation Principles - Universal Reference в Claude Code?

Выполните команду npx skills add dylantarre/animation-principles --skill universal-reference -a claude-code. Также можно вручную сохранить файл по пути ~/.claude/skills/universal-reference/SKILL.md.

Зачем нужен этот справочник?

Он даёт агенту структурированные знания по 12 принципам анимации Диснея, помогая формулировать советы как для новичков, так и для продвинутых дизайнеров.

На какие группы разделены правила в скилле?

Все 12 принципов сгруппированы в четыре блока: физика (Physics), визуальная ясность (Clarity), выразительность (Interest) и метод создания (Method).

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

SKILL.md · MIT
---
name: Animation Principles - Universal Reference
description: Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level
---

# Animation Principles - Universal Reference

Disney's 12 principles work at every skill level. Here's each principle with scalable depth.

## 1. Squash and Stretch

**Core idea:** Objects deform to show motion and impact.
**Beginner:** Ball flattens when it hits ground.
**Advanced:** Volume must remain constant. Facial animation uses micro-squash for expression.
**Key insight:** Even "rigid" objects can use the principle through camera shake or motion blur.

## 2. Anticipation

**Core idea:** Prepare the viewer for action.
**Beginner:** Crouch before jump.
**Advanced:** Anticipation size controls audience expectation. Absence creates surprise.
**Key insight:** Every action that needs to read clearly needs setup.

## 3. Staging

**Core idea:** Present one clear idea at a time.
**Beginner:** Put important things where viewers will look.
**Advanced:** Silhouette test, negative space, compositional psychology.
**Key insight:** Confusion is never the viewer's fault.

## 4. Straight Ahead and Pose to Pose

**Core idea:** Two methods - sequential vs. key-pose-first.
**Beginner:** Different ways to approach the same animation.
**Advanced:** Choose based on need: control vs. spontaneity. Hybrid approaches for complex shots.
**Key insight:** The method shapes the result's energy.

## 5. Follow Through and Overlapping Action

**Core idea:** Different parts stop at different times.
**Beginner:** Hair keeps moving after head stops.
**Advanced:** Drag, settle, overlap hierarchy. Emotional implications of follow through weight.
**Key insight:** Simultaneous stopping looks robotic.

## 6. Slow In and Slow Out

**Core idea:** Things accelerate and decelerate.
**Beginner:** More drawings at start and end, fewer in middle.
**Advanced:** Custom easing curves. Snap, bounce, drift variations.
**Key insight:** Even spacing reads mechanical.

## 7. Arc

**Core idea:** Natural motion follows curves.
**Beginner:** Arms swing in arcs, not straight lines.
**Advanced:** Track all motion paths. Breaking arcs intentionally for mechanical/sudden effects.
**Key insight:** Straight paths require justification.

## 8. Secondary Action

**Core idea:** Additional movement supporting the main action.
**Beginner:** Whistling while walking.
**Advanced:** Can create emotional counterpoint. Must support, never compete.
**Key insight:** If it distracts, remove it.

## 9. Timing

**Core idea:** Frame count creates weight, mood, meaning.
**Beginner:** Fast = light/quick. Slow = heavy/deliberate.
**Advanced:** Frame-level sensitivity. Same pose, different timing = different meaning.
**Key insight:** Timing is the acting.

## 10. Exaggeration

**Core idea:** Push reality further for clarity and impact.
**Beginner:** Bigger reactions than real life.
**Advanced:** Style-calibrated exaggeration. Finding essence to amplify.
**Key insight:** Usually push further than instinct suggests.

## 11. Solid Drawing

**Core idea:** Create sense of three-dimensional form.
**Beginner:** Make drawings feel like they have weight and depth.
**Advanced:** Consistent volume through motion. Strategic flatness for graphic impact.
**Key insight:** Viewers have touched things their whole lives. Drawings should feel touchable.

## 12. Appeal

**Core idea:** Make characters compelling to watch.
**Beginner:** Interesting, clear, distinctive design.
**Advanced:** Appeal isn't beauty - villains need it too. Compelling through any aesthetic.
**Key insight:** Would you want to keep watching?

## Principle Groups
**Physics:** 1, 5, 6, 7, 9 | **Clarity:** 2, 3, 11 | **Interest:** 8, 10, 12 | **Method:** 4

© dylantarre · MIT · dylantarre/animation-principles

Похожие скиллы

Всё по теме «Дизайн» →
animation-principles iart-ai Скилл задаёт физику и тайминги интерфейсной анимации. Он выдаёт точные кривые cubic-bezier, задержки шагов и длительности в миллисекундах. CX Codex +1 3 000установок motion-principles AThevon Скилл задаёт правила интерфейсной анимации: безопасные свойства, тайминги, кривые разгона и режим reduced-motion для веба, SwiftUI и Jetpack Compose. CX Codex +1 1 100установок 12-principles-of-animation raphael-salaja Находит ошибки в веб-анимациях по двенадцати принципам движения. Выводит список замечаний с номерами строк и сводную таблицу нарушений. CX Codex +1 2 200установок animation-designer daffy0208 Скилл для веб-анимаций: переходы страниц, появление компонентов, параллакс и микро-взаимодействия на Framer Motion и CSS. CX Codex +1 1 900установок ui-animation mblode Скилл проектирует, проверяет и разбирает анимацию интерфейсов: пружины, жесты, прокрутку и переходы. Пригодится при работе с движением и звуками UI. CX Codex +1 10 400установок design-motion-principles kylezantos Создаёт и проверяет анимации интерфейса с учётом контекста продукта и частоты действий. Нужен для переходов, состояний наведения и микровзаимодействий. CX Codex +1 12 800установок

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

loaders-spinners Помогает проектировать спиннеры, индикаторы загрузки и скелетоны по 12 принципам анимации Диснея. Подходит для вёрстки живых UI-состояний в CSS. CX Codex +1 508установок orchestrated-sequences Скилл для сборки многочастных анимаций: подсказывает, как расставить задержки, кривые и роли элементов, чтобы появление выглядело одним движением. CX Codex +1 508установок attention-management Скилл для настройки визуальной иерархии в интерфейсе через анимацию по принципам Диснея. Он помогает сфокусировать взгляд пользователя на главном контенте и кнопках действия. CX Codex +1 507установок social-media Скилл для анимаций в соцсетях, мессенджерах и фичах сообществ: подсказывает тайминги и поведение интерфейса. CX Codex +1 507установок exaggeration-mastery Скилл помогает решить, насколько вывести движение за пределы реализма, чтобы ключевые моменты читались на экране. CX Codex +1 505установок brand-strategist Помогает описать характер бренда через движение: тайминги, кривые, степень растяжения. Пригодится, когда анимация в продукте должна звучать так же, как логотип и голос бренда. CX Codex +1 505установок exit-animations Скилл подсказывает агенту, как анимировать исчезновение элементов: закрытие модалок, скрытие уведомлений, удаление строк списка. CX Codex +1 502установок accordions-dropdowns Скилл учит ассистента анимировать аккордеоны и выпадающие списки по 12 принципам анимации Диснея. Пригодится при верстке интерфейсов без рывков по высоте. CX Codex +1 502установок

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

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