find-animation-opportunities

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

Updated Sep 3, 2026
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill find-animation-opportunities-xzedm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill find-animation-opportunities-xzedm

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 feel sluggish. This Skill audits a codebase read-only and identifies only the high-leverage moments that genuinely deserve animation, with exact values for each. ## Core Features & Use Cases - Opportunity Sweep: Hunts known seams such as missing press feedback, teleporting conditional renders, popovers with no spatial connection to their trigger, and flat empty states. - Four-Question Gate: Every candidate must pass frequency, purpose, speed, and function checks, so most candidates are rejected and the report stays short and high-conviction. - 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 React app's components before a polish pass; it returns a table of at most 5-7 animation suggestions ordered by leverage, ready to hand off for implementation. ## Quick Start Ask the assistant to find animation opportunities in this codebase and report which UI moments should be animated 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 which parts of my UI should be animated?▼

Run a sweep over known seams: pressable elements without :active states, conditional renders that teleport, popovers disconnected from their trigger, and flat empty states. Each candidate is gated on frequency, purpose, speed, and function before being suggested.

What UI elements should never be animated?▼

Keyboard-initiated, high-frequency actions like command palettes and shortcuts should never be animated because repetition makes them feel slow. Functional, data-dense surfaces like analytics charts also reject decorative motion since it hinders reading.

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

No, it is strictly read-only. It reports opportunities with exact values and file:line evidence, then hands off implementation to a separate planning skill or to 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 motion fail the gate.

When is it appropriate to add delightful or bouncy animations?▼

Delight is allowed only at rare, first-time frequencies such as onboarding, empty states, success, and celebration moments. Everyday surfaces like navigation and toggles get subtle or no motion instead.