# universal-timing

Скилл про тайминги анимации: правила, которые работают и на 50 мс, и на 5000 мс. Пригодится, когда нужно выбрать длительность и кривую, а не угадывать.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 476 установок · ★ 129
- Автор: dylantarre
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/10-by-time-scale/universal-timing/SKILL.md
- Обновлён: 2025-12-30
- HTML: https://affpapa.org/nevibecode/skills/universal-timing

## Что делает

Скилл разбирает принципы анимации, которые не зависят от длительности. Squash & stretch масштабируется пропорционально: 5% на 100 мс, 30% на 2000 мс. Anticipation держит постоянную долю — 20–30% от основной фазы, сколько бы она ни длилась. Slow in/slow out нужен всегда, потому что линейное движение выглядит механически на любой скорости.

Внутри есть универсальные пропорции. Соотношение фаз anticipation : action : follow-through — 20% : 50% : 30%, для 500 мс это 100 мс, 250 мс и 150 мс. Задержка стаггера — 10–20% от длительности элемента: при 300 мс это 30–60 мс между элементами. Отдельно расписано, когда уместен ease-in: до 150 мс остаётся только ease-out, полный ease-in-out возможен от 400 мс. Даны готовые `cubic-bezier` для CSS.

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

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill universal-timing -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/universal-timing/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/universal-timing/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill universal-timing -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/universal-timing/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill universal-timing -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/universal-timing/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles universal-timing
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/universal-timing/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill universal-timing -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/10-by-time-scale/universal-timing
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/universal-timing/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill universal-timing -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/10-by-time-scale/universal-timing/SKILL.md

## Когда брать
- выбрать длительность анимации под нужное ощущение
- посчитать доли anticipation и follow-through от общего времени
- подобрать задержку стаггера для списка элементов
- понять, когда ease-in ещё не имеет смысла
- проверить анимацию на крайних скоростях

## Примеры запросов агенту
- Подбери тайминги для появления карточки за 300 мс по принципам universal-timing
- Посчитай anticipation, action и follow-through для анимации длительностью 500 мс
- Какую кривую cubic-bezier взять для выезда панели за 120 мс?

## Похожие
- [animation-principles](https://affpapa.org/nevibecode/skills/animation-principles.md) — скилл · 3000 установок
- [improve-animations](https://affpapa.org/nevibecode/skills/improve-animations.md) — скилл · 224200 установок
- [animate](https://affpapa.org/nevibecode/skills/animate.md) — скилл · 172700 установок
- [better-ui](https://affpapa.org/nevibecode/skills/better-ui.md) — скилл · 39300 установок
- [micro-interaction](https://affpapa.org/nevibecode/skills/micro-interaction.md) — скилл · 2500 установок
- [interface-kit](https://affpapa.org/nevibecode/skills/interface-kit.md) — скилл · 2200 установок

Из того же набора: [dylantarre/animation-principles](https://affpapa.org/nevibecode/by/dylantarre/animation-principles.md) — 142 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md