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.