find-animation-opportunities

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

70|4|Updated Jul 22, 2025
One-click install
npx skills add https://github.com/AlexW00/Zettel --skill find-animation-opportunities-alexw00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/AlexW00/Zettel/tree/main/.agents/skills/find-animation-opportunities
Command: npx skills add https://github.com/AlexW00/Zettel --skill find-animation-opportunities-alexw00

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 for the few moments that genuinely benefit from animation and rejects everything else, producing a short, high-conviction list instead of a wishlist. ## Core Features & Use Cases - Opportunity sweep: Hunts known seams such as missing press feedback, teleporting conditional renders, popovers with no spatial origin, snapping accordions, and gesture handlers without physics. - Four-question gate: Every candidate must pass frequency, purpose, speed, and function checks, with keyboard-initiated and high-frequency actions automatically rejected. - Exact motion recipes: Each suggestion includes concrete durations, easing curves, transform values, reduced-motion handling, and file:line evidence, plus a required list of rejected candidates. - Use Case: Ask it to review a React app's components before a polish pass; it returns a table of at most 5-7 animation opportunities ordered by leverage, each ready to hand off for implementation. ## Quick Start Ask the assistant to scan this codebase for UI moments that should be animated and report exact motion recipes with file and line references.

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 places in my app that should be animated?▼

Run a sweep over known seams: pressable elements without active states, conditional renders that teleport content, popovers with no transform origin, and drag handlers without springs. 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 a day should never animate, since motion makes them feel slow. Functional, information-dense UI such as data charts the user is reading should also stay static.

Does this skill implement the animations it suggests?▼

No, it is strictly read-only and never modifies source code. It reports exact motion recipes with file:line evidence, which you hand off to an implementation skill such as improve-animations or apply yourself.

What duration should UI animations use?▼

Press feedback runs 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Any suggestion that only works as a slow, showy animation fails the gate.

When should I use this instead of reviewing existing animations?▼

Use it when asking what could be animated or how to make an interface feel more alive. For auditing or fixing animations that already exist, use review-animations or improve-animations instead.