animate

An agent skill by emilkowalski, from emilkowalski/skills. Tags: animation, design, web.

What it does

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.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add emilkowalski/skills --skill animate

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/emilkowalski/skills
cp -r skills/skills/animate ~/.claude/skills/animate

Safety box score

Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.

Source

Repository

emilkowalski/skills (all skills from this repository)

Path

skills/animate/SKILL.md

Branch

main

Updated

2026-09-22

Related skills

• animate-expo — Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate.
• animation-vocabulary — Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop.
• apple-design — Apple's approach to interface design and fluid, physical motion, translated for the web.
• ask-sonner — Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating.
• emil-design-eng — This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
• find-animation-opportunities — Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't.