find-animation-opportunities

Scan a codebase for UI moments that should animate and propose exact motion values.

Updated Jul 14, 2026
One-click install
npx skills add https://github.com/quanthubbr/tron-claude-config --skill find-animation-opportunities-quanthubbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/quanthubbr/tron-claude-config/tree/main/managed/skills/emilkowalski/find-animation-opportunities
Command: npx skills add https://github.com/quanthubbr/tron-claude-config --skill find-animation-opportunities-quanthubbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often miss the few moments where motion genuinely helps, or get over-animated with decorative effects that slow users down. This Skill sweeps your codebase for high-leverage animation opportunities while rejecting candidates that would make the UI feel sluggish. ## Core Features & Use Cases - Opportunity Sweep: Hunts known seams like 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 is filtered by frequency, purpose, speed budget, and function, so only high-conviction suggestions survive. - Precise Recipes: Each suggestion includes exact durations, easing curves, transform values, reduced-motion handling, and file:line evidence, plus a required list of rejected candidates. - Use Case: Ask it to review a settings page and receive a table of 3-5 concrete motion suggestions (e.g., toast enter/exit via @starting-style with 400ms ease) alongside explicit rejections like the command palette. ## Quick Start Ask the assistant to find animation opportunities in your components directory and report what should and should not animate.

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 my UI should animate?▼

Run a sweep of your components looking for pressable elements without :active states, conditional renders that teleport, and panels disconnected from their triggers. Each candidate is gated by 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 per day should never animate, since motion makes them feel slow. Functional data visualizations users read should also stay static.

Does this skill modify my source code?▼

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

What animation durations are recommended for UI elements?▼

Press feedback runs 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Suggestions failing these budgets are rejected.

When should I use review-animations instead of finding opportunities?▼

Use review-animations when auditing existing animations for quality, and improve-animations when planning fixes for them. This skill only finds new opportunities where motion is missing.