Design Motion Principles

This gives you two modes for UI animation work: build interactive components with intentional motion, or audit existing animations and get structured feedback. The interesting bit is the perspective weighting system. It pulls from Emil Kowalski's restraint-first productivity approach, Jakub Krehel's production polish techniques, and Jhey Tompkins' playful experimentation, then weights them based on your project context. A dashboard gets Emil's speed rules prioritized, a kids app leans Jhey, everything gets Jakub's polish baseline. The frequency gate is the core heuristic: animations triggered hundreds of times daily should be instant or nonexistent. Includes a motion cookbook with recipes for transitions, springs, FLIP, and scroll-driven animations. Accessibility handling with prefers-reduced-motion is mandatory, not optional.

Install to Claude Code

npx -y skills add kylezantos/design-motion-principles --skill design-motion-principles --agent claude-code