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

product-manager — скилл для Claude Code: приоритеты анимации

Помогает продакт-менеджеру решить, какие анимации в приложении стоят разработки, а какие можно отложить.

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

Что делает product-manager

Скилл включается, когда вы расставляете приоритеты для анимационных фич или собираете motion-роадмап. Внутри — разбор 12 принципов анимации Disney, но не с художественной стороны, а с деловой: у каждого принципа указана ценность для продукта и приоритет.

Например, тайминги и подготовка к действию (anticipation) отнесены к обязательным, потому что влияют на удобство: подсказка перед нажатием снижает число случайных отправок и обращений в поддержку. Плавное ускорение и замедление попадает в категорию «стоит сделать» — воспринимаемая скорость растёт без доработок бэкенда. Второстепенные действия, дуги и утрирование идут в слой «приятно иметь» и добавляются после основной функциональности.

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

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

  • разложить анимационные фичи по приоритетам
  • объяснить команде деловую ценность каждого принципа
  • собрать motion-роадмап на квартал
  • защитить бюджет на анимации перед стейкхолдерами
  • заложить reduced-motion в объём работ заранее

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

  • Помоги расставить приоритеты для анимаций в новом онбординге
  • Собери motion-роадмап: что делаем в первую очередь, что позже
  • Какие принципы анимации дадут измеримый эффект в B2B-дашборде?

Как установить product-manager

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill product-manager -a claude-code

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

~/.claude/skills/product-manager/SKILL.md

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

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

Вопросы о product-manager

Как установить product-manager в Claude?

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

Что делает product-manager?

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

С какими платформами работает скилл?

Кроме Claude он ставится в Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode — команда установки отличается только флагом агента.

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

SKILL.md · MIT
---
name: product-manager
description: Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.
---

# Product Manager: Animation ROI & Strategy

You are a product manager evaluating animation investments. Apply Disney's 12 principles to drive measurable business outcomes.

## The 12 Principles for Product Strategy

### 1. Squash and Stretch
**Value**: Increases perceived quality and responsiveness. Users rate "squishy" interactions as more premium.
**Priority**: High for consumer apps, medium for B2B. Quick win—CSS-only implementation.

### 2. Anticipation
**Value**: Reduces user errors, decreases support tickets. Pre-action cues prevent accidental submissions.
**Priority**: High for destructive actions (delete, purchase). Measure: error rate reduction, support volume.

### 3. Staging
**Value**: Improves feature discovery and onboarding completion. Guided attention increases activation.
**Priority**: Critical for new user flows. Track: onboarding funnel completion, time-to-value.

### 4. Straight Ahead vs Pose to Pose
**Value**: Development efficiency trade-off. Pose to pose = predictable timeline, easier QA. Straight ahead = creative flexibility, harder to estimate.
**Priority**: Process decision—establish which approach for which feature type.

### 5. Follow Through and Overlapping Action
**Value**: Content hierarchy comprehension. Users understand information architecture through motion sequencing.
**Priority**: High for complex dashboards, data-heavy interfaces. Metric: task completion rate.

### 6. Slow In and Slow Out
**Value**: Perceived performance improvement. Proper easing makes apps feel faster without backend optimization.
**Priority**: High ROI—no infrastructure cost. Quick implementation with significant perception gains.

### 7. Arc
**Value**: Premium feel differentiation. Curved paths distinguish from competitors using linear motion.
**Priority**: Medium—brand differentiator. Consider for flagship interactions, hero moments.

### 8. Secondary Action
**Value**: Emotional engagement without feature cost. Micro-interactions increase delight metrics.
**Priority**: Low initial, high polish phase. Add after core functionality. Track: NPS, retention correlation.

### 9. Timing
**Value**: Performance perception. 200ms transitions feel instant. Poor timing feels broken.
**Priority**: Critical foundation. Establish timing system early. Technical debt if ignored.

### 10. Exaggeration
**Value**: Feature noticeability. New features need attention-grabbing introduction before settling to subtle.
**Priority**: High for feature launches, notifications. Balance against accessibility requirements.

### 11. Solid Drawing
**Value**: Spatial consistency reduces cognitive load. Users navigate faster with predictable spatial behavior.
**Priority**: Architecture decision. Define spatial system in design system. Long-term efficiency.

### 12. Appeal
**Value**: Brand equity and trust. Polished animation correlates with perceived reliability.
**Priority**: Table stakes for consumer, differentiator for B2B. Competitive analysis metric.

## Prioritization Framework

**Must Have**: Timing, Staging, Anticipation (usability impact)
**Should Have**: Easing, Follow-through (perception improvement)
**Nice to Have**: Secondary action, Arc, Exaggeration (delight layer)

Always include reduced-motion alternative in scope.

© dylantarre · MIT · dylantarre/animation-principles

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

Всё по теме «Дизайн» →
product-taste RefoundAI Скилл помогает разбирать, почему продукт ощущается качественным, и принимать решения до того, как появятся метрики. CX Codex +1 397установок prioritization-frameworks phuryn Справочник по 9 фреймворкам приоритизации: RICE, ICE, Opportunity Score, Kano, MoSCoW и другие. Помогает выбрать подходящий метод, сравнить подходы и расставить задачи по значимости. CX Codex +1 9 900установок prioritization-advisor deanpeters Помогает выбрать фреймворк приоритизации под стадию продукта и состав команды, а потом объясняет, как его внедрить. Пригодится, когда RICE, ICE и value/effort кажутся одинаково разумными. CX Codex +1 3 100установок prioritize-features phuryn Сортирует идеи функций по влиянию, трудозатратам, риску и связи с целями продукта. Пригодится для выбора пяти приоритетов и решений по объёму работ. CX Codex +1 2 900установок define-prioritization-framework product-on-purpose Ранжирует список инициатив сразу по нескольким методикам и находит расхождения в оценках. Пригодится продакт-менеджерам перед формированием квартального бэклога. CX Codex +1 641установок roadmap-prioritization RefoundAI Помогает превратить хаотичный бэклог в план по ROI: скоринг RICE или DRICE, баланс портфеля и черновик роадмапа. Пригодится продакту, который тонет в запросах. CX Codex +1 419установок

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

large-500-800ms Скилл для ИИ-агента, который подсказывает, как строить длинные анимации на 500–800 мс: переходы hero-блоков, сложные раскрытия, сцены, которые должны запомниться. CX Codex +1 485установок motion-sickness Помогает найти и убрать в интерфейсе анимации, от которых кружится голова: параллакс, зум, вращение. Пригодится, когда пользователи жалуются на тошноту при навигации. CX Codex +1 483установок small-200-300ms Скилл подсказывает агенту, как строить переходы длительностью 200–300 мс: появление модалок, раскрытие карточек, слайды навигации. CX Codex +1 482установок trust-reliability Скилл для анимаций, которые вызывают доверие: предсказуемые движения, спокойные тайминги, никаких сюрпризов. Пригодится в платежах, формах и настройках. CX Codex +1 483установок universal-tool Скилл, который подсказывает агенту 12 принципов анимации Диснея при работе с любым инструментом или фреймворком. CX Codex +1 482установок universal-practitioner Скилл, который применяет 12 принципов анимации Диснея к интерфейсам, текстам и продуктовым решениям — не только к мультипликации. CX Codex +1 480установок accessibility-issues Разбирает анимацию, которая мешает людям с вестибулярными нарушениями, когнитивной перегрузкой или скринридером, и подсказывает, что чинить. CX Codex +1 478установок ux-friction Скилл для диагностики анимаций, из-за которых пользователь ждёт, путается или бросает задачу. Пригодится, когда интерфейс тормозит из-за переходов. CX Codex +1 479установок

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

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