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

anticipation-payoff — скилл для Claude Code: как установить

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

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

Что делает anticipation-payoff

Скилл формулирует ментальную модель «подготовка — кульминация» по аналогии с шуткой и панчлайном в комедии. Каждое движение рассматривается как короткая история с завязкой, действием и развязкой. Правила раскладывают 12 классических принципов анимации через связку подготовки и отдачи: от сжатия и растяжения до тайминга, сценичности и траекторий.

Внутри заложены четыре типа подготовки: физическая, эмоциональная, средовая и комедийная. Также даны готовые эвристики для правок. Если отдача ощущается слабой, агент увеличивает длительность или масштаб подготовки. Когда движение выглядит слишком предсказуемым, скилл рекомендует отвлечь зрителя вторичным действием или перенести подготовку на окружающую среду.

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

  • рассчитать тайминг и длительность подготовки перед прыжком или ударом
  • исправить предсказуемую или слабую анимацию интерфейса
  • добавить реакцию окружения перед кульминацией сцены
  • настроить контраст между фазой накопления энергии и фазой отдачи

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

  • Анимируй кнопку подтверждения: добавь лёгкое сжатие перед нажатием и плавный отскок после него.
  • Сцена прыжка персонажа выглядит вялой. Проверь подготовку и предложи, как усилить отдачу.
  • Опиши ключевые позы для анимации удара сундука-ловушки с акцентом на подготовку и разрядку.

Как установить anticipation-payoff

1Через Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill anticipation-payoff -a claude-code

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

~/.claude/skills/anticipation-payoff/SKILL.md

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

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

Вопросы о anticipation-payoff

Как установить anticipation-payoff в Claude Code?

Выполните в терминале команду npx skills add dylantarre/animation-principles --skill anticipation-payoff -a claude-code. Также файл инструкции можно скопировать вручную по пути ~/.claude/skills/anticipation-payoff/SKILL.md.

Что делает скилл anticipation-payoff?

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

Что делать, если кульминация движения кажется слабой?

Инструкция советует продлить время подготовки, увеличить её масштаб или добавить реакцию окружения. Другой вариант — сделать контраст между подготовкой и финальным действием более резким.

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

SKILL.md · MIT
---
name: anticipation-payoff
description: Use when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.
---

# Anticipation & Payoff

Think like a comedian setting up a punchline. Every great moment is earned by what came before. The windup is half the pitch.

## Core Mental Model

Before animating any action, ask: **What prepares the audience for this?**

Anticipation isn't just physical preparation—it's a promise. You're telling the audience "something's coming" so they're primed to receive it. The payoff is keeping that promise with interest.

## The 12 Principles Through Setup-Delivery

**Anticipation** — The principle itself. Before going right, go left. Before jumping up, crouch down. The opposite direction creates spring-loaded energy.

**Timing** — Setup needs time to register. Rush the anticipation and the payoff feels random. Hold it too long and tension deflates. Find the sweet spot.

**Staging** — Frame the anticipation so it's unmissable. The audience can't appreciate a payoff they weren't prepared for. Clear staging of setup = satisfying delivery.

**Exaggeration** — Push the anticipation to heighten payoff. A bigger windup = bigger impact. But match scales—extreme setup needs extreme delivery.

**Follow Through & Overlapping Action** — Payoff has aftermath. The action doesn't end at impact; it resolves through settling motion. Let consequences play out.

**Secondary Action** — Setup through supporting elements. Environment reacts to gathering energy. Other characters notice. Secondary actions can foreshadow the main event.

**Slow In & Slow Out** — Ease into anticipation (building tension), snap through the action (release), ease out of payoff (resolution). The rhythm of drama.

**Squash & Stretch** — Compression before extension. Squash is stored energy (setup). Stretch is released energy (payoff). Physical metaphor for narrative structure.

**Arcs** — Setup and payoff follow complementary arcs. The anticipation arc winds backward; the action arc springs forward. Together they form a complete gesture.

**Appeal** — Well-structured anticipation-payoff is inherently satisfying. Audiences love the rhythm of setup and delivery. It's why jokes work.

**Straight Ahead & Pose to Pose** — Plan your key moments: anticipation pose, action peak, payoff pose. Then connect them. Know your destination before you travel.

**Solid Drawing** — Maintain volume through the sequence. The same character in setup and payoff must read as the same mass. Consistency grounds the action.

## Practical Application

**Types of Anticipation:**
- Physical: Crouch before jump, pullback before throw
- Emotional: Inhale before outburst, stillness before action
- Environmental: Quiet before storm, calm before chaos
- Comedic: Pause before punchline, look before double-take

**Payoff Techniques:**
- Exceed expectation: Deliver more than the setup promised
- Subvert expectation: Deliver something unexpected (comedy)
- Delay gratification: Multiple anticipations before one big payoff
- Instant release: Snap from full anticipation to peak action

When payoff feels "weak":
1. Extend anticipation duration
2. Increase anticipation magnitude
3. Add secondary anticipation cues
4. Sharpen the contrast between setup and action

When setup feels "telegraphed":
1. Reduce anticipation duration
2. Distract with secondary action
3. Use environmental anticipation instead of character
4. Let payoff extend beyond expectation

## The Golden Rule

**Every action is a tiny story: beginning, middle, end.** Anticipation is "once upon a time," action is "and then," payoff is "the end." Skip any chapter and the story fails.

© dylantarre · MIT · dylantarre/animation-principles

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

Всё по теме «Дизайн» →
animation-principles iart-ai Скилл задаёт физику и тайминги интерфейсной анимации. Он выдаёт точные кривые cubic-bezier, задержки шагов и длительности в миллисекундах. CX Codex +1 3 000установок review-animations emilkowalski Проверяет код интерфейсных анимаций по принципам Эмиля Ковальски. Помогает убрать дерганые переходы, медленный ease-in и лишнюю нагрузку на процессор. CX Codex +1 256 500установок apple-design emilkowalski Переносит принципы физического интерфейса Apple с докладов WWDC в веб на CSS, Pointer Events и Motion. Пригодится при верстке жестов, шторки и прерываемых пружин. CX Codex +1 244 500установок transitions-polish Jakubantalik Скилл проверяет уже существующие анимации и подбирает токены для времени, расстояния, масштаба, blur и easing. Пригодится для точной настройки motion. CX Codex +1 10 800установок top-design wondelai Скилл направляет агента на создание веб-интерфейсов уровня Awwwards с акцентной типографикой, выверенной анимацией и оценкой макета по десятибалльной шкале. CX Codex +1 7 100установок motion-framer freshtechbro Помогает агенту добавлять анимации Motion и Framer Motion в React-интерфейсы: от эффектов наведения до переходов между состояниями. CX Codex +1 5 900установок

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

slow-in-out-mastery Скилл для ИИ-агента, который подсказывает, какую кривую ускорения и замедления выбрать в анимации интерфейса или персонажа. CX Codex +1 520установок brand-consistency Скилл разбирает анимацию, которая выбивается из стиля бренда, и подсказывает, что поправить: тайминги, кривые, уровень выразительности. CX Codex +1 520установок attention-grabbers Скилл для ИИ-агента, который подсказывает, как делать пульсации бейджей, тряску ошибок и подсветку новых функций по принципам Disney. CX Codex +1 519установок appeal-mastery Скилл про appeal — качество, из-за которого на анимацию хочется смотреть. Помогает проектировать персонажей, микро-взаимодействия и переходы так, чтобы они читались и запоминались. CX Codex +1 519установок performance-optimization Помогает находить и устранять просадки FPS и рывки в анимациях интерфейса по принципам Диснея. CX Codex +1 516установок react-spring Скилл показывает, как собрать все 12 принципов анимации Disney на физике пружин React Spring — с готовыми примерами под каждый принцип. CX Codex +1 516установок anticipation-mastery Скилл объясняет принцип anticipation и подсказывает агенту, где добавить подготовительное движение, чтобы анимация не выглядела резкой. CX Codex +1 516установок enterprise-b2b Скилл задаёт правила анимации для B2B-интерфейсов и панелей управления. Помогает выстроить переходы и тайминги без лишней декоративности. CX Codex +1 515установок

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

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