find-animation-opportunities

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

Updated Jul 20, 2026
One-click install
npx skills add https://github.com/Jatinkrmahato993203/crime --skill find-animation-opportunities-jatinkrmahato993203
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/Jatinkrmahato993203/crime/tree/main/skills/find-animation-opportunities
Command: npx skills add https://github.com/Jatinkrmahato993203/crime --skill find-animation-opportunities-jatinkrmahato993203

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because state changes, entrances, and interactions lack motion, yet adding animation everywhere makes products sluggish. This Skill sweeps a codebase or UI for the few moments that genuinely benefit from motion, rejects everything else, and reports precise animation recipes without modifying any source code. ## Core Features & Use Cases - Opportunity Sweep: Hunts known seams such as missing press feedback, teleporting conditional renders, panels with no spatial connection to their trigger, and flat empty states, each with file:line evidence. - Four-Question Gate: Filters every candidate through frequency, purpose, speed budget, and function checks so high-frequency or keyboard-initiated interactions are rejected outright. - Exact Motion Recipes: Every suggestion includes concrete values (durations, cubic-bezier easings, transform and opacity properties), reduced-motion handling, and a required list of rejected candidates with reasons. - Use Case: Ask it to review a React dashboard before launch; it returns a table of 5-7 high-leverage animation opportunities (e.g., toast entrances via @starting-style, button press scale at 160ms) plus the candidates it deliberately rejected. ## Quick Start Ask the assistant to find animation opportunities in this codebase and report where motion would genuinely improve the interface.

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 known opportunity seams: missing :active press states, conditional renders with no transition, popovers lacking transform-origin ties to their trigger, and flat empty states. It returns a table of at most 5-7 suggestions with exact durations and easing values.

What UI elements should never be animated?▼

Keyboard-initiated, high-frequency interactions like command palettes and shortcuts should never be animated because they fire 100+ times per day and animation makes them feel slow. Functional data visualizations users are actively reading should also stay static, since decorative motion hinders comprehension.

Does this Skill modify my source code or implement animations?▼

No, it is strictly read-only. It reports opportunities with exact motion recipes (curves, durations, properties) but never edits files; implementation is handed off to a separate skill such as improve-animations or done manually.

What duration should UI animations use?▼

Standard budgets keep UI animation under 300ms: press feedback 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.

How is this different from reviewing existing animations?▼

This Skill only finds places that lack motion and should have it. Reviewing or fixing animations that already exist is handled by separate skills (review-animations and improve-animations), which audit current motion rather than hunt for new opportunities.