# motion-principles

Скилл задаёт правила интерфейсной анимации: безопасные свойства, тайминги, кривые разгона и режим reduced-motion для веба, SwiftUI и Jetpack Compose.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 установок · ★ 677
- Автор: AThevon
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/AThevon/genjutsu/tree/HEAD/skills/_jutsu/motion-principles/SKILL.md
- Обновлён: 2026-10-05
- HTML: https://affpapa.org/nevibecode/skills/motion-principles

## Что делает

Скилл формулирует правила движения для интерфейсов на вебе и в мобильных приложениях. Внутри собраны таблицы таймингов под микродействия вроде переключателей (100–150 мс) и экранные переходы (до 500 мс). Главный принцип частоты прост. Чем чаще срабатывает действие, тем быстрее и незаметнее должен быть эффект.

Набор запретов отсекает частые ошибки вёрстки. Скилл запрещает анимировать `width`, `height`, `top` или `left`, так как это запускает перерасчёт раскладки на каждом кадре и вызывает лаги. Вместо этого он переводит анимации на `transform`, `offset` или `graphicsLayer`. Элементы при скрытии не сжимаются до `scale(0)`, а плавно уходят через `scale(0.95)` с затуханием прозрачности.

Поддержка reduced-motion здесь обязательна. Правила включают готовые сниппеты для CSS, хуков SwiftUI и Compose. Обратите внимание: данные привязаны к ревизии от 2026-09-08 в `_jutsu/VERSIONS.md`, поэтому перед переносом в продакшен стоит сверить версии библиотек с первоисточниками.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill motion-principles -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill motion-principles -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill motion-principles -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install AThevon/genjutsu motion-principles
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill motion-principles -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/AThevon/genjutsu --path skills/_jutsu/motion-principles
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add AThevon/genjutsu --skill motion-principles -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/AThevon/genjutsu/tree/HEAD/skills/_jutsu/motion-principles/SKILL.md

## Когда брать
- подобрать длительность и кривую разгона для модального окна или тултипа
- переписать анимацию размера на аппаратные свойства трансформации
- настроить системный режим reduced-motion в CSS, SwiftUI или Jetpack Compose
- перенести параметры CSS-кривых в нативные пружины SwiftUI и Compose

## Примеры запросов агенту
- Настрой появление всплывающего окна по правилам motion-principles на чистом CSS
- Проверь карточку в SwiftUI: замени анимацию frame на offset и добавь проверку accessibilityReduceMotion
- Подбери параметры пружины в Jetpack Compose для закрытия бокового меню без масштабирования в ноль

## Похожие
- [design-motion-principles](https://affpapa.org/nevibecode/skills/design-motion-principles.md) — скилл · 12700 установок
- [motion-design](https://affpapa.org/nevibecode/skills/motion-design.md) — скилл · 19900 установок
- [motion-system](https://affpapa.org/nevibecode/skills/motion-system.md) — скилл · 1800 установок
- [accessible-motion](https://affpapa.org/nevibecode/skills/accessible-motion.md) — скилл · 640 установок
- [motion-sickness](https://affpapa.org/nevibecode/skills/motion-sickness.md) — скилл · 483 установки
- [animation-principles](https://affpapa.org/nevibecode/skills/animation-principles.md) — скилл · 3000 установок

Из того же набора: [athevon/genjutsu](https://affpapa.org/nevibecode/by/athevon/genjutsu.md) — 17 карточек

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

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