83.3K+Скачать
Перейти к руководству
emil-design-engавтор Emil Kowalski

Emil Design Eng Skill.

Skill для Claude Code и Codex для UX-исследований: философия emil Kowalski о полировке UI, дизайне компонентов и решениях по анимации.

  • UX и исследования
Скачать OpenDesignИнструкция по использованию
emilkowalski/skills · skills/emil-design-eng/SKILL.mdSKILL.md
--- name: emil-design-eng description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. --- ## Initial Response ## Core Philosophy ## Review Format (Required) ## The Animation Decision Framework ## Spring Animations ## Component Building Principles
Вводная часть и заголовки разделов прочитаны из исходного файла 2026-09-14 · 27 130 символов полностью

01 Что делает

Что делает skill emil-design-eng в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill даёт агентам для кода экспертное чутьё Эмиля Ковальски в области дизайн-инженерии интерфейсов: как решить, должен ли элемент анимироваться, какие easing и длительность использовать, и как создавать компоненты, ощущающиеся отзывчивыми. Он задаёт жёсткие значения по умолчанию — анимации интерфейса короче 300 мс, кастомные кривые cubic-bezier вместо встроенных CSS easing, никогда ease-in, никогда появление через scale(0), всплывающие окна масштабируются от точки вызова.

Он также охватывает пружины (springs), техники clip-path, обработку жестов и перетаскивания, правила производительности GPU, режим reduced motion и обязательную markdown-таблицу «До/После» для код-ревью. Он предназначен для дизайнеров и разработчиков, которым нужны решения по интерфейсу, основанные на вкусе, а не общие советы по анимации.

Что он выдаёт

  • Markdown-таблица ревью со столбцами «До», «После» и «Почему», по одной строке на каждую найденную проблему
  • Готовые для вставки CSS-переменные с рекомендуемыми кастомными кривыми easing
  • Объекты конфигурации пружин — либо в стиле Apple, либо традиционные физические параметры
  • Приоритизированный список правок, составленный по категориям чек-листа ревью
Смотрите пример запроса ↗

Как это работает

  1. 01
    Ограничьте анимацию по частоте

    Перед написанием кода анимации решите, как часто пользователи будут сталкиваться с этим взаимодействием.

  2. 02
    Назовите цель

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

  3. 03
    Выберите кастомную кривую

    Выбирайте easing в зависимости от того, появляется, исчезает, перемещается элемент или только меняет цвет, затем замените встроенные кривые более выразительными кастомными cubic-bezier.

  4. 04
    Задайте длительность

    Соответствие длительности типу элемента из таблицы — нажатие кнопки 100-160 мс, раскрывающиеся списки 150-250 мс, модальные окна 200-500 мс — и не превышайте порог в 300 мс для UI.

  5. 05
    Примените настройки компонентов по умолчанию

    Кнопки уменьшаются до 0.97 при :active, появления начинаются с 0.95 с изменением opacity, а не с scale(0), всплывающие окна масштабируются от своего триггера, а модальные окна остаются по центру.

  6. 06
    Используйте пружины там, где они оправданы

    Пружины подходят для перетаскивания с инерцией, жестов, которые можно прервать, и намеренно декоративных взаимодействий.

02 Определите своё применение

Когда использовать навык emil-design-eng

Используйте навык emil-design-eng в Claude Code или Codex, когда задача — UX-исследование этого типа. Применимость и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

  • Просмотр существующего UI-кода и получение конкретной таблицы исправлений вместо размытой обратной связи
  • Создание компонентов, где мелкие детали складываются в интерфейс, который ощущается правильным
  • Работа с перетаскиванием и свайпами, где закрытие должно реагировать на скорость движения пальца, а не только на расстояние
  • Интерфейсы, чувствительные к производительности, где JS-анимация теряет кадры, пока основной поток занят

Знайте границы

  • Пружинистые анимации повсюду: отскок избегается в большинстве UI-контекстов и оставлен для перетаскивания с закрытием и игровых взаимодействий
  • Декоративная анимация на функциональных визуализациях данных, где отсутствие анимации было бы лучше
  • Тем, кто хочет формулу для сочетания opacity и height; в файле сказано, что это метод проб и ошибок
  • Восприятие reduced motion как отсутствия анимации, что файл явно отвергает

Что предоставить

  • Анимация, которую вы собираетесь написатьФреймворк ожидает, что четыре вопроса будут отвечены по порядку до появления какого-либо кода анимации: должна ли она анимироваться, почему, какое easing, насколько быстро.
  • Как часто пользователи будут это видетьЧастота — первый вопрос, определяющий всё решение, от полного отказа от анимации до разрешения добавить изюминку.
  • Целевая поддержка вашего браузераАнимации появления используют @starting-style там, где поддержка позволяет, иначе применяется резервный паттерн с атрибутом data-mounted.

03 Внутри скилла

Правила, которые skill emil-design-eng задаёт Claude Code и Codex

6 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

  1. Никогда не используйте ease-in

    ease-in замедляет начальное движение — именно тот момент, на который пользователь смотрит внимательнее всего, поэтому раскрывающийся список с ease-in на 300 мс ощущается медленнее, чем ease-out при той же длительности.

  2. Никогда не начинайте появление с Scale(0)

    В реальном мире ничто не исчезает и не появляется полностью. Появления начинаются с scale(0.9) или выше в сочетании с opacity, а масштаб при нажатии остаётся сдержанным — 0.95-0.98.

  3. Модальные окна сохраняют центральное происхождение

    Всплывающим окнам следует задавать transform-origin относительно их триггера, используя var(--transform-origin) из Base UI, но модальные окна являются явным исключением, поскольку они не привязаны к триггеру.

  4. Ревью используют настоящую таблицу

    UI-ревью должно выводить настоящую markdown-таблицу со столбцами Before, After и Why, по одной строке на каждую проблему. Список с Before: и After: на отдельных строках — неправильный формат.

  5. Скрывайте hover за медиазапросом

    Hover-анимации должны находиться внутри @media (hover: hover) and (pointer: fine), потому что на сенсорных устройствах hover срабатывает при тапе и создаёт ложные срабатывания.

  6. Держите stagger коротким и неблокирующим

    Задержки stagger составляют 30-80мс между элементами: более длинные задержки делают интерфейс медленным, а stagger декоративен, поэтому он не должен блокировать взаимодействие во время воспроизведения.

04 Применение

Установить emil-design-eng в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить emil-design-eng в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng

Обобщённая форма CLI skills для skills/emil-design-eng/SKILL.md; репозиторий может документировать свой собственный путь.

Дайте скиллу первую задачу по UX-исследованию

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Review the code for [the dropdown and the popover] in [component file]. The dropdown opens with ease-in over 300ms, the popover scales from center, and the entering panel animates from scale(0). Use the Before/After format and tell me what to change and why.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Пересмотрите работу на следующий день свежим взглядом — недочёты легче заметить после ночного перерыва
  • Временно замедлите длительность до 2-5x от нормальной или используйте инспектор анимаций браузера, чтобы выявить проблемы с таймингом
  • Пройдите анимацию кадр за кадром в Chrome DevTools, чтобы увидеть проблемы координации, невидимые на полной скорости
  • Тестируйте выдвижные панели и свайп-жесты на физических устройствах, подключив телефон по USB к локальному dev-серверу
  • В замедленном режиме убедитесь, что анимируемые свойства остаются синхронизированными, а точка отсчёта и easing выглядят правильно

В OpenDesign emil-design-eng встроен: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
Emil Kowalski
Repository
github.com/emilkowalski/skills Ветка main
Файл skill
skills/emil-design-eng/SKILL.md Контрольная сумма содержимого записана при проверке; коммит d23d7f8
License
MIT Из LICENSE.
Звёзды репозитория
37 516 Снимок GitHub сделан 2026-09-14 для всего репозитория emilkowalski/skills, который содержит 9 навыков в этом каталоге. Не рейтинг и не счётчик использования emil-design-eng.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Основная философияВкус тренируется, незаметные детали накапливаются, а красота — реальное конкурентное преимущество.
  2. Формат ревью (обязательно)Требует markdown-таблицу Before/After/Why и показывает запрещённый формат списка.
  3. Фреймворк принятия решений об анимацииЧетыре последовательных вопроса: частота, назначение, easing, длительность, плюс воспринимаемая производительность.
  4. Пружинные анимацииКогда подходят пружины, отслеживание мыши с useSpring и два стиля конфигурации.
  5. Принципы построения компонентовОбратная связь при нажатии, избегание scale(0), точка отсчёта поповера, задержки тултипов, transitions вместо keyframes, blur.
  6. Мастерство CSS TransformПроцентные translate, масштабирование дочерних элементов, 3D-глубина и якоря transform-origin.
  7. clip-path для анимацииРаскрытие inset для оверлеев, вкладок, hold-to-delete, скролл-раскрытий, слайдеров сравнения.
  8. Жесты и drag-взаимодействияОтбрасывание по скорости, демпфирование границ, захват указателя, защита от мультитача, трение.
  9. Правила производительностиАнимируйте только transform и opacity, избегайте пересчёта CSS-переменных, предпочитайте CSS под нагрузкой.
  10. ДоступностьReduced motion сохраняет opacity и цвет, убирает движение; hover скрыт за медиазапросом.
  11. Принципы Sonner (создание любимых компонентов)Шесть принципов от Sonner о DX, значениях по умолчанию, наименовании, крайних случаях, переходах, документации.
  12. Чек-лист ревьюТаблица типичных проблем и их предписанных решений — от transition-all до отсутствующего stagger.
Собственное описание skill
Этот skill воплощает философию Emil Kowalski в отношении проработки интерфейсов, дизайна компонентов, работы с анимацией и невидимых деталей, которые делают программное обеспечение приятным в использовании.

Описание из front-matter в SKILL.md. Полный файл составляет около 27 130 символов. Прочитайте полный файл на GitHub.

Emil Design Eng

Запустить emil-design-eng на реальной задаче UX-исследования.

Навык emil-design-eng входит в состав OpenDesign. Скачайте приложение, выберите навык в разделе Plugins → Skills, вставьте промпт выше и прочитайте план перед получением результата.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng