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

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

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

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

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

Скилл работает как диагностический справочник. Вы описываете симптом — «выглядит невесомо», «деревянно», «непонятно, что происходит» — и получаете список того, что проверить: интервалы, тайминг, сквош и стретч, follow through. Дальше идёт короткая рекомендация по правке.

Отдельный блок разбирает конфликты принципов. Большая антиципация убивает эффект неожиданности, тяжёлый follow through смягчает резкий тайминг, вторичное действие отвлекает от главного — тут придётся выбирать осознанно. Есть и аварийные шаги: вернуться к блокингу, убрать весь оверлап и посмотреть, работает ли основное движение само.

Если сломалось сразу несколько принципов, скилл советует начать с тайминга и арок. Остальное от них зависит, поэтому правки в другом порядке часто не дают результата.

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

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

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

  • Анимация персонажа выглядит невесомо, помоги найти причину
  • Движение кажется деревянным, какие принципы проверить
  • Не могу понять, что не так с анимацией — прогони по симптомам

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

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/troubleshooting/SKILL.md

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

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

Вопросы о Animation Principles - Troubleshooting

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

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

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

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

Что делать, если сломалось несколько принципов сразу?

Скилл советует сначала чинить тайминг и арки. Остальные принципы опираются на них, поэтому другой порядок правок часто не помогает.

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

SKILL.md · MIT
---
name: Animation Principles - Troubleshooting
description: Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied
---

# Animation Troubleshooting Guide

Something's off. Use this to find and fix it.

## Symptom-Based Diagnosis

### "It feels floaty/weightless"
**Check:**
- Slow in/out - Is spacing too even? Add bunching at start/end
- Timing - Need more frames for weight? Fewer for snap?
- Squash/stretch - Impact reaction visible?
- Follow through - Settling properly or just stopping?

**Fix:** Add 2-4 frames to settle. Increase spacing variation. Add impact squash.

### "It feels stiff/robotic"
**Check:**
- Arcs - Are paths too straight?
- Overlap - Is everything moving at once?
- Secondary action - Is it present?
- Anticipation - Too uniform?

**Fix:** Offset timing between body parts. Curve your motion paths. Vary anticipation amounts.

### "I can't tell what's happening"
**Check:**
- Staging - Silhouette clear?
- Anticipation - Is viewer prepared for action?
- Timing - Too fast to read?
- Exaggeration - Key poses pushed enough?

**Fix:** Simplify composition. Add anticipation frames. Extend key poses. Push silhouette.

### "It feels dead/lifeless"
**Check:**
- Secondary action - Present and supporting?
- Overlap - Different parts moving differently?
- Timing - Varied or monotonous?
- Appeal - Character design working?

**Fix:** Layer in secondary actions. Offset everything by 1-3 frames. Vary timing between actions.

### "It feels cartoony when it should be subtle" (or vice versa)
**Check:**
- Exaggeration - Calibrated to style?
- Squash/stretch - Amount appropriate?
- Timing - Snappy vs. naturalistic?
- Anticipation - Size matches style?

**Fix:** Dial exaggeration to match reference. Adjust squash/stretch ratios. Match timing to style guide.

### "Something feels wrong but I can't identify it"
**Check:**
- Arcs - Track every moving part. Find the broken curve.
- Volume - Is squash/stretch preserving mass?
- Twins - Are poses too symmetrical?
- Spacing - Graph your drawings. Find the anomaly.

**Fix:** Often it's one broken arc or inconsistent spacing. Track paths obsessively.

## Principle Conflict Symptoms

**Anticipation vs. Surprise:** Big anticipation kills surprise. Choose intentionally.

**Exaggeration vs. Subtlety:** Can't have both. What does the scene need?

**Follow through vs. Snappiness:** Heavy follow through softens snappy timing. Balance.

**Secondary vs. Primary:** If secondary distracts, remove it regardless of quality.

## Last Resort Fixes

1. Return to blocking. Is the idea clear at the key pose level?
2. Remove all overlap/secondary. Does primary action work alone?
3. Reference check. Compare to reality or quality examples.
4. Fresh eyes. Walk away. Return tomorrow.

If multiple principles are failing, fix timing and arcs first. Everything else depends on them.

© 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установок animation-designer daffy0208 Скилл для веб-анимаций: переходы страниц, появление компонентов, параллакс и микро-взаимодействия на Framer Motion и CSS. CX Codex +1 1 900установок 12-principles-of-animation raphael-salaja Находит ошибки в веб-анимациях по двенадцати принципам движения. Выводит список замечаний с номерами строк и сводную таблицу нарушений. CX Codex +1 2 200установок roblox-animation-vfx TabooHarmony Скилл для ИИ-агента, который помогает писать и чинить анимации, партиклы, лучи, трейлы и твины в Roblox. CX Codex +1 2 300установок roblox-animation nonlooped Скилл для анимаций персонажей Roblox: треки, IK-позы, события по маркерам и твины интерфейса. Пригодится, когда нужно собрать локомоцию или эмоцию и не сломать приоритеты. CX Codex +1 392установок

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

power-confidence Скилл задаёт правила анимаций, которые читаются как сила и власть: тяжёлое движение, резкая остановка, минимум отскока. Пригодится на hero-секциях и витринах премиум-продуктов. CX Codex +1 495установок universal-patterns Задаёт базовые длительности, кривые изинга и 12 принципов анимации для любого движения в интерфейсе. Пригодится, когда агент пишет CSS-переходы и не угадывает с таймингом. CX Codex +1 493установок secondary-action-mastery Скилл учит добавлять вторичное движение так, чтобы оно поддерживало главное действие, а не спорило с ним. Пригодится в UI-анимации и игровом филе. CX Codex +1 494установок feedback-indicators Скилл для анимаций обратной связи: галочки успеха, тряска ошибок, валидация полей и тосты. Пригодится, когда интерфейс должен внятно отвечать на действие пользователя. CX Codex +1 493установок 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установок

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

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