How to use the animate agent skill for web animations

What the animate skill makes the agent do

Without the skill, an agent will often add animation to anything that moves. The animate skill changes that order. Before writing any code, the agent checks how often the action happens and what the motion is for. For an element a user opens hundreds of times a day, the skill tells the agent not to animate at all and to offer a plain state change instead.

When motion is justified, the agent works down a short list of tools and stops at the first one that fits: plain CSS transitions, then CSS animations or @starting-style, then the browser's WAAPI (element.animate()), and only then the Motion library (motion.dev) for springs, layout or exit animations. It animates only transform and opacity where possible, and chooses easing and duration from fixed tables in the skill.

Install the animate skill

Download the ZIP from the skill's page on this directory and unzip it. You can install it for yourself or for a single project.

For all your projects, unzip it into ~/.claude/skills/. For one project, unzip it into that project's .claude/skills/ folder. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with natural requests

You do not need a special command. Describe the motion you want in plain language, mentioning the element and the situation. The agent loads the skill when the request is about motion in a web project.

Ask a clear question about the element and its purpose. The skill works best when the request says how often the action happens, since that decides whether animation is appropriate at all.

• Add a fade and slide-up animation to our settings modal, which opens a few times a week.
• Add a press effect to the primary buttons in our checkout form.
• Make the notification toast slide in and out smoothly, and respect reduced motion.
• Should the command palette open with an animation? It opens dozens of times a day.

What the skill covers in the output

The skill asks the agent to follow a fixed sequence: decide whether to animate, name the purpose, pick the tool, pick the properties, then choose easing and duration. It also gives recipes for common cases such as button press and dropdowns or popovers.

Reduced-motion and hover handling are meant to be written with the animation, not added later. The skill's recipes note that :active works for press feedback on touch, and that :hover styling should be gated separately.

• Button press: scale to 0.97 on :active, 160ms, ease-out
• Popovers and menus: scale from the trigger with transform-origin, 200ms, ease-out
• Modals stay centered and are not anchored to a trigger

Requirements and safety notes

The skill needs a web project that uses HTML/CSS or JavaScript. You only need the Motion library if the work involves springs, layout animations or exit animations. Plain CSS and WAAPI need no extra library.

The skill runs no scripts and makes no network calls. Its files are SKILL.md and RECIPES.md. It is licensed under MIT, and its author is Emil Kowalski. It does not cover React Native, and it does not audit or review existing code.

• Runs scripts: no
• Uses network: no
• Not for React Native (a separate skill covers that)
• Not for auditing or reviewing existing code (other skills handle that)

Tips for better results

Tell the agent how often the element is used and what the animation is for. The skill decides differently for a rare onboarding step than for a frequently used menu.

If your codebase already defines easing or duration tokens, say so. The skill asks the agent to reuse existing tokens rather than create a second system.

• Give the element's frequency and purpose in the request
• Mention existing design tokens such as --ease-out
• Ask for reduced-motion support explicitly if you want to be sure it is included