find-animation-opportunities

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

1|Updated Aug 28, 2026
One-click install
npx skills add https://github.com/mooch10/mochiptos --skill find-animation-opportunities-mooch10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/mooch10/mochiptos/tree/main/frontend/.agents/find-animation-opportunities
Command: npx skills add https://github.com/mooch10/mochiptos --skill find-animation-opportunities-mooch10

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 sluggish. This Skill sweeps a codebase for genuine animation opportunities, filters out 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 flows and functional data displays are explicitly rejected. - Exact Motion Recipes: Each suggestion includes concrete durations, easing curves, transform and opacity values, reduced-motion handling, and file:line evidence, capped at 5-7 ordered by leverage. - Use Case: Ask it to review a Next.js dashboard before launch; it returns a table of high-conviction suggestions (e.g., toast enter/exit via @starting-style, button :active scale feedback) plus a required list of rejected candidates explaining why each was declined. ## Quick Start Ask the assistant to find animation opportunities in this repository and report the highest-leverage suggestions with exact motion 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 codebase to sweep known seams like missing :active press states, conditional renders with no transition, and popovers lacking a spatial link to their trigger. It returns a table of at most 5-7 suggestions with exact durations, easing curves, and file:line evidence.

What UI elements should never be animated?▼

Keyboard-initiated, high-frequency actions like command palettes and shortcuts should never animate because repetition makes them feel slow. Functional, information-dense surfaces such as analytics charts should also stay static since decorative motion hinders reading.

Does this Skill modify my source code?▼

No, it is strictly read-only. It reports opportunities with exact motion values and file:line references, then hands implementation off to a separate planning skill or to the developer.

How is finding animation opportunities different from reviewing existing animations?▼

This Skill only searches for missing motion and proposes new recipes. Auditing or fixing animations that already exist belongs to separate review and improvement skills, which this Skill explicitly defers to.

What duration and easing values does it recommend for UI animation?▼

Suggestions follow standard budgets: press feedback at 100-160ms, tooltips at 125-200ms, dropdowns at 150-250ms, and modals at 200-500ms. It reuses the repository's existing easing tokens such as cubic-bezier ease-out curves rather than inventing new ones.