squash-stretch-mastery — скилл для Claude Code: обзор и установка
Обучает агента принципу сжатия и растяжения: настраивает отклик интерфейсов и прыжков с сохранением объёма объекта.
npx skills add dylantarre/animation-principles --skill squash-stretch-mastery -a claude-codeЧто делает squash-stretch-mastery
Скилл объясняет ассистенту правила классического сжатия и растяжения для анимаций интерфейсов и игр. Главное правило здесь — сохранение объёма. Когда объект сжимается по вертикали, он обязан расширяться по горизонтали, иначе элемент кажется уменьшающимся или растущим под действием силы.
Инструкция задаёт спектр упругости для разных материалов: от сильной деформации желе до одного-двух процентов для твёрдых металла или дерева. В интерфейсах скилл советует сжимать кнопку при нажатии до 95–98% высоты и слегка растягивать списки при скролле с эффектом резиновой ленты.
Для энергичных движений скилл советует начать с 10% деформации, а для аккуратной полировки брать 2–3%. Анимация не должна переключаться рывком. Без плавного входа и выхода из сжатия движение выглядит неестественным и рваным.
Какие задачи решает
- настроить отдачу и сжатие кнопок при клике
- оживить прыжки и столкновения персонажей в игре
- анимировать логотип с сохранением его объёма
- добавить упругое растяжение при оверскролле списков
Примеры запросов агенту
- Добавь лёгкое сжатие кнопки до 96% при нажатии с плавным возвратом
- Настрой анимацию отскока плашки уведомления с сохранением объёма
- Сделай деформацию персонажа при приземлении: сжатие на 10% и растяжение в стороны
Как установить squash-stretch-mastery
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill squash-stretch-mastery -a claude-code2Вручную: положить файлы
~/.claude/skills/squash-stretch-mastery/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/squash-stretch-mastery/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill squash-stretch-mastery -a codex2Вручную: положить файлы
.agents/skills/squash-stretch-mastery/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill squash-stretch-mastery -a cursor2Вручную: положить файлы
.cursor/skills/squash-stretch-mastery/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles squash-stretch-mastery2Вручную: положить файлы
.github/skills/squash-stretch-mastery/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill squash-stretch-mastery -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/11-by-principle-focus/squash-stretch-masteryВручную: положить файлы
.devin/skills/squash-stretch-mastery/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill squash-stretch-mastery -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о squash-stretch-mastery
Как установить squash-stretch-mastery в Claude Code?
Выполните команду npx skills add dylantarre/animation-principles --skill squash-stretch-mastery -a claude-code. Она запишет файл скилла в ~/.claude/skills/squash-stretch-mastery/SKILL.md.
Что делает скилл squash-stretch-mastery?
Он задаёт правила деформации элементов с сохранением объёма, чтобы объекты сминались и растягивались естественно, а не меняли общий размер.
Сколько процентов деформации рекомендует этот скилл?
Для резких динамичных движений скилл рекомендует начинать с 10%, а для полировки UI — с 2–3%. Например, для нажатия кнопки предлагается сжатие до 95–98% исходной высоты.
Исходный текст
SKILL.md · MIT
--- name: squash-stretch-mastery description: Use when implementing deformation effects, bounce animations, impact responses, or any motion requiring organic elasticity and weight expression. --- # Squash & Stretch Mastery ## The Foundation Principle Squash and stretch is considered the most important of Disney's 12 principles because it solves animation's fundamental problem: making rigid objects feel alive. Developed in the 1930s at Disney, it emerged from observing how real flesh and rubber deform under force while maintaining constant volume. ## Core Theory **Volume Preservation**: When an object squashes, it must widen. When it stretches, it must narrow. This constraint creates believability—violate it and objects appear to grow or shrink rather than deform. **Force Visualization**: Squash and stretch makes invisible forces visible. A ball squashing on impact shows us the floor's resistance. A character stretching mid-leap reveals velocity and momentum. ## The Elasticity Spectrum Not all objects deform equally: - **High elasticity**: Rubber balls, cartoon characters, jelly (extreme deformation) - **Medium elasticity**: Human faces, cloth, muscle (subtle deformation) - **Low elasticity**: Wood, metal, bone (minimal but present micro-deformation) Even "rigid" objects benefit from 1-2% deformation—it prevents the dead, mechanical feel. ## Interaction with Other Principles **Timing amplifies squash/stretch**: Fast impacts demand more squash; slow floats need gentle stretch. The deformation amount must match velocity. **Anticipation uses stretch**: A character winding up for a jump often stretches slightly before the motion begins. **Follow-through extends it**: After landing, the squash ripples through secondary elements (hair, clothing, flesh). ## Domain Applications ### UI/Motion Design - Button press: subtle squash (95-98% height) on tap - List items: stretch slightly when pulled beyond bounds (rubber-band scroll) - Notifications: squash on arrival, bounce to rest ### Character Animation - Facial expressions: cheeks squash on smile, stretch on surprise - Walk cycles: torso compresses on contact, extends on passing - Emotional beats: extreme stretch for shock, squash for dejection ### Logo Animation - Bouncing logos: exaggerated squash creates playful personality - Subtle breathing: micro-squash/stretch keeps static logos alive ### Game Feel - Jump arcs: stretch on ascent, squash on landing - Hit reactions: brief squash sells impact before knockback - Collectibles: rhythmic pulse using gentle squash/stretch ## Common Mistakes 1. **Breaking volume**: Objects appear to grow/shrink instead of deform 2. **Uniform deformation**: Real objects deform more where force is applied 3. **Over-application**: Subtle contexts need 1-5%, not cartoon 50% 4. **Static extremes**: Deformation should ease in/out, never snap ## Implementation Heuristic Start with 10% deformation for energetic motions, 2-3% for subtle polish. Adjust based on material and tone. When in doubt, less is more—squash/stretch should be felt, not consciously noticed.
© dylantarre · MIT · dylantarre/animation-principles