Make Interfaces Feel Right
Emil Kowalski's UI and animation taste, installed: your agent picks the right easing and duration, adds press feedback, and reviews UI code with before and after fixes.
Install the skill or give me an instruction how to install it - emil-design-eng from https://github.com/emilkowalski/skills Free Open source Works in Claude, Cursor, Codex & more
What it does
Ask your coding agent for an animation and get one a design engineer would ship. With this skill loaded, the agent answers Emil Kowalski's decision framework before writing any animation code: should this animate at all (keyboard-triggered actions never do), what is it for, which easing (ease-out for anything entering or exiting, never ease-in), and how fast (UI animations stay under 300ms, on custom curves because the default CSS easings are too weak).
Reviews change too. Ask for one and findings come back as a Before/After/Why markdown table, one row per issue, each fix paired with its reasoning. The component rules come from building Sonner and Vaul: buttons scale to 0.97 on press, nothing enters from scale(0), animate only transform and opacity, and reduced motion means gentler fades, not zero animation.
When to use it
- You're building a dropdown, modal, or toast
The component picks up the details that make it feel right, like ease-out entrances and press feedback, not the sluggish defaults agents reach for.
- You're not sure something should animate at all
One question settles it: how often users see it. Keyboard actions get no animation, and what does animate stays under 300ms.
- An interaction works but feels stiff
You get the specific fix, like scaling a popover from its trigger or masking a rough crossfade with a 2px blur.
- You want UI code reviewed for motion mistakes
Every issue lands in a before and after table, with fixes like ease-in swapped for ease-out and transition: all replaced with exact properties.
FAQ
What actually changes in my coding agent's output?
With emil-design-eng active, your agent makes the animation calls a design engineer would: ease-out on enter animations, UI durations under 300ms, scale press feedback on buttons, entrances from scale(0.95) instead of scale(0), and animations kept to transform and opacity. You stop correcting those defaults by hand.
How is it different from review-animations?
emil-design-eng guides your agent while it writes animation and UI code; review-animations audits motion code you already have, and it is built to flag by default rather than approve. Use both if you want guidance up front and a strict audit after.
Do I need React or Framer Motion to use it?
No. Most of emil-design-eng is plain CSS guidance: easing curves, durations, transform-origin, clip-path reveals, @starting-style entries. React and Motion (Framer Motion) appear where springs and gestures need JavaScript, and the same rules carry to vanilla JS or any framework.
What is the Before/After review table?
It is the required output format when emil-design-eng reviews UI code: a markdown table with one row per issue and Before, After, and Why columns. You see your code, the fix, and the reasoning at a glance, like why ease-in feels sluggish on a dropdown.