Chapter 05 · Our Favourite Skills · Reading 02
Emil Kowalski's skills, for motion that feels right
The animation and interaction rules behind every hover, press and transition on this site. Written by Emil Kowalski of animations.dev. What each skill does and how to install them.
What it is
Agents are bad at animation in small, compounding ways: the wrong easing on a dropdown, an element that scales in from nothing, a 700 millisecond hover. Emil Kowalski has spent years at Vercel and Linear noticing exactly those mistakes, and this pack lists them so an agent stops making them. Every timing value on this site (the 200 millisecond hover, the 160 millisecond press, the 320 millisecond modal) came out of these files.
Author: Emil Kowalski, who teaches the full course at animations.dev. MIT licensed.
Repository: github.com/emilkowalski/skill
The skills inside it
- emil-design-eng. The main one. A decision framework (should this animate at all, what is its purpose, which easing, how fast) plus the component rules: buttons press to 97 percent, nothing enters from scale zero, popovers scale from their trigger, tooltips skip the delay after the first one.
- animate. Builds an animation from scratch in the order that matters: purpose, tool, properties, curve, duration, interruption, exit.
- apple-design. Apple's fluid interface principles translated for the web: respond on pointer down, track gestures one to one, keep every animation interruptible, hand off velocity from a drag to a spring, rubber-band at the edges. The scroll journey's momentum comes from here.
- review-animations. A strict reviewer. Default to flagging; approval is earned.
- improve-animations. Audits a whole codebase's motion and hands back a prioritised plan.
- find-animation-opportunities. Finds the places that should move but do not, and the places that should stay still.
- animation-vocabulary. A reverse dictionary: describe the effect you mean and get its real name, so you can ask for it properly.
- Also in the pack: animate-expo for React Native, write-swift, pick-ui-library, prototype, and ask-sonner for Emil's toast library.
Install it
npx skills@latest add emilkowalski/skillsRead emil-design-eng once yourself, even if you never write code. Knowing why 180 milliseconds feels faster than 400 changes how you give feedback on any interface.