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

universal-practitioner — скилл для Claude Code: 12 принципов анимации

Скилл, который применяет 12 принципов анимации Диснея к интерфейсам, текстам и продуктовым решениям — не только к мультипликации.

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

Что делает universal-practitioner

Скилл описывает 12 принципов анимации и переводит каждый в общее правило: squash and stretch показывает, что объект реагирует на воздействие; anticipation готовит к переменам; staging требует одной ясной мысли за раз. Дальше идёт таблица применений — в письме, презентации, продукте, руководстве, преподавании, продажах, дизайне.

Внутри один файл SKILL.md с разбором принципов и мета-принципом: всё сводится к эмпатии к тому, кто это смотрит. Агент обращается к скиллу, когда нужен общий взгляд на принципы анимации в любом контексте и для любой роли.

Полезно, когда вы просите агента оживить интерфейс, но не хотите получать список из двенадцати пунктов без связи с задачей. Скилл задаёт рамку, а не готовые значения таймингов.

Какие задачи решает

  • объяснить, почему кнопка должна реагировать на нажатие
  • выстроить переход между состояниями экрана без рывка
  • выбрать между свободным прототипированием и жёсткой структурой
  • показать последствия изменения в одном месте системы
  • сделать акцент на главном, убрав лишнее из кадра

Примеры запросов агенту

  • Примени принципы анимации к этому экрану: где не хватает anticipation и follow through?
  • Разбери этот переход по slow in и slow out — что подкрутить?
  • Используй universal-practitioner, чтобы оценить сценарий онбординга

Как установить universal-practitioner

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill universal-practitioner -a claude-code

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

~/.claude/skills/universal-practitioner/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

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

small-200-300ms Скилл подсказывает агенту, как строить переходы длительностью 200–300 мс: появление модалок, раскрытие карточек, слайды навигации. CX Codex +1 482установок trust-reliability Скилл для анимаций, которые вызывают доверие: предсказуемые движения, спокойные тайминги, никаких сюрпризов. Пригодится в платежах, формах и настройках. CX Codex +1 483установок product-manager Помогает продакт-менеджеру решить, какие анимации в приложении стоят разработки, а какие можно отложить. CX Codex +1 481установок universal-tool Скилл, который подсказывает агенту 12 принципов анимации Диснея при работе с любым инструментом или фреймворком. CX Codex +1 482установок accessibility-issues Разбирает анимацию, которая мешает людям с вестибулярными нарушениями, когнитивной перегрузкой или скринридером, и подсказывает, что чинить. CX Codex +1 478установок ux-friction Скилл для диагностики анимаций, из-за которых пользователь ждёт, путается или бросает задачу. Пригодится, когда интерфейс тормозит из-за переходов. CX Codex +1 479установок slow-800-1200ms Скилл для ИИ-кодинга, который помогает делать намеренно медленную анимацию 800–1200 мс: драматичные появления, загрузочные сцены, моменты, где пользователь должен остановиться и посмотреть. CX Codex +1 474установок universal-mindset Скилл задаёт способ разбирать анимационные задачи через историю, движение, ритм и внимание зрителя. Пригодится, когда специализированный подход не подходит. CX Codex +1 472установок

Похожие

micro-interaction-spec Owl-Listener Описывает одну микромикровзаимодействие целиком: триггер, правила, отклик, циклы и режимы. Пригодится, когда пора передать её в разработку. CX Codex +1 2 300установок design-with-taste cristicretu Скилл задаёт агенту правила дизайна: постепенное раскрытие интерфейса, плавные переходы и акценты. Пригодится, когда нужно, чтобы вёрстка не выглядела шаблонной. CX Codex +1 758установок prototype emilkowalski Скилл собирает несколько по-настоящему разных вариантов одного куска UI и ставит их за визуальный пикер: переключаете на ходу и выбираете тот, что нравится больше. CX Codex +1 174 300установок animation-principles Owl-Listener Скилл для настройки одной конкретной анимации в интерфейсе: подбирает easing, длительность и порядок движения элементов. CX Codex +1 2 200установок hallmark Nutlope Скилл для ИИ-кодинга, который заставляет сгенерированные интерфейсы выглядеть сделанными, а не сгенерированными. Пригодится, когда просишь агента собрать новую страницу или сайт. CX Codex +1 70 800установок mies deeflect Скилл для ИИ-кодинга, который заставляет агента убирать лишнее в интерфейсах и доводить детали до аккуратности. Пригодится, когда верстаете UI, дашборд или онбординг. CX Codex +1 9 600установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о universal-practitioner

Как установить universal-practitioner в Claude?

Выполните npx skills add dylantarre/animation-principles --skill universal-practitioner -a claude-code. Файл скилла окажется по пути ~/.claude/skills/universal-practitioner/SKILL.md.

Что делает universal-practitioner?

Разбирает 12 принципов анимации Диснея и показывает, как применять их за пределами анимации: в текстах, презентациях, продукте и дизайне.

Скилл только про анимацию?

Нет. Внутри есть таблица кросс-доменных применений, а мета-принцип сводится к вопросу, служит ли решение тому, кто его воспринимает.

Исходный текст

SKILL.md · MIT
---
name: universal-practitioner
description: Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.
---

# Universal Practitioner: Animation Principles for Everyone

You apply Disney's 12 Animation Principles across any domain. These principles transcend animation—they're about bringing life and clarity to any experience.

## The 12 Principles: Universal Application

### 1. Squash and Stretch
**Principle**: Flexibility indicates life; rigidity indicates death.
**Universal Truth**: Show that things are affected by forces. Buttons respond to clicks. Arguments bend under pressure. Ideas flex to circumstances.
**Apply When**: You need to convey that something is alive, responsive, or affected by interaction.

### 2. Anticipation
**Principle**: Prepare the audience for what's coming.
**Universal Truth**: People understand better when they're ready. Announce changes. Build up to reveals. Signal before acting.
**Apply When**: Before any significant change, action, or revelation.

### 3. Staging
**Principle**: Present one clear idea at a time.
**Universal Truth**: Clarity requires focus. Remove distractions. Highlight what matters. Guide attention deliberately.
**Apply When**: Communicating anything important—one thing, clearly, completely.

### 4. Straight Ahead vs Pose to Pose
**Principle**: Spontaneous flow vs planned precision.
**Universal Truth**: Some work needs organic discovery (brainstorming). Some needs careful structure (execution). Know which mode you're in.
**Apply When**: Choosing between exploration and implementation approaches.

### 5. Follow Through and Overlapping Action
**Principle**: Actions have consequences that ripple outward.
**Universal Truth**: Nothing exists in isolation. Changes cascade. Effects follow causes. Consider the ripples.
**Apply When**: Analyzing impact, designing systems, understanding consequences.

### 6. Slow In and Slow Out
**Principle**: Ease into and out of states.
**Universal Truth**: Transitions matter. Don't jolt between states. Gradual shifts feel natural; abrupt changes feel jarring.
**Apply When**: Managing change, onboarding, transitions of any kind.

### 7. Arc
**Principle**: Natural movement follows curves.
**Universal Truth**: Life isn't linear. Growth curves. Learning curves. Story arcs. Honor the natural shape of progress.
**Apply When**: Planning journeys, narratives, progressions, or paths.

### 8. Secondary Action
**Principle**: Supporting details that reinforce the main point.
**Universal Truth**: Primary message needs supporting evidence. Main action needs context. Big ideas need small details.
**Apply When**: Reinforcing messages, adding depth, building credibility.

### 9. Timing
**Principle**: Speed communicates weight and importance.
**Universal Truth**: Pacing affects perception. Fast feels urgent or trivial. Slow feels important or boring. Match timing to meaning.
**Apply When**: Presentations, conversations, reveals, any communication.

### 10. Exaggeration
**Principle**: Push beyond normal for clarity.
**Universal Truth**: Sometimes subtlety obscures. Make differences visible. Amplify distinctions. Don't let important things go unnoticed.
**Apply When**: Making contrasts clear, emphasizing key points, breaking through noise.

### 11. Solid Drawing
**Principle**: Understand structure and maintain consistency.
**Universal Truth**: Know the fundamentals. Maintain internal logic. Build on solid foundations. Consistency builds trust.
**Apply When**: Establishing systems, building credibility, maintaining standards.

### 12. Appeal
**Principle**: Make things people want to engage with.
**Universal Truth**: Craft matters. Quality attracts. Attention to detail signals care. People choose appealing options.
**Apply When**: Everything. Always. Appeal isn't decoration—it's respect for your audience.

## Cross-Domain Applications

| Domain | Example Application |
|--------|-------------------|
| Writing | Anticipation in opening hooks |
| Presentation | Staging for slide composition |
| Product | Timing for feature rollouts |
| Leadership | Follow-through on commitments |
| Teaching | Exaggeration for key concepts |
| Sales | Arc in customer journey |
| Design | Appeal in every touchpoint |

## The Meta-Principle

These 12 principles share one root: **empathy for the audience**. Every principle exists to make the experience clearer, more engaging, more human.

When in doubt, ask: "Does this serve the person experiencing it?"

That question applies to animation, code, products, presentations, and life.

© dylantarre · MIT · dylantarre/animation-principles

Смотрите также

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

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