Фронтенд и UI

emil-design-eng

Правила Эмиля Ковальски по таймингу анимации, изингу и полировке компонентов.

Что это

Кодирует философию дизайн-инженерии: фреймворк решений по анимации, гайд по пружинам, принципы компонентов, приёмы с clip-path, обработку жестов, правила производительности и чек-лист ревью.

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Из исходного SKILL.md

Почему это важно для дизайна

  • Частые действия вовсе лишаются анимации, поэтому командные палитры остаются мгновенными.
  • Появления стартуют с scale(0.95), никогда с scale(0), поэтому ничто не возникает из ниоткуда.
  • Поповеры масштабируются от своего триггера, а не от центра, сохраняя пространственную связь.

Что внутри

  • The animation decision framework
  • Spring animations
  • Component building principles
  • clip-path for animation
  • Performance rules
  • Review checklist

Как установить

emil-design-eng

  1. Клонируйте репозиторий.

    git clone https://github.com/emilkowalski/skills
  2. Укажите Codex на файл скилла.

    skills/emil-design-eng/SKILL.md
  3. Дальше опишите нужный интерфейс. Codex следует скиллу.

Как запустить с Codex

  1. Попросите Codex отревьюить UI-код: он возвращает таблицу «Было, Стало, Почему».

  2. Для нового движения он отвечает: стоит ли это анимировать, зачем, какой изинг, как быстро.

  3. Он применяет чек-лист, отмечая transition: all и длительности свыше 300ms.

Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.

Больше плагинов в списке codex-design ↗

Следующий шаг

Проектируйте с Open Design без возни с настройкой

Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.