Skills Emilkowalski

skills/skills/animate

Создайте анимацию с нуля, принимая решения в порядке, который определяет, будет ли она ощущаться правильной — должна ли она вообще анимироваться, с какой целью, какой инструмент, какие свойства, какая кривая и длительность, как она прерывается, как завершается. Пишет реализацию. Используйте, когда просят что-то анимировать, добавить движение, сделать компонент живым или создать переход. Для критики существующей анимации используйте review-animations; для аудита всей кодовой базы — improve-animations.

skills/skills/animation-vocabulary

Обратный г

skills/skills/apple-design

Подход Apple к дизайну интерфейсов и плавной, физичной анимации, адаптированный для веба. Используйте при создании или ревью жестовых интерфейсов, пружинных анимаций, взаимодействий с перетаскиванием/свайпом/листами, инерционных и прерываемых переходов, полупрозрачных материалов и глубины, типографики (оптический размер, трекинг, интерлиньяж), reduced-motion или основ дизайна (обратная связь, пространственная согласованность, сдержанность), лежащих в основе интерфейсов в стиле Apple.

skills/skills/ask-sonner

Руководство по Sonner, библиотеке тостов для React — установка и подключение Toaster, выбор правильного вызова toast(), тосты для промисов и загрузки, обновление, закрытие и сохранение тостов, стилизация, темы и иконки, позиционирование и несколько тостеров. Используйте при работе с Sonner или устранении неполадок — тосты не появляются, появляются дважды, теряют стили, игнорируют классы Tailwind, находятся за модальным окном или не следуют тёмной теме.

skills/skills/emil-design-eng

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

skills/skills/find-animation-opportunities

Ищите в кодовой базе или интерфейсе места, которые не анимируются, но должны, и отклоняйте всё, что не должно. Только чтение; предлагает движение с точными значениями, но не реализует его. Используйте, когда пользователь спрашивает «что здесь можно анимировать?» или хочет «сделать это более живым». Для исправления существующих анимаций используйте improve-animations или review-animations.

skills/skills/improve-animations

Провести аудит кодовой базы на предмет анимаций и кода движения в роли старшего консультанта по анимации, затем составить приоритизированный аудит и самодостаточные планы реализации для других агентов (или более дешёвых моделей). Только чтение исходного кода — планирует улучшения, но не применяет их. Использовать, когда пользователь просит «улучшить анимации», «провести аудит движения», «сделать приложение более плавным» или хочет дорожную карту исправлений анимаций, а не ревью одного изменения.

skills/skills/pick-ui-library

Выберите подходящую библиотеку для конкретной задачи фронтенда из курируемого, экспертного списка — числа, OTP-поля, графики, командные меню, виртуализация, drag and drop, тосты, состояние, стилизация и многое другое. Запускается только при явном вызове; самостоятельно не срабатывает.

skills/skills/prototype

Создаёт несколько по-настоящему разных версий элемента интерфейса, который вы описываете, и отображает их за визуальным переключателем, чтобы вы могли переключаться между ними вживую и выбрать ту, которая кажется правильной. Запускается только при явном вызове; сам по себе не срабатывает.

skills/skills/review-animations

Проверяет анимацию и код движения на соответствие высоким стандартам качества, основанным на инженерной философии дизайна Эмиля Ковальски. По умолчанию помечает как требующее исправления; одобрение нужно заслужить.