Emilkowal Animations

This packages Emil Kowalski's animation philosophy into 43 actionable rules across easing, timing, transforms, and interaction patterns. You get concrete values like scale(0.97) for button presses, cubic-bezier(0.32, 0.72, 0, 1) for drawer easing, and the 300ms ceiling for UI animations. It's opinionated in the right ways: ease-out as default, never animate keyboard actions, always make animations interruptible. The categorization by impact helps you focus on what matters. Most useful when implementing gesture-based components or reviewing animation code where you need specific guidance beyond "make it feel good." Covers both the craft details and accessibility considerations you actually need to ship.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 9
skills.sh installs: 2.8K
GitHub stars: 222
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add pproenca/dot-skills --skill emilkowal-animations --agent claude-code

Installs into .claude/skills of the current project.

Files

Emil Kowalski Animation Best Practices

Comprehensive animation guide for web interfaces based on Emil Kowalski's teachings, open-source libraries (Sonner, Vaul), and his animations.dev course. Contains 58 rules across 8 categories, prioritized by impact.

When to Apply

Reference these guidelines when:

Adding animations to React components
Choosing easing curves or timing values
Implementing gesture-based interactions (swipe, drag)
Building toast notifications or drawer components
Optimizing animation performance
Ensuring animation accessibility
Expressing any of the above with Tailwind CSS v4 utilities (see the tw- category)

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Easing Selection	CRITICAL	`ease-`
2	Timing & Duration	CRITICAL	`timing-`
3	Property Selection	HIGH	`props-`
4	Transform Techniques	HIGH	`transform-`
5	Interaction Patterns	MEDIUM-HIGH	`interact-`
6	Strategic Animation	MEDIUM	`strategy-`
7	Accessibility & Polish	MEDIUM	`polish-`
8	Tailwind v4 Utilities	MEDIUM	`tw-`