What is the animate skill?
The animate skill is a SKILL.md plus RECIPES.md in emilkowalski/skills. It makes an AI coding agent work through seven steps: should it animate, its purpose, the cheapest tool, cheap properties, easing and duration, interruption, and reduced motion. It also ships recipes for common components.
The animate skill is the build-from-scratch skill in Emil Kowalski's repository. The README says the skills are based on his years of experience working at companies like Vercel and Linear. The folder holds SKILL.md and RECIPES.md.
It starts with a question most agents skip: should this animate at all? A frequency test decides. Elements used a hundred or more times a day get no animation, and keyboard-initiated actions never do.
What changes in your agent's output
- The agent names the purpose first: feedback, spatial consistency, state indication, preventing a jarring change, explanation or delight.
- It picks the cheapest tool in order: CSS transition,
@starting-style, CSS animation, the Web Animations API, then Motion. - It animates only transform and opacity, avoids
scale(0)in favor of 0.9 to 0.97 with opacity, and setstransform-originat the trigger. - UI animation stays under 300ms,
ease-inis never used on UI, and hover effects are gated to devices that support hover.
Who the animate skill is for
Best for
- Building a new dropdown, modal, drawer, toast, tooltip or accordion with motion that feels right.
- Agents that default to
transition: alland heavy bounce. - Projects that need shared easing tokens.
Not for
- Auditing existing motion. improve-animations audits a codebase and review-animations reviews a diff.
- React Native and Expo. animate-expo covers mobile.
- Finding the name of an effect you only see in a video, which is animation-vocabulary.
Use it with UiChemy
UiChemy Composer produces real HTML, CSS and JS in Elementor or Gutenberg, so the CSS-first animation this skill favors fits the output. Build the page, then add motion with your agent. Click Get Started on uichemy.com.
How to install Emil Kowalski Animate Skill: Build UI Animation Right
git clone https://github.com/emilkowalski/skills.gitClone the repository
Run
git clone https://github.com/emilkowalski/skills.git. The skill is the skills/animate folder.Copy the skill folder
Copy skills/animate into your agent's skills folder with both files, SKILL.md and RECIPES.md. The recipes are loaded when the agent builds a specific component.
Invoke it on a task
Ask your agent to use the animate skill while building a component, for example a dropdown or a toast, and describe the trigger.
Check that it loaded
Invoke the animate skill with no task. The agent should reply that it is ready to build animations and mention Emil Kowalski's philosophy. Then ask for a dropdown; it should state frequency and purpose before writing code.
Key features
- Frequency testInteractions seen 100-plus times a day get no animation. Tens per day get near-imperceptible motion, and rare moments get the delight budget.
- Purpose before codeEach animation must name feedback, spatial consistency, state indication, preventing a jarring change, explanation or delight.
- Cheapest tool firstThe order is CSS transition,
@starting-style, CSS animation, WAAPI, then Motion, so libraries only appear when needed. - Cheap propertiesOnly transform and opacity are animated.
scale(0)is replaced by a scale of 0.9 to 0.97 with opacity. - Named easing curvesThe skill defines an ease-out, an ease-in-out and a drawer curve, and sets spring configs with bounce kept between 0.1 and 0.3.
- Interruption rulesRapidly triggered motion uses transitions rather than keyframes, and exits mirror how the element entered.
- Reduced motion and hover gatingReduced-motion handling and
@media (hover: hover) and (pointer: fine)are part of the final step. - Never Ship tableA list of banned patterns includes
transition: all,ease-inon UI andscale(0). - Twelve recipesRECIPES.md covers button press, dropdown, tooltip, modal, drawer, toast, accordion, stagger, hold-to-confirm, tab indicator, scroll reveal and drag-to-dismiss.
Frequently asked questions
What is the animate skill?
It is the skills/animate folder in emilkowalski/skills. Its SKILL.md makes an AI coding agent decide whether to animate, name the purpose, pick the cheapest tool and set easing, duration and reduced-motion handling, with RECIPES.md for common components.
How do I install the animate skill?
Clone emilkowalski/skills with git and copy skills/animate into your agent's skills folder, keeping SKILL.md and RECIPES.md together. Then invoke the skill while building a component. Open the agent in the project that needs the motion.
What easing curves does it use?
It defines cubic-bezier(0.23, 1, 0.32, 1) as the ease-out, cubic-bezier(0.77, 0, 0.175, 1) as the ease-in-out and cubic-bezier(0.32, 0.72, 0, 1) for drawers. It forbids ease-in on UI because it feels sluggish, and keeps most UI motion under 300ms.
Does it ever say not to animate?
Yes, that is step one. Elements used 100-plus times a day get no animation, and actions started by keyboard are disqualified. Only rare, high-meaning moments earn real motion, and the agent should say so instead of adding it anyway.
How does animate differ from review-animations and improve-animations?
Animate builds new motion. Review-animations judges one diff, and improve-animations audits a whole codebase and writes plans. All three share the same animation standards from this repository, so their advice does not conflict.
Which AI agents can use the animate skill?
The repository gives no per-agent list. The skill is a SKILL.md folder, so any agent that loads skills from a folder, including Claude Code, Cursor and Codex, can use it. Check your agent's documentation for the skills path.
Is there a mobile version?
Yes. animate-expo in the same repository covers React Native and Expo with Reanimated and Gesture Handler. For general design engineering taste across web work, start with emil-design-eng before anything else.