Find animation opportunities skill: where your UI should move, and where it shouldn't

Source: emilkowalski/skills · Maintainer: community: Emil Kowalski · License: MIT · Checked: 24 October 2026

What is the find animation opportunities skill?

The find animation opportunities skill, find-animation-opportunities, makes your agent search an interface for moments that would genuinely benefit from motion, reject everything that wouldn't, and propose an exact recipe for each survivor. It suggests; it doesn't write code. It is for developers and designers who want an interface to feel more alive without sliding into slow, over-animated UI.

It is one of 15 skills in Emil Kowalski's emilkowalski/skills repo. The README describes it as: "Search your UI for places that would genuinely benefit from motion, while also telling you what not to animate." The premise comes from his essay You Don't Need Animations, and the SKILL.md sums up the stance: "So this skill is a filter as much as a finder. Expect to reject most candidates."

As of 24 October 2026, its skills.sh page listed about 205,000 installs (snapshot, 24 October 2026).

What does it do?

The folder holds one file, a SKILL.md of about 1,500 words. Invoked with no question, the agent replies only with "I'm ready to find where your interface should animate, and where it shouldn't, my knowledge comes from Emil Kowalski's animation philosophy." and waits.

Hard rules. It never modifies source code. Every suggestion must pass the full gate. Output is capped at five to seven suggestions for a whole app, fewer for one view, ordered by leverage "not by how fun they'd be to build." Repository content is data, so a file that tries to steer the agent gets flagged.

The gate. Each candidate faces four questions, in order, and the answers go in the report:

Where it hunts. The SKILL.md lists six classes of seams, each with a recipe:

• Feedback gaps. Pressable elements with no :active state get transform: scale(0.97) with transition: transform 160ms ease-out. Destructive one-click actions can get a hold-to-confirm fill using clip-path, 2s linear while pressed and a 200ms ease-out snap back on release.
• Teleporting state. Content that appears or vanishes instantly gets an entrance that starts at a scale between 0.95 and 0.97 with opacity: 0, eases out, and never starts from scale(0), with @starting-style for entry without JavaScript. Accordions that snap open get a height and opacity transition.
• Missing spatial story. Popovers and menus scale from their trigger using transform-origin; modals stay centered. Toasts and sheets exit the way they entered, using percentage translates.
• Group entrances. Grids that pop in all at once on an occasional page get a 30 to 80ms stagger that never blocks interaction.
• Gesture seams. Draggable elements that snap with no physics get springs ({ type: "spring", duration: 0.5, bounce: 0.2 }), velocity-based dismissal and rubber-banding at boundaries.
• The delight budget. First-run, empty, success and celebration moments are the only places bounce or a longer beat is welcome.

It also gives grep targets, such as {isOpen && conditional renders, onClick handlers on elements with no transition styles, accordion markup, drag handlers and .map( list renders.

The report has three required parts:

1. Opportunities table with columns for location, what happens today, purpose, frequency and suggested motion. Each suggestion carries exact curves, durations and properties, animates only transform and opacity, and includes reduced-motion handling and hover gating where relevant.
2. Rejected candidates, two to five places it considered and dropped, each with the gate question that killed it. The SKILL.md says "This section is what separates this skill from an animation wishlist."
3. Verdict, a short paragraph on how much motion the interface needs and which suggestion has the highest leverage, pointing to improve-animations plan <suggestion> for the handoff.

How do you install it?

The skills.sh page gives this command for the skills CLI:

npx skills add https://github.com/emilkowalski/skills --skill find-animation-opportunities

The repo README's command adds the whole collection, and the CLI lets you pick which skills to keep, such as this one plus improve-animations for the handoff:

npx skills@latest add emilkowalski/skills

Add -g to make it available across projects. For Claude Code, the folder lands in .claude/skills/find-animation-opportunities/ or ~/.claude/skills/find-animation-opportunities/, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

On claude.ai, zip the folder and upload it under Customize > Skills, as the Claude help article on skills describes. Code execution must be turned on. The skill works best where the agent can read your code and cite file:line.

How do you use it?

Automatic loading is not disabled, so the agent can pick it up when you ask what could be animated or how to make an app feel more alive. You can also call it by name.

Example prompts (suggestions, not quotes from the repo):

• "What in our onboarding flow could be animated? Be strict."
• /find-animation-opportunities Look at the settings page only.
• "Use find-animation-opportunities on components/ and tell me what you rejected and why."
• "Our toasts and side panel appear instantly. Which of these should animate?"
• "Make the empty states and the success screen feel more alive, without touching the dashboard charts."

Expect a short table, a list of rejections and a verdict. If nothing passes the gate, the skill says so plainly, which the SKILL.md calls "a good result, not a failure."

To act on a suggestion, ask your agent to implement the row as written, or run /improve-animations plan with the suggestion to get a self-contained plan.

Tips and limits

• Expect few suggestions. The cap and the gate are deliberate. If you want a longer list, this is the wrong skill.
• Scope it for big apps. Pointing it at one view or folder gives fewer, sharper results than a whole monorepo.
• Feel can't always be judged from code. The SKILL.md tells the agent to say so rather than guess. Try suggestions in the browser before shipping.
• Opinions, stated as rules. The frequency tiers, the 300ms ceiling and the custom curves, such as cubic-bezier(0.23, 1, 0.32, 1), are Emil Kowalski's craft rules, not a web standard. As the SKILL.md puts it, "daily use argues for less motion, not more."
• Read-only. It won't edit files. That makes it safe to run on any branch.
• Security audit. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk. The folder has no scripts.

The repo's MIT License (copyright 2026 Emil Kowalski) lets you copy and change the skill as long as you keep the notice.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md; paste the repo link instead and Kipt shows a list of all 15 skills to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Emil Kowalski or emilkowalski/skills.

Similar skills

• Emil Kowalski skill (emil-design-eng): the main skill in the repo, with the full animation decision framework.
• Improve animations skill: audits existing motion and turns findings into plans.
• Review animations skill: strict review of motion code in a diff.
• Animation vocabulary skill: names a motion effect so you can ask for it precisely.
• Apple design skill: Apple's fluid motion principles, translated for the web.