skills.rest
emilkowalski
emilkowalskiCOMMUNITY
Explore all skills by this author →
Website𝕏@emilkowalskiGitHub

find-animation-opportunities

Scans a codebase for UI moments that would benefit from motion and proposes exact animation recipes.

34.1k|1.9k|Updated Mar 16, 2026
Search Tags:#Frontend#micro-interactions#easing#Animation#UI motion#CSS transitions#Design Engineering
One-click install
npx skills add https://github.com/emilkowalski/skills --skill find-animation-opportunities
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/emilkowalski/skills/tree/main/skills/find-animation-opportunities
Command: npx skills add https://github.com/emilkowalski/skills --skill find-animation-opportunities

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Interfaces often feel static or jarring because teams don't know where motion would genuinely help, and adding animation everywhere makes products feel sluggish. This Skill sweeps your codebase for high-leverage animation opportunities while rejecting candidates that would hurt usability.

Core Features & Use Cases

  • Opportunity Detection: Searches for feedback gaps, teleporting state, missing spatial stories, group entrances, gesture seams, and delight moments, each with file:line evidence.
  • Four-Question Gate: Every candidate is filtered by frequency, purpose, speed budget, and function, so only high-conviction suggestions survive.
  • Precise Recipes: Each suggestion includes exact easing curves, durations, and properties (e.g. cubic-bezier(0.23, 1, 0.32, 1), 160ms press feedback), plus reduced-motion handling.
  • Use Case: Ask it to review a settings page; it returns a table of 3-5 ranked suggestions like "toast enters via @starting-style with translateY(100%), 400ms ease" alongside a list of deliberately rejected candidates.

Quick Start

Ask the agent to scan this codebase for places that would benefit from animation and report the top opportunities 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?▼

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

What UI elements should never be animated?▼

Keyboard-initiated actions like command palettes and shortcuts used 100+ times a day should never be animated, as motion makes them feel slow. Functional, information-dense UI like data charts should also stay static since decoration hinders reading.

Does this skill modify my source code?▼

No, it is strictly read-only and never modifies source code. It produces a report of suggestions with exact motion values, which you can hand off to an implementation skill like improve-animations or apply manually.

How is this different from reviewing existing animations?▼

This Skill finds places with no animation that should have motion. For critiquing animations that already exist, use review-animations; for auditing and planning fixes across a codebase, use improve-animations instead.

What duration and easing values does it recommend?▼

Suggestions use standard budgets: 100-160ms for press feedback, 150-250ms for dropdowns, and 200-500ms for modals and drawers. Easings come from a shared vocabulary such as cubic-bezier(0.23, 1, 0.32, 1) for ease-out, animating only transform and opacity.

Related Skills

Explore More Design & Creative Skills→
shipiitshipiit

motion-design

Standardize UI motion with token-based easings, durations, and stagger patterns.

Official
Advanced
Saifeldin2401Saifeldin2401

Improving Animations

Analyze codebase animation code for performance, accessibility, and design issues.

Community
Advanced
Festo-WampambaFesto-Wampamba

review-animations

Reviews animation and motion code for craft regressions.

Community
Advanced
ceshezceshez

animate

Add accessible micro-interactions and state transitions to UI workflows.

Community
Intermediate