find-animation-opportunities

Scan a codebase for UI moments that warrant motion and propose exact animation recipes.

Updated May 5, 2026
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill find-animation-opportunities-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/find-animation-opportunities
Command: npx skills add https://github.com/josippapez/ai-setup --skill find-animation-opportunities-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because teams either skip animation entirely or add it indiscriminately. This Skill sweeps a codebase for moments that genuinely benefit from motion, rejects everything that should stay still, and proposes precise, implementable animation recipes without touching source code. ## Core Features & Use Cases - Four-question gate: Every candidate is filtered by frequency, purpose, speed budget, and function, so only high-conviction opportunities survive. - Exact motion recipes: Each suggestion includes concrete values (durations, cubic-bezier easings, transform/opacity properties, reduced-motion handling) with file:line evidence. - Mandatory rejection list: The report must include 2-5 considered-and-rejected candidates, preventing over-animation wishlists. - Use Case: Ask it to review a React app's components; it returns a table of at most 5-7 ordered suggestions, such as adding a 160ms scale(0.97) press state to buttons or a @starting-style entrance for toasts, plus a verdict on overall motion health. ## Quick Start Ask the AI to find animation opportunities in this codebase and report which UI moments should animate and which should not.

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 this Skill against your codebase to sweep for feedback gaps, teleporting state, missing spatial stories, and gesture seams. It returns an ordered table of at most 5-7 suggestions, each with file:line evidence and exact CSS or spring values.

What UI elements should never be animated?▼

Keyboard-initiated, high-frequency actions like command palettes and shortcuts should never animate, since repetition makes motion feel slow. Functional, data-dense surfaces like analytics charts also fail the gate because decoration hinders reading.

Does this Skill implement the animations it suggests?▼

No, it is strictly read-only and never modifies source code. Each suggestion is a precise recipe you can hand to the improve-animations skill or any agent to implement.

How is this different from reviewing existing animations?▼

This Skill only finds new opportunities where motion is missing. For auditing or fixing animations that already exist, use the review-animations or improve-animations skills instead.

What animation duration budgets does it enforce?▼

Suggestions must fit standard budgets: 100-160ms for press feedback, 125-200ms for tooltips, 150-250ms for dropdowns, and 200-500ms for modals and drawers. Anything that only works as a slow, showy animation is rejected.