Animation Principles - Universal Reference — скилл для Claude Code
Справочник по 12 классическим принципам анимации Диснея с разбором для новичков и опытных специалистов. Помогает агенту подбирать точную глубину ответа.
npx skills add dylantarre/animation-principles --skill animation-principles---universal-reference -a claude-code
npx skills add dylantarre/animation-principles --skill universal-reference -a claude-codeЧто делает Animation Principles - Universal Reference
Скилл добавляет в контекст классические 12 принципов анимации Диснея. Каждый принцип разобран в четырёх плоскостях: основная суть, простое объяснение для начинающих, технические нюансы для опытных специалистов и ключевой вывод. Это помогает модели калибровать глубину терминов, когда опыт собеседника заранее неизвестен.
Материал сгруппирован по четырём категориям: физика движения, визуальная ясность, выразительность и метод компоновки. Описание детально разбирает сохранение объёма при сжатии, тест силуэта, иерархию задержек и кастомные кривые замедления вроде snap или bounce. Прямые траектории движения скилл советует использовать только при наличии специального обоснования.
Скрипты и ключи API не требуются.
Какие задачи решает
- объяснить динамику движения через 12 диснеевских принципов
- адаптировать терминологию анимации под опыт разработчика
- структурировать анимационные задачи по физике, ясности или выразительности
- подобрать кривые замедления и тайминг для интерфейсных состояний
Примеры запросов агенту
- Объясни принцип Slow In and Slow Out для новичка на примере CSS-переходов.
- Как применить Staging и Anticipation при появлении диалогового окна?
- Разбери вторичное действие (Secondary Action) и тайминг для анимации спиннера.
Как установить Animation Principles - Universal Reference
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill animation-principles---universal-reference -a claude-codenpx skills add dylantarre/animation-principles --skill universal-reference -a claude-code2Вручную: положить файлы
~/.claude/skills/universal-reference/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/universal-reference/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-reference -a codex2Вручную: положить файлы
.agents/skills/universal-reference/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-reference -a cursor2Вручную: положить файлы
.cursor/skills/universal-reference/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles universal-reference2Вручную: положить файлы
.github/skills/universal-reference/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-reference -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/04-by-skill-level/universal-referenceВручную: положить файлы
.devin/skills/universal-reference/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-reference -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о Animation Principles - Universal Reference
Как установить Animation Principles - Universal Reference в Claude Code?
Выполните команду npx skills add dylantarre/animation-principles --skill universal-reference -a claude-code. Также можно вручную сохранить файл по пути ~/.claude/skills/universal-reference/SKILL.md.
Зачем нужен этот справочник?
Он даёт агенту структурированные знания по 12 принципам анимации Диснея, помогая формулировать советы как для новичков, так и для продвинутых дизайнеров.
На какие группы разделены правила в скилле?
Все 12 принципов сгруппированы в четыре блока: физика (Physics), визуальная ясность (Clarity), выразительность (Interest) и метод создания (Method).
Исходный текст
SKILL.md · MIT
--- name: Animation Principles - Universal Reference description: Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level --- # Animation Principles - Universal Reference Disney's 12 principles work at every skill level. Here's each principle with scalable depth. ## 1. Squash and Stretch **Core idea:** Objects deform to show motion and impact. **Beginner:** Ball flattens when it hits ground. **Advanced:** Volume must remain constant. Facial animation uses micro-squash for expression. **Key insight:** Even "rigid" objects can use the principle through camera shake or motion blur. ## 2. Anticipation **Core idea:** Prepare the viewer for action. **Beginner:** Crouch before jump. **Advanced:** Anticipation size controls audience expectation. Absence creates surprise. **Key insight:** Every action that needs to read clearly needs setup. ## 3. Staging **Core idea:** Present one clear idea at a time. **Beginner:** Put important things where viewers will look. **Advanced:** Silhouette test, negative space, compositional psychology. **Key insight:** Confusion is never the viewer's fault. ## 4. Straight Ahead and Pose to Pose **Core idea:** Two methods - sequential vs. key-pose-first. **Beginner:** Different ways to approach the same animation. **Advanced:** Choose based on need: control vs. spontaneity. Hybrid approaches for complex shots. **Key insight:** The method shapes the result's energy. ## 5. Follow Through and Overlapping Action **Core idea:** Different parts stop at different times. **Beginner:** Hair keeps moving after head stops. **Advanced:** Drag, settle, overlap hierarchy. Emotional implications of follow through weight. **Key insight:** Simultaneous stopping looks robotic. ## 6. Slow In and Slow Out **Core idea:** Things accelerate and decelerate. **Beginner:** More drawings at start and end, fewer in middle. **Advanced:** Custom easing curves. Snap, bounce, drift variations. **Key insight:** Even spacing reads mechanical. ## 7. Arc **Core idea:** Natural motion follows curves. **Beginner:** Arms swing in arcs, not straight lines. **Advanced:** Track all motion paths. Breaking arcs intentionally for mechanical/sudden effects. **Key insight:** Straight paths require justification. ## 8. Secondary Action **Core idea:** Additional movement supporting the main action. **Beginner:** Whistling while walking. **Advanced:** Can create emotional counterpoint. Must support, never compete. **Key insight:** If it distracts, remove it. ## 9. Timing **Core idea:** Frame count creates weight, mood, meaning. **Beginner:** Fast = light/quick. Slow = heavy/deliberate. **Advanced:** Frame-level sensitivity. Same pose, different timing = different meaning. **Key insight:** Timing is the acting. ## 10. Exaggeration **Core idea:** Push reality further for clarity and impact. **Beginner:** Bigger reactions than real life. **Advanced:** Style-calibrated exaggeration. Finding essence to amplify. **Key insight:** Usually push further than instinct suggests. ## 11. Solid Drawing **Core idea:** Create sense of three-dimensional form. **Beginner:** Make drawings feel like they have weight and depth. **Advanced:** Consistent volume through motion. Strategic flatness for graphic impact. **Key insight:** Viewers have touched things their whole lives. Drawings should feel touchable. ## 12. Appeal **Core idea:** Make characters compelling to watch. **Beginner:** Interesting, clear, distinctive design. **Advanced:** Appeal isn't beauty - villains need it too. Compelling through any aesthetic. **Key insight:** Would you want to keep watching? ## Principle Groups **Physics:** 1, 5, 6, 7, 9 | **Clarity:** 2, 3, 11 | **Interest:** 8, 10, 12 | **Method:** 4
© dylantarre · MIT · dylantarre/animation-principles