product-manager — скилл для Claude Code: приоритеты анимации
Помогает продакт-менеджеру решить, какие анимации в приложении стоят разработки, а какие можно отложить.
npx skills add dylantarre/animation-principles --skill product-manager -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/product-manager/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/product-manager/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill product-manager -a codex2Вручную: положить файлы
.agents/skills/product-manager/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill product-manager -a cursor2Вручную: положить файлы
.cursor/skills/product-manager/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles product-manager2Вручную: положить файлы
.github/skills/product-manager/SKILL.md1Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill product-manager -a gemini-cli2Командой платформы
gemini skills install https://github.com/dylantarre/animation-principles --path skills/03-by-role-persona/product-managerВручную: положить файлы
.devin/skills/product-manager/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill product-manager -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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