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

squash-stretch-mastery — скилл для Claude Code: обзор и установка

Обучает агента принципу сжатия и растяжения: настраивает отклик интерфейсов и прыжков с сохранением объёма объекта.

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

Что делает 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-code

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

~/.claude/skills/squash-stretch-mastery/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Фронтенд и UI» →
motion-design LottieFiles Скилл помогает проектировать анимации интерфейса: выбирать длительность, easing и последовательность движения. Пригодится для микровзаимодействий, загрузки и переходов между страницами. CX Codex +1 19 900установок animation-designer daffy0208 Скилл для веб-анимаций: переходы страниц, появление компонентов, параллакс и микро-взаимодействия на Framer Motion и CSS. CX Codex +1 1 900установок motion-principles AThevon Скилл задаёт правила интерфейсной анимации: безопасные свойства, тайминги, кривые разгона и режим reduced-motion для веба, SwiftUI и Jetpack Compose. CX Codex +1 1 100установок animation-principles iart-ai Скилл задаёт физику и тайминги интерфейсной анимации. Он выдаёт точные кривые cubic-bezier, задержки шагов и длительности в миллисекундах. CX Codex +1 3 000установок emil-design-eng emilkowalski Скилл задаёт правила для полировки интерфейсов, компонентов и анимаций. Пригодится, когда UI работает, но требует более точных состояний и переходов. CX Codex +1 388 200установок review-animations emilkowalski Проверяет код интерфейсных анимаций по принципам Эмиля Ковальски. Помогает убрать дерганые переходы, медленный ease-in и лишнюю нагрузку на процессор. CX Codex +1 256 500установок

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

animator-traditional Переносит классические 12 принципов диснеевской анимации и покадровую работу в контекст ИИ-агента. Помогает продумать тайминг и выразительность ключевых поз. CX Codex +1 527установок joy-delight Скилл задаёт правила и тайминги для радостных UI-анимаций по принципам Disney. Помогает анимировать награды, конфетти и экраны успеха. CX Codex +1 522установок micro-100-200ms Скилл для микроанимаций длительностью 100–200 мс: подсказки, выпадающие меню, мелкая обратная связь. Помогает подобрать тайминг и кривые. CX Codex +1 521установок calm-relaxation Скилл для ИИ-кодинга, который задаёт правила плавных и тихих анимаций: длинные тайминги, мягкие кривые, никаких резких движений. CX Codex +1 521установок staging-mastery Свод правил по сценической расстановке в анимации и интерфейсах. Помогает сфокусировать внимание пользователя на одном главном действии за раз. CX Codex +1 520установок slow-in-out-mastery Скилл для ИИ-агента, который подсказывает, какую кривую ускорения и замедления выбрать в анимации интерфейса или персонажа. CX Codex +1 520установок brand-consistency Скилл разбирает анимацию, которая выбивается из стиля бренда, и подсказывает, что поправить: тайминги, кривые, уровень выразительности. CX Codex +1 520установок attention-grabbers Скилл для ИИ-агента, который подсказывает, как делать пульсации бейджей, тряску ошибок и подсветку новых функций по принципам Disney. CX Codex +1 519установок

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

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