---
title: "Emil Kowalski Skills: анимация, жесты и мобильный UI"
description: Коллекция Эмиля Ковальски для проектирования и ревью анимации, производительности движения, мобильных жестов, устойчивого UI и накопления дизайн-опыта.
---

[Emil Kowalski Skills](https://github.com/emilkowalski/skills) — MIT-коллекция для дизайнеров и инженеров, основанная на опыте работы Эмиля Ковальски над интерфейсами Vercel и Linear. Её специализация — не общий визуальный стиль, а небольшие решения, из которых складывается ощущение качества: кривая и длительность анимации, поведение жеста, полупрозрачная тень вместо жёсткой границы, реакция на касание и устойчивость к неудобным данным.

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

## Группы навыков

**Создание движения.** `animate` выбирает свойства, длительность и easing для новой анимации. `animate-expo` переносит эти требования в React Native и Expo, включая haptics и выполнение движения вне JS thread. `gestures` описывает drag, swipe и sheets, которые следуют за пальцем, сохраняют скорость отпускания и позволяют перехватить анимацию посередине.

**Хореография и ревью.** `choreograph` определяет ведущие и ведомые элементы, параллельные движения и объекты, которые должны остаться неподвижными. `review-animations` проверяет конкретную реализацию, а `improve-animations` обследует кодовую базу и формирует приоритизированные самостоятельные планы исправлений.

**Умеренность.** `find-animation-opportunities` ищет места, где движение действительно объясняет изменение, а `remove-animations` удаляет ненужные fade-in, задержки и анимации на каждое действие. Это важная пара: навык должен уметь не только добавлять эффекты, но и отказываться от них.

**Производительность и словарь.** `animation-performance` разбирает причины потери кадров, а `animation-vocabulary` помогает точнее формулировать желаемое поведение при работе с AI. `apple-design` переводит принципы интерфейсов и движения Apple из материалов WWDC в веб-контекст.

**Практический UI.** `prototype` создаёт несколько версий элемента с переключателем. `mobile-native` устраняет типовые различия между сайтом и мобильным приложением: sticky hover, вспышки tap highlight, проблему `100vh`, zoom на inputs, задержку касаний и safe areas. `break-ui` проверяет интерфейс длинными именами, необычными email, пустыми списками, большими числами и короткими значениями.

**Библиотеки и обучение.** `pick-ui-library` помогает выбрать проверенную библиотеку вместо самодельного toast или заброшенного пакета. `ask-sonner` посвящён библиотеке Sonner. `learn-taste` собирает дизайнерские исправления пользователя и превращает их в правила с причинами в `DESIGN.md`.

## Как встроить в процесс

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

Для каждой анимации проверяйте:

- какое изменение состояния она объясняет;
- как ведёт себя при быстром повторном действии и прерывании;
- не блокирует ли клавиатуру, чтение и ввод;
- что происходит при `prefers-reduced-motion`;
- остаётся ли итоговое состояние правильным даже без анимации.

`learn-taste` удобно запускать после завершённой итерации, но не стоит автоматически превращать любое локальное предпочтение в вечное правило. Записывайте в [DESIGN.md](https://wpcraft.ru/kb/design/ai/design-md.md) причину и область действия решения, периодически удаляя устаревшие исключения.

## Установка

```bash
npx skills@latest add emilkowalski/skills
```

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

## Ограничения

Коллекция усиливает экспертизу, но не заменяет её. Правильная кривая не исправит ошибочный сценарий, а высокая частота кадров не сделает ненужную анимацию полезной. Часть рекомендаций тесно связана с React, Expo и конкретными библиотеками; перед применением к другому стеку нужно сохранить принцип, а не копировать реализацию буквально.

## Чем отличается от других инструментов

[Impeccable](https://wpcraft.ru/kb/design/ai/skills/impeccable.md) охватывает интерфейс шире — от типографики до ошибок и адаптивности. [Vercel Agent Skills](https://wpcraft.ru/kb/design/ai/skills/vercel-agent-skills.md) добавляет правила React/Next.js и общего UI-кода. Emil Kowalski Skills даёт наиболее глубокий специализированный контур для motion, жестов и мобильного поведения.

## Материалы и источники

- [Официальный репозиторий Emil Kowalski Skills](https://github.com/emilkowalski/skills)
- [Каталог навыков и примеры](https://aiforui.dev/skills)
- [Agents with Taste](https://emilkowal.ski/ui/agents-with-taste)
- [Practical Animation Tips](https://emilkowal.ski/ui/7-practical-animation-tips)