find-animation-opportunities

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

Updated Aug 10, 2026
One-click install
npx skills add https://github.com/KryptaMedina7/quero-s-home --skill find-animation-opportunities-kryptamedina7
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/KryptaMedina7/quero-s-home/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/KryptaMedina7/quero-s-home --skill find-animation-opportunities-kryptamedina7

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 sluggish. This Skill audits a codebase or UI and identifies only the high-leverage moments that genuinely benefit from animation, rejecting everything else. ## Core Features & Use Cases - Opportunity Sweep: Hunts known seams such as missing press feedback, teleporting conditional renders, accordions that snap open, and panels with no spatial connection to their trigger. - Four-Question Gate: Every candidate is filtered by frequency, purpose, speed budget, and function, so keyboard-driven or high-frequency interactions are explicitly rejected. - Precise Recipes: Each suggestion includes exact durations, easing curves, transform values, reduced-motion handling, and file:line evidence, capped at 5-7 suggestions ordered by leverage. - Use Case: Ask it to review a React app's components before a polish pass; it returns a table of justified motion suggestions plus a required list of rejected candidates explaining why they were excluded. ## Quick Start Ask the assistant to find animation opportunities in your components directory 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 components directory. It sweeps for known opportunity seams like missing :active states, conditional renders with no transition, and snapping accordions, then reports at most 5-7 gated suggestions with exact values.

What is the difference between finding and reviewing animations?

This Skill only searches for places that lack motion and proposes new animations. For auditing existing animations use review-animations, and for planning fixes to them use improve-animations; this Skill never modifies source code.

Which UI elements should never be animated?

Keyboard-initiated, high-frequency interactions like command palettes and shortcuts should never be animated, since they fire 100+ times per day and motion makes them feel slow. The Skill's frequency gate rejects these automatically.

Does this animation audit modify my source code?

No. The Skill is strictly read-only: it reports suggestions with file:line evidence and exact CSS or spring values, but never edits files. Implementation is handed off to improve-animations or done manually.

What animation duration budgets does it recommend?

Press feedback stays at 100-160ms, tooltips and small popovers 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.