find-animation-opportunities

Scan a codebase for UI moments that warrant motion and propose exact animation recipes.

Updated Sep 7, 2026
One-click install
npx skills add https://github.com/raphaelmans/spectralpointengineering --skill find-animation-opportunities-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/raphaelmans/spectralpointengineering/tree/main/.skillshare/skills/find-animation-opportunities
Command: npx skills add https://github.com/raphaelmans/spectralpointengineering --skill find-animation-opportunities-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often feel static or jarring because teams either skip animation entirely or add it everywhere. This Skill sweeps a codebase for moments that genuinely benefit from motion, rejects candidates that would make the UI sluggish, and reports precise, ready-to-implement animation recipes without touching 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, with file:line evidence. - Four-question gate: Every candidate must pass frequency, purpose, speed, and function checks, so keyboard-driven or high-frequency interactions are rejected outright. - Exact motion recipes: Each suggestion includes concrete durations, easing curves, transform and opacity values, reduced-motion handling, and hover gating, capped at 5-7 suggestions ordered by leverage. - Use Case: Ask it to review a Next.js app's components before a polish pass; it returns a table of high-conviction animation opportunities plus a list of deliberately rejected candidates. ## Quick Start Ask the assistant to find animation opportunities in the src/components directory and report what could 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 what parts of my UI should be animated?▼

Run this Skill against your components to sweep for known opportunity seams like missing press feedback, teleporting conditional renders, and panels with no spatial origin. It returns a table of suggestions with exact durations, easing curves, and file:line evidence.

What UI elements should never be animated?▼

Keyboard-initiated, high-frequency interactions like command palettes and shortcuts should never be animated because repetition makes them feel slow. Functional, information-dense surfaces like data charts also reject decorative motion since it hinders reading.

Does this Skill modify my source code?▼

No, it is strictly read-only and never edits files. It reports suggestions with exact values, and implementation is handed off to a separate planning skill or done manually by the developer.

How is this different from reviewing existing animations?▼

This Skill only finds new opportunities where motion is missing. Reviewing or fixing animations that already exist is handled by separate review-animations and improve-animations skills.

What duration and easing values does it recommend?▼

Suggestions use standard budgets: 100-160ms for press feedback, 150-250ms for dropdowns, and 200-500ms for modals and drawers. Easing comes from shared tokens like cubic-bezier(0.23, 1, 0.32, 1) for ease-out, animating only transform and opacity.