skills.rest
mrestrepoj10
mrestrepoj10COMMUNITY
Explore all skills by this author →
GitHub

find-animation-opportunities

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

Updated Jul 30, 2026
Search Tags:#code audit#animation#ux#micro-interactions#design engineering#css transitions#ui motion
One-click install
npx skills add https://github.com/mrestrepoj10/re-hear --skill find-animation-opportunities-mrestrepoj10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/mrestrepoj10/re-hear/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/mrestrepoj10/re-hear --skill find-animation-opportunities-mrestrepoj10

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often ship with jarring instant state changes, missing press feedback, and teleporting content, while teams either add no motion or over-animate everything. This Skill audits a codebase for genuine animation opportunities and rejects candidates that would make the UI feel slow or decorative. ## Core Features & Use Cases - Four-question gate: Every candidate is filtered by frequency, purpose, speed budget, and function, so only high-conviction suggestions survive. - Precise motion recipes: Each suggestion includes exact durations, easing curves, transform values, reduced-motion handling, and file:line evidence. - Required rejection list: Reports 2-5 considered-but-rejected candidates with the gate question that killed them, preventing animation wishlists. - Use Case: Ask it to sweep a Next.js app's components; it returns a table of at most 5-7 ordered suggestions such as adding @starting-style toast entrances or scale(0.97) press feedback, plus a verdict on how much motion the interface actually needs. ## Quick Start Ask the agent to find animation opportunities in this repository and report the highest-leverage suggestions 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 and it sweeps known seams like conditional renders, missing :active states, accordions, and drag handlers. It returns at most 5-7 suggestions ordered by leverage, each with exact durations, easing curves, and file:line evidence.

What UI elements should never be animated?▼

Keyboard-initiated, high-frequency actions like command palettes and shortcuts should never be animated because repetition makes them feel slow. Functional data visualizations users read should also stay static, since decorative motion hinders comprehension.

Does this Skill implement the animations it suggests?▼

No, it is strictly read-only and never modifies source code. It produces a report with exact motion recipes that you hand off to an implementation skill like improve-animations or apply yourself.

What duration should UI animations use?▼

The Skill enforces standard budgets: press feedback at 100-160ms, tooltips at 125-200ms, dropdowns at 150-250ms, and modals or drawers at 200-500ms. Suggestions that only work as slow, showy animations fail the gate.

When should I use this instead of an animation review tool?▼

Use it when asking what could be animated in an interface that currently has little or no motion. For auditing or fixing animations that already exist, use review-animations or improve-animations instead.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
Cobalt-MoneyCobalt-Money
7

emil-design-eng

Encode design engineering principles for UI polish and animation.

Official
Advanced
reason-machinesreason-machines
4

design-motion-principles

Builds and audits UI animations using context-weighted motion design philosophies.

Official
Intermediate
reason-machinesreason-machines
4

prototype-to-figma-skill

Convert code prototypes into annotated Figma frames with design system component mapping.

Official
Advanced