skills.rest
m-de-graaff
m-de-graaffCOMMUNITY
Explore all skills by this author →
GitHub

finding-animation-opportunities

Scans interface code for moments that benefit from motion and proposes exact animation recipes.

Updated Aug 3, 2026
Search Tags:#frontend#animation#ux#micro-interactions#design engineering#css transitions#ui motion
One-click install
npx skills add https://github.com/m-de-graaff/skills --skill finding-animation-opportunities-m-de-graaff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: finding-animation-opportunities
Source: https://github.com/m-de-graaff/skills/tree/main/skills/finding-animation-opportunities
Command: npx skills add https://github.com/m-de-graaff/skills --skill finding-animation-opportunities-m-de-graaff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel flat or static without anyone knowing why, and ad-hoc animation suggestions tend to over-animate. This Skill sweeps UI code for moments that genuinely benefit from motion, filters candidates through a strict gate, and reports a short list of high-conviction opportunities with exact recipes. ## Core Features & Use Cases - Opportunity sweep: Hunts feedback gaps, teleporting state, missing spatial stories, group entrances, gesture seams, and delight moments with file:line evidence. - Four-question gate: Filters every candidate by frequency, purpose, speed, and function, rejecting most suggestions to prevent over-animation. - Structured report: Outputs a leverage-ordered table of opportunities with exact duration and easing values, a required list of rejected candidates, and a verdict paragraph. - Use Case: Ask it to review a React app's components; it returns five to seven concrete suggestions like adding @starting-style entry motion to a toast, plus the candidates it deliberately rejected and why. ## Quick Start Ask the assistant to find animation opportunities in your interface and report where motion is missing.

Frequently Asked Questions about finding-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?▼

Sweep the codebase for feedback gaps, teleporting state, missing spatial stories, group entrances, gesture seams, and delight moments. Filter each candidate by frequency, purpose, speed, and function, then report only high-conviction opportunities with exact motion recipes.

What makes a good UI animation candidate versus a bad one?▼

Good candidates serve a named purpose like feedback, spatial consistency, or preventing jarring change, and occur occasionally rather than constantly. Actions triggered 100+ times a day, like keyboard navigation, are rejected outright since frequent motion slows users down.

Does this skill implement the animations it suggests?▼

No, it is strictly read-only. It reports opportunities with exact recipes including durations, easings, and reduced-motion handling, but never modifies source code. Implementation is handed off separately.

When should I not add animation to an interface?▼

Avoid motion on high-frequency actions like command palettes and core navigation, and on dense functional UI like charts where decoration hinders reading. Daily use argues for less motion, not more.

How is finding animation opportunities different from reviewing existing animations?▼

Finding opportunities discovers where motion is missing and proposes new recipes. Reviewing or auditing animations evaluates motion that already exists in the interface, which is handled by separate skills.

Related Skills

Explore More Design & Creative Skills→
Prat05devsPrat05devs
2

motion-video-system

Define motion tokens, choreography rules, and video direction from a project design brief.

Community
Intermediate
fayazarafayazara
9

review-animations

Evaluate CSS and Framer Motion animations for easing, duration, and GPU-accelerated properties.

Community
Intermediate
Asymmetric-alAsymmetric-al
1

anim

Apply subtle motion to React UI elements with motion/react.

Official
Intermediate
dprice-devdprice-dev

add-endpoint

Add a REST endpoint to a Spring Boot 4 project via a spec-first workflow.

Community
Advanced