find-animation-opportunities

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

Updated Jul 30, 2026
One-click install
npx skills add https://github.com/j172/bid --skill find-animation-opportunities-j172
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/j172/bid/tree/main/agent/skills/find-animation-opportunities
Command: npx skills add https://github.com/j172/bid --skill find-animation-opportunities-j172

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often miss small moments where motion would genuinely help, while over-animating everything else makes products feel sluggish. This Skill sweeps a codebase or UI for high-leverage 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 gesture handlers without spring physics. - Four-question gate: Every candidate must pass frequency, purpose, speed, and function checks, so keyboard-driven or high-frequency interactions are rejected outright. - Exact-value proposals: Each suggestion includes concrete durations, easing curves like cubic-bezier(0.23, 1, 0.32, 1), transform and opacity properties, plus reduced-motion handling. - Use Case: Ask it to review a React app's components and receive a table of 5-7 ordered suggestions with file:line evidence, a list of deliberately rejected candidates, and a verdict on how much motion the interface actually needs. ## Quick Start Ask the agent to find animation opportunities in this codebase 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 a sweep over known seams: pressable elements without :active states, conditional renders that teleport content, 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 actions like command palettes and shortcuts used 100+ times a day should never animate, since motion makes them feel slow. Functional data visualizations users read should also stay static, because decoration 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 planning skill or to the developer directly.

What duration should UI animations use?

Standard budgets keep UI motion 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 should I use this instead of an animation review tool?

Use it when asking what could be animated in an interface that currently has little or no motion. For auditing or fixing animations that already exist, use a review or improvement skill instead, since this one only finds new opportunities.