Audits UI animations through the lens of Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Gives per-designer feedback with context-aware weighting based on what you're building.
$npx skills add kylezantos/design-motion-principlesExperts in the room. Sorta.
Three designers’ motion work I keep going back to: Emil Kowalski for restraint, Jakub Krehel for production polish. And Jhey Tompkins, who keeps stretching what CSS can pull off. As I just started to become a builder and had the opportunity to really dig into motion design, I often found myself wanting feedback/advice. Of course, I couldn’t literally gain access to having them “in the room”, so I built a skill that audits motion through their principles and philosophies instead.
What surprised me building it was how often their advice contradicts, or offers a different lens on the same thing. Emil might call something a frequency violation that Jhey would call the entire point of an animation. So the skill doesn’t pick a single voice. It weights all three based on what you’re working on. A productivity tool gets Emil first. A kids app gets Jakub and Jhey. The audit tells you which lens is loudest before it tells you what to fix.
Three philosophies, one weighted audit.
The skill reads your project before it opens its mouth. It checks your package.json, your existing animations, your CLAUDE.md, then proposes a weighting between the three designers. You confirm or adjust, and it audits. Same kick-off command for all three lenses. The weighting is what changes.
Restraint, speed, and motion that gets out of the way. Emil's frame is for productivity tools and high-frequency interactions where every animation has to earn its place. Durations under 300ms, 180ms ideal, and a hard read on whether the motion is doing work or showing off. The bar is "the best animation is the one that goes unnoticed."
Audit the motion design in this codebase
Production polish for shipped consumer apps. Jakub's lens catches the stuff a senior design engineer notices on a Tuesday. Spring enters with a small translateY and a 4px blur, exits subtler than enters, optical alignment, shadow weight. 200 to 500ms is the comfortable range. The goal is refined, not flashy.
Audit the motion design in this codebase
Playful experimentation and CSS that pushes what the platform can do. Jhey's lens is for creative sites, kids apps, portfolios. Anywhere delight is the goal, not a cost. He's the reason the skill knows about @property, linear() easing, and scroll-driven animations as first-class tools. Duration is whatever the effect needs.
Audit the motion design in this codebase
Works in any AI coding agent
One install command, any agent. The skill rides on the open skills protocol, so it works the same in Claude Code, Codex, Cursor, OpenCode, and 35+ others. The CLI auto-detects what you have installed and wires it up.
$npx skills add kylezantos/design-motion-principles#Auto-detects your agent (Claude Code, Codex, Cursor, OpenCode, 35+ more)#Then run: Audit the motion design in this codebase
Three designers, cited by name.
The skill is a synthesis of three people’s public work. Emil Kowalski writes about restraint and productivity motion at animations.dev and ships it in Sonner and Vaul. Jakub Krehel is the production-polish lens, drawing on his published animation patterns. Jhey Tompkins is the playful-CSS lens, drawing on his work at @jh3yy.
I haven’t worked with any of them. The skill is my attempt to keep their thinking close while I’m building. Go read theirs.