find-animation-opportunities

Scan a codebase for UI moments that would benefit from motion and propose exact animation recipes.

Updated Sep 5, 2023
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill find-animation-opportunities-eyenalxai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill find-animation-opportunities-eyenalxai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because teams never systematically identify where motion would genuinely help, or they over-animate everything. This Skill sweeps a codebase for high-leverage animation opportunities while rejecting candidates that would make the UI feel slow or decorative. ## Core Features & Use Cases - Opportunity Sweep: Hunts known seams such as missing press feedback, teleporting conditional renders, popovers with no spatial origin, and gesture handlers without spring physics. - Four-Question Gate: Filters every candidate by frequency, purpose, speed budget, and function so only high-conviction suggestions survive. - Precise Recipes: Each suggestion includes exact durations, easing curves, transform values, reduced-motion handling, and file:line evidence, plus a required list of rejected candidates. - Use Case: Ask it to review a React app's components before a polish pass; it returns a ranked table of at most 5-7 motion suggestions with exact CSS values and a verdict on how much animation the interface actually needs. ## Quick Start Ask the agent to find animation opportunities in your components directory and report which UI moments would benefit from motion.

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 for known seams: pressable elements without :active states, conditional renders that teleport content, popovers with no transform-origin connection to their trigger, and drag handlers without springs. Gate each candidate by frequency, purpose, speed budget, and function before suggesting anything.

What UI elements should never be animated?

Keyboard-initiated, high-frequency actions like command palettes and shortcuts should never animate, since they run 100+ times per day and motion makes them feel slow. Functional, data-dense surfaces like analytics charts should also stay static because decoration hinders reading.

Does this skill modify my source code?

No, it is strictly read-only. It reports opportunities with exact CSS values, durations, and file:line evidence, but never edits files; implementation is handed off to a separate planning skill or done manually.

What duration should UI animations use?

Keep UI animations under 300ms: press feedback at 100-160ms, tooltips at 125-200ms, dropdowns at 150-250ms, and modals or drawers at 200-500ms. If a moment only works as a slow, showy animation, it fails the gate.

When is it appropriate to add delightful or bouncy animations?

Reserve delight for rare, first-time moments like onboarding, empty states, and success or celebration screens. At these low frequencies, bounce, stagger, and longer beats are welcome; anywhere frequent, they become annoying.