animate Skill (Emil Kowalski) for Claude Code: Build Animations That Feel Right

Makes Claude decide whether a UI element should animate at all, then write the motion with fixed curves, durations and reduced-motion support.

Installs: 189.9K; on skills.sh
Stars: 52.7K; on GitHub
Files: 1; besides SKILL.md
Updated: Oct 2026; last repo commit

animate makes Claude work through seven steps before it writes motion code. It checks how often the action happens, names the purpose, picks the cheapest tool, then picks properties, curve and duration, interruption and exit, and reduced-motion handling. For something used 100 or more times a day, such as a keyboard shortcut, it writes no animation and says so.

It triggers when you ask to animate something, add motion or build a transition. Its curves and durations come from tables in the SKILL.md, so Claude does not invent values. It bundles one file, RECIPES.md, with ready starting code for common components such as dropdowns, toasts and drawers. For critiquing or auditing existing motion, the SKILL.md points to the separate review-animations and improve-animations skills.

Good for

Front-end developers who want animation code that survives a strict review
Design engineers who follow Emil Kowalski's animation approach
Claude Code users tired of generic ease-in and scale(0) animations

Install animate

Claude Code

Copy this prompt.

Install the animate skill in Claude Code. Run this command:

npx skills add https://github.com/emilkowalski/skills --skill animate

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

Sections in SKILL.md

Initial Response
Operating Posture
Hard Rules
The Build Sequence
1. Should this animate at all?
2. What is the purpose?
3. Pick the tool — cheapest that works
4. Pick the properties
5. Easing and duration — or a spring
6. Interruption and exit
7. Reduced motion and pointer gating
Recipes
Never Ship
Output
Tone

Key facts

Author: Emil Kowalski
License: MIT
Installs on skills.sh: 189,912 (Nov 2, 2026)
GitHub stars: 52,705 (Nov 2, 2026)
skills.sh audits: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
Last commit: 2026-10-28
Files: SKILL.md plus RECIPES.md
Steps: 7: frequency gate, purpose, tool, properties, easing, interruption, reduced motion
Related skills named: review-animations, improve-animations, find-animation-opportunities, animate-expo, pick-ui-library

What it includes

Stops at once for actions done 100+ times a day, like keyboard shortcuts
Claude sorts the request by how often it happens. High-frequency actions get no animation, and Claude says so instead of writing code.
Read · 1. Should this animate?
Feedback, spatial consistency, state, a jarring change, explanation or delight
If Claude cannot name the purpose, it does not build the animation. Delight is only allowed on rare or first-time moments.
Read · 2. Name the purpose
CSS transition, @starting-style, CSS animation, WAAPI, then Motion
Claude walks down the list and stops at the first tool that fits, so a fade does not get a motion library.
Write · 3. Pick the cheapest tool
transform and opacity only, never scale(0), origin at the trigger
Entrances start from scale 0.9 to 0.97 with opacity 0. Popovers and menus scale from the trigger, and modals stay centered.
Write · 4. Pick the properties
Uses set curves and durations from tables, or a spring for gestures
Values come from the tables in the SKILL.md, from 100 to 160 ms for a button press up to 200 to 500 ms for modals and drawers. The SKILL.md says UI animations stay under 300 ms unless there is a reason.
Write · 5. Easing and duration
Transitions for rapid triggers, springs for gestures, exit the way it entered
Toasts and toggles use transitions because they retarget from the current value. Keyframes restart from zero.
Write · 6. Interruption and exit
Ships prefers-reduced-motion and hover:hover handling with every animation
Reduced motion means gentler animation, not none. Hover effects only apply on devices that really hover.
Write · 7. Reduced motion and hover gating
Starting code for common cases, like dropdowns, toasts, modals and drawers
Claude loads the recipe when the request matches one: button press, dropdown, tooltip, modal, drawer, toast, accordion, stagger, hold-to-confirm, tab indicator, scroll reveal or drag-to-dismiss.
Files · RECIPES.md

From the official docs

Questions

What does the animate skill do?

It makes Claude build an animation in a fixed order. First it asks whether the element should animate at all, and only then does it pick a tool, properties, curve and duration. It writes the code for you.

How do I install it in Claude Code?

Use the install box above, which adds the skill from the emilkowalski/skills repo. Then ask for motion, for example "animate this dropdown opening".

Why did Claude refuse to animate something?

That is by design. The skill blocks animation on actions done 100 or more times a day, such as keyboard shortcuts, and on data users read or act on. Claude explains the reason instead of writing code.

What is the difference between animate, review-animations and improve-animations?

animate builds new motion. The SKILL.md says review-animations critiques a diff and improve-animations audits a whole codebase. find-animation-opportunities hunts for places that could animate, and animate-expo covers React Native.

Does it need other skills?

No. The SKILL.md only says to hand off to pick-ui-library when you need a component such as a toast or dropdown instead of an animation. You can install that skill from the same repo if you want that handoff.

Does it need an API key or scripts?

The SKILL.md names no API key, and the only bundled file is RECIPES.md. It may suggest the Motion library, which is installed in your project like any package.

Is it safe to install?

It is two markdown files with no scripts. The SKILL.md does tell Claude to write animation code into your project, so review the diff as usual.

Information

updated Nov 2, 2026

Repository: emilkowalski/skills
Folder: skills/animate

emilkowalski/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

SKILL.md · github.com
skills.sh listing · skills.sh
GitHub repo · github.com