find-animation-opportunities

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

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

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 everywhere makes products feel sluggish. This Skill sweeps a codebase for genuine animation opportunities, rejects candidates that should never animate, and reports precise motion recipes without touching source code. ## Core Features & Use Cases - Opportunity sweep: Hunts known seams such as missing press feedback, teleporting conditional renders, accordions that snap open, and popovers with no spatial connection to their trigger. - Four-question gate: Filters every candidate by frequency, purpose, speed budget, and function so high-frequency or keyboard-driven UI is explicitly rejected. - Exact motion recipes: Each suggestion includes concrete durations, easing curves, transform and opacity values, reduced-motion handling, and file:line evidence. - Use Case: Ask it to review a Next.js dashboard before launch; it returns a ranked table of 5-7 high-leverage animation suggestions plus a list of deliberately rejected candidates. ## Quick Start Ask the assistant to find animation opportunities in this repository and report the highest-leverage suggestions with exact 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 this Skill against your codebase and it sweeps known seams like missing :active press states, conditional renders with no transition, and accordions that snap open. It returns a ranked table of suggestions with exact durations, easing curves, and file:line evidence.

What UI elements should never be animated?

Keyboard-initiated surfaces like command palettes and shortcuts used 100+ times a day should never animate, since motion makes them feel slow and delayed. Functional data visualizations users are actively reading should also stay static because decoration hinders comprehension.

Does this Skill modify my source code to add animations?

No, it is strictly read-only and only reports suggestions with exact motion values. To implement a suggestion, hand the recipe to an implementation skill such as improve-animations or apply it manually.

How is this different from reviewing existing animations?

This Skill only finds places with no animation that should have it. For auditing or fixing animations that already exist, use review-animations or improve-animations instead, as noted in the Skill's own scope boundaries.

What duration and easing values does it recommend for UI animation?

It follows standard budgets: press feedback at 100-160ms, tooltips at 125-200ms, dropdowns at 150-250ms, and modals at 200-500ms. Suggestions reuse the repo's existing easing tokens such as cubic-bezier(0.23, 1, 0.32, 1) and animate only transform and opacity.