find-animation-opportunities

Scans UI codebases for missing animation opportunities and proposes exact motion values.

Updated Aug 28, 2026
One-click install
npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill find-animation-opportunities-trobias
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/trobias/portfolio-nextjs-v2/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill find-animation-opportunities-trobias

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because developers either skip animation entirely or add it indiscriminately. This Skill sweeps a codebase for moments that genuinely benefit from motion, rejects candidates that would make the UI feel sluggish, and reports precise, implementable animation recipes without touching any source code. ## Core Features & Use Cases - Opportunity Detection: Sweeps for feedback gaps, teleporting state, missing spatial stories, group entrances, gesture seams, and delight moments, each backed by file:line evidence. - Four-Question Gate: Filters every candidate through frequency, purpose, speed, and function checks so only high-conviction suggestions survive, capped at 5-7 per report. - Exact Motion Recipes: Every suggestion includes concrete durations, easing curves, transform values, reduced-motion handling, and hover gating aligned with the repo's existing design tokens. - Use Case: Ask it to review a Next.js portfolio or dashboard before launch; it returns a table of 3-5 animation opportunities (e.g., toast entrances, press feedback) plus a list of deliberately rejected candidates like command palette transitions. ## Quick Start Ask the assistant to find animation opportunities in this project and report what should and should not be animated.

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 a sweep for common seams: pressable elements without :active states, conditional renders that teleport content, popovers disconnected from their triggers, and lists that pop in without stagger. Each candidate must pass frequency, purpose, speed, and function checks before being suggested.

What UI elements should never be animated?▼

Keyboard-initiated actions like command palettes and shortcuts used 100+ times per day should never animate, since motion makes them feel slow. Functional data visualizations users are actively reading should also stay static, as decoration hinders comprehension.

Does this skill modify my source code?▼

No, it is strictly read-only. It reports opportunities with exact file:line references and complete motion recipes, but implementation is handed off to a separate skill or done manually by the developer.

What animation durations are recommended for UI elements?▼

Press feedback runs 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Only marketing or explanatory animations may exceed these budgets.

How is this different from reviewing existing animations?▼

This skill only finds missing animation opportunities in static interfaces. Auditing existing animations for quality issues or planning fixes for broken motion belongs to separate review and improvement skills.