Фронтенд и 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.
Почему это важно для дизайна
- Частые действия вовсе лишаются анимации, поэтому командные палитры остаются мгновенными.
- Появления стартуют с 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
-
Клонируйте репозиторий.
git clone https://github.com/emilkowalski/skills -
Укажите Codex на файл скилла.
skills/emil-design-eng/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Попросите Codex отревьюить UI-код: он возвращает таблицу «Было, Стало, Почему».
-
Для нового движения он отвечает: стоит ли это анимировать, зачем, какой изинг, как быстро.
-
Он применяет чек-лист, отмечая transition: all и длительности свыше 300ms.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке codex-design ↗Следующий шаг
Проектируйте с Open Design без возни с настройкой
Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.