find-animation-opportunities

Scans a codebase for UI moments that should animate and proposes exact motion recipes.

Updated Aug 9, 2026
One-click install
npx skills add https://github.com/jwinar/carpet_gato --skill find-animation-opportunities-jwinar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: find-animation-opportunities
Source: https://github.com/jwinar/carpet_gato/tree/main/.claude/skills/emil-kowalski-design/find-animation-opportunities
Command: npx skills add https://github.com/jwinar/carpet_gato --skill find-animation-opportunities-jwinar

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 feel sluggish. This Skill sweeps a codebase for genuine animation opportunities, rejects candidates that should never animate, and reports precise motion recipes without touching source code. ## Core Features & Use Cases - Four-question gate: Every candidate is filtered by frequency, purpose, speed budget, and function, so only high-conviction suggestions survive. - Exact motion recipes: Each suggestion includes concrete values such as cubic-bezier curves, durations in milliseconds, transform and opacity properties, reduced-motion handling, and file:line evidence. - Required rejection list: The report documents 2-5 considered-and-rejected candidates with the gate question that killed each, preventing over-animation. - Use Case: Ask it to review a React app's components before a design polish pass; it returns an ordered table of at most 5-7 suggestions, for example adding @starting-style entry transitions to toasts or scale(0.97) press feedback to buttons. ## Quick Start Ask the assistant to find animation opportunities in this codebase 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 which parts of my UI should be animated?▼

Run this Skill against your codebase and it sweeps known opportunity seams such as conditional renders, missing :active states, accordions, and drag handlers. Each surviving candidate is reported with file:line evidence and an exact motion recipe.

What animation duration should UI transitions use?▼

The Skill enforces standard budgets: press feedback at 100-160ms, tooltips 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.

Does this Skill modify my source code?▼

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

When should UI elements not be animated?▼

Keyboard-initiated actions used 100+ times per day, such as command palettes, should never animate. Functional, information-dense UI like data charts should also stay static because decoration hinders reading.

How is this different from reviewing existing animations?▼

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