find-animation-opportunities

Scans a codebase for UI moments that should animate and proposes exact motion values.

Updated Sep 15, 2026
One-click install
npx skills add https://github.com/Nadav011/nadavai-claude --skill find-animation-opportunities-nadav011
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/Nadav011/nadavai-claude/tree/main/plugins/nadavai/skills/find-animation-opportunities
Command: npx skills add https://github.com/Nadav011/nadavai-claude --skill find-animation-opportunities-nadav011

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because no one systematically identifies where motion would genuinely help, while over-animation makes products feel sluggish. This Skill sweeps a codebase for high-leverage animation opportunities and rejects everything that should stay still. ## Core Features & Use Cases - Opportunity Sweep: Hunts known seams such as missing press feedback, teleporting conditional renders, panels with no spatial connection to their trigger, and gesture handlers without spring physics. - Four-Question Gate: Every candidate must pass frequency, purpose, speed, and function checks, so keyboard-driven or high-frequency interactions are rejected outright. - Precise Recipes: Each suggestion includes exact durations, cubic-bezier easing tokens, transform/opacity properties, reduced-motion handling, and file:line evidence. - Use Case: Ask it to review a React app's components before a polish sprint; it returns a table of 5-7 ordered suggestions plus a required list of rejected candidates explaining why each was cut. ## Quick Start Ask the assistant to find animation opportunities in your components directory and report which UI moments should animate and which should not.

Frequently Asked Questions about find-animation-opportunities

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find where to add animations in my web app?

Sweep the codebase for known seams: elements with no :active state, conditional renders that appear instantly, accordions that snap open, and drag handlers without springs. Each candidate must pass a frequency, purpose, speed, and function gate before being suggested.

What UI elements should never be animated?

Keyboard-initiated actions like command palettes and shortcuts used 100+ times a day should never animate, since motion makes them feel slow. Functional data visualizations users read should also stay still, because decoration hinders comprehension.

Does this skill modify my source code?

No, it is strictly read-only and only reports suggestions with exact values and file:line evidence. To implement a suggestion, hand it off to a planning skill such as improve-animations or apply the recipe yourself.

What animation durations should UI transitions use?

Press feedback runs 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. UI animation should stay under 300ms; only marketing or explanatory motion can run longer.

When should I use review-animations instead of finding new opportunities?

Use review-animations to critique animations that already exist, and improve-animations to plan fixes for them. This skill is only for discovering moments that do not animate yet but should.