exaggeration-mastery — скилл для Claude Code: насколько усилить
Скилл помогает решить, насколько вывести движение за пределы реализма, чтобы ключевые моменты читались на экране.
npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a claude-codeЧто делает exaggeration-mastery
Скилл объясняет, как подбирать степень утрирования под контекст. Внутри — шкала от 1.1 до 2x и выше: сдержанно для корпоративных интерфейсов, умеренно для потребительских продуктов, смело для игр и развлекательного контента. Для каждого уровня расписано, что именно усиливать — позы, тайминг, интервалы, сквош и стретч, дуги, мимику.
Отдельный раздел про то, чего утрировать не стоит: пропорции во время движения, разные физические законы для одного объекта, всё сразу. Есть метод калибровки из пяти шагов: начать с реалистичного движения, выбрать ключевое качество, усилить его на 50%, оценить результат и подстроить. Советует начинать с 10-20% для профессиональных контекстов и 30-50% для потребительских.
Скилл пригодится, когда анимация выглядит вялой, а непонятно, где перебор. Главная ловушка — несогласованность: если один элемент усилен на 30%, связанные с ним должны быть усилены пропорционально, иначе возникает диссонанс.
Какие задачи решает
- подобрать степень утрирования под серьёзный интерфейс
- оживить микроанимации кнопок и переходов
- сделать праздничные состояния заметнее без мультяшности
- усилить отдачу от удара в игре
- согласовать уровень утрирования между связанными элементами
Примеры запросов агенту
- оцени анимацию модального окна — не переборщил ли я с пружиной
- подбери уровень утрирования для онбординга мобильного приложения
- проверь, согласован ли тайминг у карточек и тултипов
Как установить exaggeration-mastery
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a claude-code2Вручную: положить файлы
~/.claude/skills/exaggeration-mastery/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/exaggeration-mastery/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a codex2Вручную: положить файлы
.agents/skills/exaggeration-mastery/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a cursor2Вручную: положить файлы
.cursor/skills/exaggeration-mastery/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles exaggeration-mastery2Вручную: положить файлы
.github/skills/exaggeration-mastery/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/11-by-principle-focus/exaggeration-masteryВручную: положить файлы
.devin/skills/exaggeration-mastery/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о exaggeration-mastery
Как установить exaggeration-mastery в Claude?
Выполните npx skills add dylantarre/animation-principles --skill exaggeration-mastery -a claude-code. Скилл окажется в ~/.claude/skills/exaggeration-mastery/SKILL.md.
Что делает exaggeration-mastery?
Помогает выбрать, насколько усилить движение относительно реализма, и объясняет, какие параметры анимации стоит утрировать, а какие нет.
Чем этот скилл отличается от squash-and-stretch?
Сквош и стретч здесь названы главным инструментом утрирования: именно степень деформации задаёт, насколько мультяшно выглядит движение.
Исходный текст
SKILL.md · MIT
--- name: exaggeration-mastery description: Use when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences. --- # Exaggeration Mastery ## The Truth Beyond Realism Exaggeration isn't about making things unrealistic—it's about making things feel true. A perfect photographic copy of motion often feels dead on screen. Animation requires pushing beyond literal reality to capture the essence of movement, emotion, and intent. ## Core Theory **The camera lies**: Film loses dimension, haptic feedback, and environmental immersion. What reads clearly in real life often flattens on screen. Exaggeration compensates for this loss. **Essence over accuracy**: Exaggeration distills motion to its essential quality. A sad slump becomes sadder. A joyful leap becomes more joyful. The caricature captures truth the photograph misses. ## The Exaggeration Spectrum **Subtle (1.1-1.2x)**: Corporate, serious contexts. Motion feels polished but grounded. **Moderate (1.3-1.5x)**: Consumer products, friendly brands. Motion feels alive and engaging. **Bold (1.6-2x)**: Entertainment, games, playful contexts. Motion has personality and energy. **Theatrical (2x+)**: Cartoons, comedy, stylized work. Motion defines the reality. ## What to Exaggerate **Poses**: Push silhouettes further than comfortable. If a lean feels like 15°, make it 20°. **Timing**: Compress fast actions further, extend holds longer. **Spacing**: Increase contrast between fast and slow phases. **Squash/stretch**: Push deformation beyond physical limits. **Arcs**: Sweep paths wider than strict physics suggests. **Expression**: Amplify emotional poses and reactions. ## What NOT to Exaggerate **Proportions during motion**: Unless the style supports it, characters shouldn't distort **Physical laws differently for same object**: Stay internally consistent **Everything equally**: Exaggeration needs contrast with restraint ## Interaction with Other Principles **Squash/stretch is exaggeration's primary vehicle**: How much deformation defines how cartoony the motion feels. **Timing exaggeration shapes genre**: Snappy timing = comedy; held timing = drama. **Anticipation often gets exaggerated**: Big wind-ups before small actions (comedy), or tiny wind-ups before big actions (surprise). **Staging guides what gets exaggerated**: Primary action gets more; secondary stays restrained. ## Domain Applications ### UI/Motion Design - **Micro-interactions**: 1.1-1.3x (bounces slightly bouncier, scales slightly larger) - **Celebrations**: 1.5-2x (confetti, badges, success states) - **Error states**: Subtle exaggeration draws attention without alarm - **Onboarding**: Moderately exaggerated to teach interaction patterns ### Character Animation - **Acting for camera**: Stage-level expression, not naturalistic - **Action sequences**: Physics-defying moves that read clearly - **Comedy**: Extreme exaggeration is the language of humor - **Drama**: Restrained exaggeration for believable intensity ### Motion Graphics - **Brand personality**: Exaggeration level defines visual voice - **Data visualization**: Subtle overshoot aids comprehension - **Kinetic typography**: Exaggerated movement adds emphasis ### Game Feel - **Jump arcs**: Exaggerated apex hang time - **Hit reactions**: Over-the-top knockback for satisfaction - **Abilities**: Exaggerated wind-up and release - **Feedback**: Bigger than realistic responses to player action ## Common Mistakes 1. **Under-exaggeration**: Motion feels stiff, lifeless, timid 2. **Over-exaggeration for context**: Cartoon motion in serious enterprise software 3. **Inconsistent exaggeration**: Some elements pushed, others realistic—creates dissonance 4. **Exaggerating the wrong thing**: Pushing secondary action while primary stays flat ## The Restraint Paradox The best exaggeration is invisible. Push motion until it's clearly too much, then pull back 20%. The audience should feel the energy without consciously thinking "that's exaggerated." ## Context Calibration Method 1. Start with realistic motion 2. Identify the key quality to communicate (weight, speed, joy, impact) 3. Push that quality by 50% 4. Evaluate if it reads as "true" or "cartoonish" 5. Adjust until it feels right for context ## Implementation Heuristic Default to 10-20% exaggeration for professional contexts, 30-50% for consumer/entertainment. Always maintain internal consistency—if one element is pushed 30%, related elements should be proportionally pushed. Exaggeration without intention is just sloppiness; purposeful exaggeration is artistry.
© dylantarre · MIT · dylantarre/animation-principles