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.