find-animation-opportunities

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

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/falentio/cimi --skill find-animation-opportunities-falentio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/falentio/cimi/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/falentio/cimi --skill find-animation-opportunities-falentio

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 produces sluggish, over-animated UIs. This Skill sweeps a codebase for genuine animation opportunities, filters them through a strict frequency/purpose/speed/function gate, and rejects everything that should stay still. ## 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, each with file:line evidence. - Four-question gate: Every candidate must pass frequency, purpose, speed (under 300ms for UI), and function checks, so high-frequency keyboard-driven surfaces are rejected outright. - Precise recipes: Each suggestion includes exact durations, easing curves, transform/opacity values, reduced-motion handling, and hover gating, plus a required list of deliberately rejected candidates. - Use Case: Ask it to review a dashboard app and receive a ranked table of at most 5-7 high-leverage motion suggestions, such as toast enter/exit transitions via @starting-style, alongside explicit rejections like the command palette. ## Quick Start Ask the assistant to find animation opportunities in this repository and report the top 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 for known opportunity seams: pressable elements without :active states, conditional renders that teleport, panels disconnected from their triggers, and flat empty or success states. Each candidate must pass a frequency, purpose, speed, and function gate before being suggested.

What UI elements should never be animated?

Keyboard-initiated, high-frequency surfaces like command palettes and shortcuts should never animate, since repeated hundreds of times daily animation makes them feel slow. Functional data visualizations users read should also stay still, because decorative motion hinders comprehension.

Does this skill implement the animations it suggests?

No, it is strictly read-only and never modifies source code. It reports suggestions with exact values and hands implementation off to a separate skill such as improve-animations or to the developer directly.

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 animation fail the gate.

When is it better to add no animation at all?

When a candidate fails any gate question: too frequent, no nameable purpose beyond looking cool, too slow for its budget, or decorative motion on functional dense UI. A short list of high-conviction suggestions beats a long wishlist, and reporting zero opportunities is a valid result.