Animation Principles - Absolute Beginner — скилл для Claude Code
Объясняет 12 принципов анимации самыми простыми словами. Пригодится, если вы впервые берётесь за движение в интерфейсе или игре.
npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-code
npx skills add dylantarre/animation-principles --skill absolute-beginner -a claude-codeЧто делает Animation Principles - Absolute Beginner
Скилл разбирает двенадцать приёмов, которые придумали аниматоры Disney: сжатие и растяжение, подготовка, акцент, ключевые позы, инерция, замедление на входе и выходе, дуги, вторичное движение, тайминг, преувеличение, объёмный рисунок и привлекательность. Каждый пункт подан одной-двумя фразами с бытовым примером — мяч, машина у светофора, волосы при остановке.
Это не справочник по API и не набор готового кода. Скилл нужен, чтобы поймать общий язык: вы описываете агенту, что должно происходить на экране, и он опирается на те же термины. Внутри — один файл SKILL.md, никаких скриптов и зависимостей.
Автор советует не брать все двенадцать принципов сразу, а начать с одного-двух. Для рабочего проекта это разумно: если анимация дёргается, причина обычно в тайминге или в отсутствии подготовки, и разбирать её проще по одному приёму.
Какие задачи решает
- объяснить новичку, почему анимация выглядит дёрганой
- договориться с агентом о терминах движения
- выбрать, с какого принципа начать изучение
- разобрать прыжок или удар по шагам
- описать словами, что не так с движением в макете
Примеры запросов агенту
- Объясни принцип подготовки на примере кнопки, которая раскрывает меню
- Почему моя анимация прыжка выглядит неестественно? Разбери по принципам
- С чего начать, если я никогда не делал анимацию?
Как установить Animation Principles - Absolute Beginner
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-codenpx skills add dylantarre/animation-principles --skill absolute-beginner -a claude-code2Вручную: положить файлы
~/.claude/skills/absolute-beginner/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/absolute-beginner/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill absolute-beginner -a codex2Вручную: положить файлы
.agents/skills/absolute-beginner/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill absolute-beginner -a cursor2Вручную: положить файлы
.cursor/skills/absolute-beginner/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles absolute-beginner2Вручную: положить файлы
.github/skills/absolute-beginner/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill absolute-beginner -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/04-by-skill-level/absolute-beginnerВручную: положить файлы
.devin/skills/absolute-beginner/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill absolute-beginner -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора86
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о Animation Principles - Absolute Beginner
Как установить Animation Principles - Absolute Beginner в Claude?
Выполните npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-code. После этого файл скилла окажется по пути ~/.claude/skills/absolute-beginner/SKILL.md.
Что делает этот скилл?
Разбирает 12 принципов анимации простыми словами, с примерами из жизни. Агент опирается на них, когда вы обсуждаете движение в интерфейсе или игре.
Нужно ли знать что-то заранее?
Нет, скилл рассчитан на полного новичка. Автор советует начать с одного-двух принципов, а не разбирать все сразу.
Исходный текст
SKILL.md · MIT
--- name: Animation Principles - Absolute Beginner description: Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation --- # Your First Look at Animation Magic Animation makes drawings move in ways that feel real and fun. Disney animators discovered 12 tricks that make animation look great. Here they are in simple words: ## 1. Squash and Stretch Things squish when they hit something and stretch when they move fast. Drop a ball - it flattens on the ground, then bounces back round. ## 2. Anticipation Before a big move, there's a small move the other way. Before jumping up, you crouch down first. ## 3. Staging Put important things where people will see them. Like putting the main actor in a spotlight on stage. ## 4. Straight Ahead and Pose to Pose Two ways to draw: either draw every picture in order, or draw the important pictures first and fill in between. ## 5. Follow Through and Overlapping Action When you stop, your hair keeps moving. Different parts move at different times, not all at once. ## 6. Slow In and Slow Out Things speed up when starting and slow down when stopping. Like a car at a traffic light. ## 7. Arc Most things move in curves, not straight lines. Throw a ball - it makes a rainbow shape in the air. ## 8. Secondary Action Little movements that happen along with the main movement. Walking while whistling and swinging your arms. ## 9. Timing How fast or slow something happens changes how it feels. Fast = exciting. Slow = calm or heavy. ## 10. Exaggeration Make things bigger and more dramatic than real life. Cartoon characters can stretch their eyes wide when surprised. ## 11. Solid Drawing Make flat pictures look like they have weight and depth. Things should feel like you could pick them up. ## 12. Appeal Make characters interesting to watch. They should have something special that makes you want to keep looking. ## Remember You don't need to use all 12 at once. Start with one or two. The more you practice, the more natural they become.
© dylantarre · MIT · dylantarre/animation-principles