find-animation-opportunities

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because state changes, entrances, and feedback moments lack motion, yet adding animation indiscriminately makes products feel slow. This Skill sweeps a codebase for genuine animation opportunities, rejects candidates that should never animate, and reports precise motion recipes without touching source code. ## 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 flat empty or success states. - Four-question gate: Every candidate must pass frequency, purpose, speed, and function checks, so high-frequency keyboard-driven UI is explicitly rejected rather than animated. - Exact motion recipes: Each suggestion includes concrete durations, easing curves, transform and opacity values, reduced-motion handling, and file:line evidence. - Use Case: Ask it to review a React app's components and receive a ranked table of 5-7 animation suggestions plus a list of deliberately rejected candidates, ready to hand off to an implementation skill. ## Quick Start Ask the agent to find animation opportunities in your components directory and report the highest-leverage suggestions with exact values.

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?

Run this Skill against your components to sweep for known opportunity seams: missing :active press states, conditional renders that teleport, popovers with no transform-origin link to their trigger, and flat empty or success states. It returns a ranked table with exact durations and easing values per suggestion.

What UI elements should never be animated?

Keyboard-initiated, high-frequency actions like command palettes and shortcut-driven navigation should never animate, since repetition hundreds of times a day makes them feel slow. Functional data visualizations users read should also stay static, because decorative motion hinders comprehension.

Does this Skill modify my source code?

No, it is strictly read-only. It reports opportunities with file:line evidence and exact motion values, then hands off implementation to a separate skill such as improve-animations or to the developer directly.

What animation durations are recommended for UI elements?

Press feedback uses 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Suggestions animate only transform and opacity and include reduced-motion handling.

When should I use review-animations instead of this Skill?

Use review-animations when you want to critique animations that already exist in the codebase. Use find-animation-opportunities only when searching for static moments that should gain motion, since it does not evaluate existing animations.