find-animation-opportunities

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

Updated Aug 25, 2026
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill find-animation-opportunities-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/find-animation-opportunities
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill find-animation-opportunities-klyrhonmiko

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 everywhere makes products sluggish. This Skill sweeps a codebase for genuine animation opportunities while rejecting candidates that would hurt usability, 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, so keyboard-initiated or high-frequency interactions are rejected outright. - Precise Recipes: Each suggestion includes exact durations, easing curves, transform and opacity values, reduced-motion handling, and file:line evidence. - Use Case: Ask it to review a React app's components and receive a table of at most 5-7 ranked motion suggestions plus a required list of rejected candidates explaining why each was filtered out. ## Quick Start Ask the AI to find animation opportunities in your UI codebase and report where motion would genuinely improve the experience.

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?▼

Sweep for known seams: pressable elements without :active states, conditional renders that appear instantly, panels disconnected from their triggers, and flat empty or success states. Each candidate should pass frequency, purpose, speed, and function checks 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, information-dense UI such as data graphs the user is reading should also stay static.

Does this skill modify my source code to add animations?▼

No, it is strictly read-only and only reports suggestions with exact values and file:line evidence. To implement a suggestion, hand the recipe off to an implementation skill such as improve-animations or another agent.

What duration should UI animations use?▼

Standard budgets keep UI animation under 300ms: press feedback at 100-160ms, tooltips and small popovers at 125-200ms, dropdowns at 150-250ms, and modals or drawers at 200-500ms. Only marketing or explanatory motion can run longer.

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

Use review-animations when you want to audit animations that already exist in the interface, and improve-animations when you want a plan to fix them. Finding opportunities is only for discovering moments that currently have no motion but should.