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

problem-diagnosis — скилл для Claude Code: разбор проблем анимации

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

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

Что делает problem-diagnosis

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

Работает как чек-лист из 12 принципов анимации. Агент проходит по таймингу и спейсингу, сквошу и растяжению, антиципации и follow-through, дугам, стейджингу, уровню утрирования, вторичному действию. Процесс такой: назвать симптом, понять, вся сцена страдает или отдельные моменты, проверить принципы по порядку, внести одно изменение и оценить результат.

Главное правило — одна правка за раз. Проблем у движения обычно несколько, но если менять всё сразу, непонятно, что сработало. Для работы нужен только сам файл скилла: ~/.claude/skills/problem-diagnosis/SKILL.md в Claude.

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

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

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

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

Как установить problem-diagnosis

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/problem-diagnosis/SKILL.md

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

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

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

Animation Principles - Novice Скилл разбирает 12 принципов анимации и даёт конкретные упражнения, чтобы применить их в простых проектах. Пригодится, когда база уже есть, а практики не хватает. CX Codex +1 488установок Animation Principles - Absolute Beginner Объясняет 12 принципов анимации самыми простыми словами. Пригодится, если вы впервые берётесь за движение в интерфейсе или игре. CX Codex +1 486установок technical-constraints Скилл для случаев, когда анимация упирается в поддержку браузеров, возможности платформы или технические требования. Помогает сохранить замысел, не ломая сборку. CX Codex +1 487установок comfort-safety Скилл для ИИ-кодинга, который задаёт правила анимаций в интерфейсах, где пользователю важно чувствовать себя в безопасности. CX Codex +1 486установок universal-industry Скилл с базовыми настройками анимации по 12 принципам Disney: тайминги, easing и правила для интерфейсов, когда отраслевых гайдлайнов нет. CX Codex +1 485установок medium-300-500ms Скилл для ИИ-агента, который помогает писать анимации средней длительности: переходы страниц, модалки, появление элементов. CX Codex +1 484установок large-500-800ms Скилл для ИИ-агента, который подсказывает, как строить длинные анимации на 500–800 мс: переходы hero-блоков, сложные раскрытия, сцены, которые должны запомниться. CX Codex +1 485установок motion-sickness Помогает найти и убрать в интерфейсе анимации, от которых кружится голова: параллакс, зум, вращение. Пригодится, когда пользователи жалуются на тошноту при навигации. CX Codex +1 483установок

Похожие

review-animations emilkowalski Проверяет код интерфейсных анимаций по принципам Эмиля Ковальски. Помогает убрать дерганые переходы, медленный ease-in и лишнюю нагрузку на процессор. CX Codex +1 256 500установок apple-design emilkowalski Переносит принципы физического интерфейса Apple с докладов WWDC в веб на CSS, Pointer Events и Motion. Пригодится при верстке жестов, шторки и прерываемых пружин. CX Codex +1 244 500установок figma-use-motion официальный Figma Скилл добавляет use_figma контекст для анимации узлов Figma: ключевых кадров, easing, animation styles и длительности таймлайна. CX Codex GP ChatGPT 5установок transitions-polish Jakubantalik Скилл проверяет уже существующие анимации и подбирает токены для времени, расстояния, масштаба, blur и easing. Пригодится для точной настройки motion. CX Codex +1 10 800установок top-design wondelai Скилл направляет агента на создание веб-интерфейсов уровня Awwwards с акцентной типографикой, выверенной анимацией и оценкой макета по десятибалльной шкале. CX Codex +1 7 100установок motion-framer freshtechbro Помогает агенту добавлять анимации Motion и Framer Motion в React-интерфейсы: от эффектов наведения до переходов между состояниями. CX Codex +1 5 900установок

Рядом в теме «Геймдев и 3D: Unity, Unreal, Godot, Blender»

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →

Вопросы о problem-diagnosis

Как установить problem-diagnosis в Claude?

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

Что делает problem-diagnosis?

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

Почему скилл советует менять только одно за раз?

У плохого движения часто несколько причин. Если править всё сразу, не получится понять, какая правка дала результат, и следующий похожий случай придётся разбирать заново.

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

SKILL.md · MIT
---
name: problem-diagnosis
description: Use when animation "feels wrong" but you can't pinpoint why—debugging floaty movement, stiff characters, unclear action, or any motion that isn't working and needs systematic troubleshooting.
---

# Problem Diagnosis

Think like a doctor examining symptoms. Something feels wrong. Your job is to identify the specific principle being violated and prescribe the cure. Systematic diagnosis beats random fixes.

## Core Mental Model

When animation feels off, ask: **What principle is being violated, and how?**

"It doesn't look right" isn't actionable. The 12 principles are your diagnostic checklist. Every animation problem is a principle problem—find which one, and the solution becomes clear.

## Diagnostic Framework

### Symptom: "Floaty" or "Weightless"
**Likely Causes:**
- Missing slow-in/slow-out (objects should accelerate with gravity)
- Insufficient anticipation before jumps
- No squash on landing impacts
- Timing too uniform (everything same speed)
- Missing secondary weight (hair/clothing not responding to gravity)

**Fixes:**
1. Add ease-in at motion start
2. Add squash frames at impact points
3. Include settling oscillations after stops
4. Vary timing based on mass

### Symptom: "Stiff" or "Robotic"
**Likely Causes:**
- Missing arcs (linear interpolation instead of curves)
- No overlapping action (all parts move together)
- Twinning (left and right doing identical things)
- No secondary action
- Timing too uniform

**Fixes:**
1. Add arc curves to all motion paths
2. Offset timing of connected body parts
3. Break symmetry in poses
4. Add breathing and weight shifts
5. Include micro-movements

### Symptom: "Unclear" or "Hard to Read"
**Likely Causes:**
- Poor staging (elements overlap confusingly)
- Weak silhouettes
- Insufficient anticipation (action comes from nowhere)
- Not enough exaggeration
- Competing attention points

**Fixes:**
1. Simplify background during key action
2. Push poses to clear silhouettes
3. Extend anticipation timing
4. Increase exaggeration 20%
5. Reduce secondary action during primary beats

### Symptom: "Boring" or "Lifeless"
**Likely Causes:**
- No appeal in character posing
- Timing lacks contrast (no fast vs. slow)
- Missing anticipation-payoff structure
- Insufficient exaggeration
- No secondary action or texture

**Fixes:**
1. Push personality in poses
2. Create timing contrast (faster fasts, slower slows)
3. Add clear anticipation beats
4. Increase exaggeration of key poses
5. Layer in secondary movement

### Symptom: "Cartoony" (Unintentionally)
**Likely Causes:**
- Excessive squash and stretch
- Over-exaggerated timing
- Physics violations too extreme
- Follow-through too elastic

**Fixes:**
1. Reduce squash/stretch to 10-20% range
2. Add more frames to smooth extremes
3. Ground with realistic settling time
4. Pull back follow-through delay

### Symptom: "Too Fast" / "Too Slow"
**Likely Causes:**
- Frame count mismatch with intention
- Missing ease-in or ease-out
- Key poses not held long enough
- Anticipation/payoff imbalance

**Fixes:**
1. Adjust frame count (add/remove in-betweens)
2. Check easing curves
3. Hold key poses 2-4 more frames
4. Rebalance anticipation vs. action timing

## Diagnostic Process

1. **Identify the symptom** — Name what's wrong in plain terms
2. **Isolate the problem** — Is it the whole scene or specific moments?
3. **Check principles systematically:**
   - Timing and spacing?
   - Squash and stretch?
   - Anticipation and follow-through?
   - Arcs?
   - Staging?
   - Exaggeration level?
   - Secondary action?
4. **Test hypothesis** — Make one change, evaluate
5. **Iterate** — If unfixed, try next most likely principle

## The Golden Rule

**One fix at a time.** Animation problems often have multiple causes, but changing everything at once makes it impossible to learn what worked. Diagnose, treat one principle, evaluate, repeat.

© dylantarre · MIT · dylantarre/animation-principles

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

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

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