Frontend & UI
emil-design-eng
Emil Kowalski’s rules for animation timing, easing and component polish.
What it is
Encodes a design engineering philosophy: an animation decision framework, spring guidance, component principles, clip-path techniques, gesture handling, performance rules and a review checklist.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Why it matters for design
- Frequent actions lose their animation entirely, so command palettes stay instant.
- Entrances start at scale(0.95), never scale(0), so nothing appears from nowhere.
- Popovers scale from their trigger instead of their centre, keeping the spatial link.
What it covers
- The animation decision framework
- Spring animations
- Component building principles
- clip-path for animation
- Performance rules
- Review checklist
How to install
emil-design-eng
-
Clone the repo.
git clone https://github.com/emilkowalski/skills -
Point Codex at the skill file.
skills/emil-design-eng/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Ask Codex to review UI code; it returns a Before, After, Why table.
-
For new motion it answers should this animate, why, which easing, how fast.
-
It applies the checklist, flagging transition: all and durations over 300ms.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.