Does it always write an animation?

No. If the action happens hundreds of times a day, like a keyboard shortcut, or has no clear purpose, the skill says so and writes no code. It offers a non-motion alternative instead.

Does it include reduced-motion support?

Yes. prefers-reduced-motion support and hover gating for touch screens ship with the animation, not as a follow-up.

Does it work for React Native apps?

No. For Expo and React Native apps there is animate-expo; this skill is aimed at the web.

By emilkowalskiUpdated 23 Sept 2026

Building an animation from scratch

/animate

/animate is a Claude Code skill in the Web & Design section. It is maintained by emilkowalski and published under the MIT license. Decides whether something should animate at all and, if so, writes the animation with the right curve, duration and properties, reduced-motion support included.

Author's description

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.

Use it when

You want to add motion to a component, such as a card, a menu or a transition
You are unsure whether something should animate and want a reasoned call
You need the animation with curve, duration and reduced motion already settled

Not for

Critiquing animations that already exist, which is what review-animations is for
Auditing a whole codebase, which is what improve-animations is for

What you get

The animation code, plus a few lines stating the gate result (frequency and purpose), the ingredients used and what to check by eye.

How to ask for it

Add an entrance animation to this card when it appears
Make this menu feel more alive when it opens and closes
Create a smooth transition between these two screens

Install

curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash

After installing with the script, type /animate. Using Cursor, Windsurf or Codex? Platform guides

Questions about this skill

Does it always write an animation?: No. If the action happens hundreds of times a day, like a keyboard shortcut, or has no clear purpose, the skill says so and writes no code. It offers a non-motion alternative instead.
Does it include reduced-motion support?: Yes. prefers-reduced-motion support and hover gating for touch screens ship with the animation, not as a follow-up.
Does it work for React Native apps?: No. For Expo and React Native apps there is animate-expo; this skill is aimed at the web.

Demo coming soon