Emil Kowalski Skills: анимация, жесты и мобильный UI

Emil Kowalski 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 причину и область действия решения, периодически удаляя устаревшие исключения.

Установка

npx skills@latest add emilkowalski/skills

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

Ограничения

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

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

Impeccable охватывает интерфейс шире — от типографики до ошибок и адаптивности. Vercel Agent Skills добавляет правила React/Next.js и общего UI-кода. Emil Kowalski Skills даёт наиболее глубокий специализированный контур для motion, жестов и мобильного поведения.