find-animation-opportunities

Scans a codebase for UI moments that would benefit from motion and proposes exact animation recipes.

Updated Jul 15, 2026
One-click install
npx skills add https://github.com/Alex918-stack/papertrader --skill find-animation-opportunities-alex918-stack
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/Alex918-stack/papertrader/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/Alex918-stack/papertrader --skill find-animation-opportunities-alex918-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because state changes, entrances, and interactions lack motion, yet adding animation everywhere makes products feel sluggish. This Skill sweeps a codebase for the few moments that genuinely benefit from animation and rejects everything else, producing a short, high-conviction list instead of a wishlist. ## 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, with keyboard-initiated and 100+/day interactions automatically rejected. - Precise Recipes: Each suggestion includes exact durations, easing curves, transform values, reduced-motion handling, and file:line evidence, capped at 5-7 suggestions ordered by leverage. - Use Case: Ask it to review a Next.js dashboard before launch; it returns a table of 3-5 animation opportunities (e.g., toast entrances via @starting-style, button press scale at 160ms) plus a required list of rejected candidates explaining why the command palette and data charts must stay static. ## Quick Start Ask the agent to find animation opportunities in this repository and report which UI moments should and should not be animated.

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 a sweep for known seams: pressable elements without :active states, conditional renders that teleport, panels disconnected from their triggers, and flat empty or success states. 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 per day should never be animated, since motion makes them feel slow. Functional data visualizations users read or act on should also stay static, as decoration hinders comprehension.

Does this tool modify my source code to add animations?

No, it is strictly read-only and only reports opportunities with exact recipes including durations, easing curves, and file:line references. Implementation is handed off to a separate planning skill or done manually by the developer.

What duration should UI animations use?

Press feedback runs 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Any UI animation that only works as a slow, showy effect fails the gate and gets rejected.

When is it appropriate to add delightful or bouncy animations?

Delight is only appropriate at rare, first-time moments like onboarding, empty states, success confirmations, and celebrations. At these low-frequency moments, bounce, stagger, and longer beats are welcome; everywhere else restraint wins.