find-animation-opportunities

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

2|Updated Jul 25, 2026
One-click install
npx skills add https://github.com/ankaboot-source/boucle --skill find-animation-opportunities-ankaboot-source
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/ankaboot-source/boucle/tree/main/.jcode/skills/find-animation-opportunities
Command: npx skills add https://github.com/ankaboot-source/boucle --skill find-animation-opportunities-ankaboot-source

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because teams either skip animation entirely or add it everywhere without judgment. This Skill sweeps a codebase for genuine animation opportunities, rejects candidates that would hurt usability, and reports precise motion recipes with exact durations, easings, and properties. ## Core Features & Use Cases - Opportunity sweep: Hunts known seams such as missing press feedback, teleporting state changes, 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-driven or high-frequency interactions are rejected outright. - Structured report: Outputs an ordered opportunities table with file:line evidence and exact CSS values, a required list of rejected candidates, and a verdict naming the highest-leverage suggestion. - Use Case: Ask it to review a React app's components before a polish sprint; it returns 5-7 concrete suggestions like adding @starting-style entry transitions to toasts, plus a list of places it deliberately chose not to animate. ## Quick Start Ask the assistant 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?

Sweep the codebase for known seams: elements with no :active state, conditional renders that appear instantly, popovers disconnected from their trigger, and flat empty or success states. Each candidate must 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 a day should never be animated, since motion makes them feel slow. Functional, information-dense UI such as data charts should also stay static because decoration hinders reading.

Does this skill implement the animations it suggests?

No, it is read-only and never modifies source code. It reports exact recipes with durations, easings, and properties, then hands off implementation to a separate skill such as improve-animations or to the developer.

What duration should UI animations use?

Press feedback runs 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Standard UI animation should stay under 300ms; only marketing or explanatory motion can run longer.

Why does the report include rejected animation candidates?

Listing rejected candidates with the gate question that killed them proves the sweep exercised restraint rather than producing a wishlist. It documents that high-frequency or decorative ideas were considered and deliberately excluded.