find-animation-opportunities

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

Updated Sep 21, 2026
One-click install
npx skills add https://github.com/maxentr/la-cuisine-de-mm --skill find-animation-opportunities-maxentr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/maxentr/la-cuisine-de-mm/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/maxentr/la-cuisine-de-mm --skill find-animation-opportunities-maxentr

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 produces sluggish, over-animated UIs. This Skill sweeps a codebase for genuine animation opportunities while rejecting candidates that would hurt usability. ## 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 physics. - Four-Question Gate: Every candidate must pass frequency, purpose, speed, and function checks, so high-frequency or keyboard-initiated interactions are rejected outright. - 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 React app's components and receive a report of where toasts, accordions, or buttons should animate, plus an explicit list of rejected candidates like command palettes. ## Quick Start Ask the assistant to scan this codebase for UI elements that should animate but currently do not, and report exact motion values for each.

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 places in my UI that should be animated?

Run a sweep over known opportunity seams: pressable elements without :active states, conditional renders that teleport, panels disconnected from their triggers, and drag handlers without springs. Each candidate is gated on frequency, purpose, speed, and function before being suggested.

What UI elements should never be animated?

Keyboard-initiated, high-frequency interactions like command palettes and shortcuts should never animate, since repetition hundreds of times a day makes them feel slow. Functional data visualizations users read should also stay static, as decoration hinders comprehension.

Does this skill modify my source code to add animations?

No, it is strictly read-only. It reports opportunities with exact values such as durations, cubic-bezier curves, and transform properties, then hands off implementation to a separate planning skill or the developer.

What duration should UI animations use?

Standard budgets keep UI animation under 300ms: press feedback at 100-160ms, tooltips at 125-200ms, dropdowns at 150-250ms, and modals or drawers at 200-500ms. Suggestions that only work as slow, showy animations fail the gate.

When is it appropriate to add delightful or bouncy animations?

Delight is reserved for rare, first-time moments like onboarding, empty states, success screens, and celebrations. At these low frequencies, bounce, staggered entrances, and longer beats are welcome; anywhere else they are rejected.