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

Animation Principles - Novice — скилл для Claude Code: 12 принципов

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

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

Что делает Animation Principles - Novice

Скилл идёт по 12 принципам анимации и на каждом даёт короткое пояснение и упражнение. Squash and stretch: сжать мяч на 20-30% в момент удара, слегка растянуть на пике скорости. Anticipation: персонаж сгибает колени перед прыжком, и чем больше замах, тем крупнее ожидаемое действие. Staging проверяется силуэтом — если в тени непонятно, что происходит, позу надо переставить.

Дальше — методы и тайминг. Pose-to-pose советует брать для спланированных действий вроде ходьбы и диалогов, straight ahead — для огня и воды. Slow in and slow out: лишние кадры в начале и конце движения, меньше кадров в середине. Одно и то же действие в 4 кадрах выглядит резким и лёгким, в 12 — тяжёлым. Есть ещё арки, follow through, secondary action, exaggeration, solid drawing и appeal.

Порядок практики задан: сначала timing, squash/stretch и anticipation, потом арки, follow through и slow in/out, и только затем secondary action, staging и appeal. Скилл ставится в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode — под каждую платформу своя команда. Это текстовое руководство без скриптов, так что ничего кроме самого скилла для работы не нужно.

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

  • применить squash and stretch к прыгающему мячу
  • подобрать число кадров под нужный вес движения
  • проверить позу персонажа по силуэту
  • выбрать между pose-to-pose и straight ahead для сцены
  • добавить follow through волосам и одежде после остановки

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

  • Помоги анимировать прыгающий мяч: где сжать, где растянуть
  • Сколько кадров поставить, чтобы удар выглядел тяжёлым?
  • Проверь мою позу персонажа по силуэту и скажи, что переставить

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

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/novice/SKILL.md

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

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

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

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

Похожие

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 - Novice

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

Выполните npx skills add dylantarre/animation-principles --skill animation-principles---novice -a claude-code, затем npx skills add dylantarre/animation-principles --skill novice -a claude-code. Файл скилла окажется по пути ~/.claude/skills/novice/SKILL.md.

Что делает Animation Principles - Novice?

Разбирает 12 принципов анимации и к каждому даёт упражнение: сжатие и растяжение, anticipation, staging, тайминг, арки, follow through и остальные. Учит применять их в простых проектах.

В каком порядке проходить принципы?

Сначала timing, squash/stretch и anticipation. Потом арки, follow through и slow in/out. В конце secondary action, staging и appeal.

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

SKILL.md · MIT
---
name: Animation Principles - Novice
description: Use when someone has basic awareness of animation principles and wants to start applying them in simple projects
---

# Building Your Animation Foundation

You know the basics. Now let's understand how to actually use these 12 principles in your work.

## 1. Squash and Stretch
**What it does:** Gives weight and flexibility to objects.
**Try this:** Animate a bouncing ball. Squash it 20-30% on impact, stretch it slightly at peak velocity.

## 2. Anticipation
**What it does:** Prepares the viewer for action.
**Try this:** Before a character jumps, have them bend their knees. The bigger the anticipation, the bigger the expected action.

## 3. Staging
**What it does:** Directs attention clearly.
**Try this:** Use silhouettes to test your poses. If you can't tell what's happening in shadow, restage it.

## 4. Straight Ahead vs Pose to Pose
**What it does:** Two animation methods with different results.
**Try this:** Use pose-to-pose for planned actions (walks, dialogue). Use straight ahead for wild, organic motion (fire, water).

## 5. Follow Through and Overlapping Action
**What it does:** Creates natural, fluid movement.
**Try this:** After your character stops, let hair, clothes, and appendages continue moving for a few frames.

## 6. Slow In and Slow Out
**What it does:** Adds weight and smoothness.
**Try this:** Add extra frames at the start and end of movements. Fewer frames in the middle means faster motion.

## 7. Arc
**What it does:** Makes movement feel natural.
**Try this:** Track your character's hand through a wave. It should draw a smooth curve, not zigzag.

## 8. Secondary Action
**What it does:** Adds richness without distraction.
**Try this:** A sad character might wipe their eye while talking. It supports the emotion without stealing focus.

## 9. Timing
**What it does:** Controls the mood and physics.
**Try this:** Same action, different frame counts. 4 frames = snappy/light. 12 frames = heavy/deliberate.

## 10. Exaggeration
**What it does:** Pushes reality for effect.
**Try this:** Find the real movement, then push it 20% further. Scared? Eyes wider. Angry? Lean more forward.

## 11. Solid Drawing
**What it does:** Creates believable 3D forms.
**Try this:** Draw your character from multiple angles. Maintain consistent volume throughout.

## 12. Appeal
**What it does:** Makes characters watchable.
**Try this:** Clear shapes, readable expressions, distinctive silhouettes. Avoid symmetry - asymmetry is more interesting.

## Practice Order
Start with: Timing, Squash/Stretch, Anticipation
Then add: Arcs, Follow Through, Slow In/Out
Finally: Secondary Action, Staging, Appeal

© dylantarre · MIT · dylantarre/animation-principles

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

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

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