find-animation-opportunities

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

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/beelabstudio/ai --skill find-animation-opportunities-beelabstudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/find-animation-opportunities
Command: npx skills add https://github.com/beelabstudio/ai --skill find-animation-opportunities-beelabstudio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often miss the few moments where motion genuinely helps, or worse, animate everything and feel sluggish. This Skill sweeps a codebase for high-leverage animation opportunities while rejecting candidates that would hurt usability, producing a precise, read-only report instead of an over-animated wishlist. ## 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 gesture seams lacking spring physics. - Four-question gate: Every candidate must pass frequency, purpose, speed, and function checks, so keyboard-driven or high-frequency interactions are rejected outright. - Exact motion recipes: Each suggestion includes concrete durations, easing curves, and properties (e.g. transform: scale(0.97) with transition: transform 160ms ease-out), plus reduced-motion handling. - Use Case: Ask it to review a React app's components; it returns a table of at most 5-7 ranked suggestions with file:line evidence, a required list of rejected candidates, and a verdict on how much motion the interface actually needs. ## Quick Start Ask the assistant to find animation opportunities in your UI components 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 my UI should animate?▼

Run this Skill against your components to sweep for feedback gaps, teleporting state, missing spatial stories, and gesture seams. It returns a ranked table of at most 5-7 suggestions, each with file:line evidence and exact transition values.

What animations should I avoid adding to a web app?▼

Never animate keyboard-initiated actions like command palettes or shortcuts used 100+ times a day, and avoid decoration on functional, data-dense UI. The Skill's gate rejects these candidates and lists them in a required rejected-candidates section.

Does this Skill modify my source code?▼

No, it is strictly read-only and never edits files. It reports suggestions with exact CSS values, and implementation is handed off to a separate skill such as improve-animations.

What duration should UI animations be?▼

Press feedback runs 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Suggestions that only work as slow, showy animations fail the speed gate.

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

Use review-animations to critique animations that already exist, and improve-animations to plan fixes for them. This Skill only discovers new opportunities where no motion exists yet.