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.