improve-easings

name	improve-easings
description	Add or improve easing curves in specific CSS or Tailwind files. Use when asking "improve the transitions in this file", "replace the default ease", "add easing to my animations", or "make this animation snappier".
allowed-tools	mcp__easingwizard__get_presets, mcp__easingwizard__create_bezier_curve, mcp__easingwizard__create_spring_curve, mcp__easingwizard__create_bounce_curve, mcp__easingwizard__create_wiggle_curve, mcp__easingwizard__create_overshoot_curve
disable-model-invocation	true

Apply Easing to Code

The user wants to add or improve easing in their CSS or Tailwind code.

Step 1: Identify the Target

Read the file(s) the user specifies. If no file is specified, ask which file to modify.

Look for:

• CSS transition and transition-timing-function properties
• CSS animation and animation-timing-function properties
• Tailwind CSS ease-* and ease-[...] utility classes
• Tailwind CSS transition-* utilities without an easing class

Step 2: Assess Current Easings

For each animation/transition found, categorize the current easing:

• Browser default — ease, linear, ease-in, ease-out, ease-in-out, or no easing specified
• Custom — cubic-bezier(...), linear(...), or ease-[...] with custom values

Step 3: Determine Replacements

For browser defaults or missing easings, determine the best replacement by analyzing:

• The CSS property being animated (opacity, transform, width, etc.)
• The context (hover state, modal, dropdown, page transition, etc.)
• The user's stated intent if provided (e.g., "make it bouncier")

Use the MCP tools to generate the appropriate curve. Prefer presets via get_presets before creating custom curves.

Step 4: Apply Changes

Modify the code directly:

• For CSS: Replace or add the transition-timing-function or animation-timing-function value
• For CSS shorthand: Update the easing value within transition: property duration easing or animation: name duration easing
• For Tailwind: Replace or add the ease-[...] utility class

Supported Formats

• CSS transition-timing-function / animation-timing-function
• CSS shorthand transition / animation
• Tailwind CSS ease-* and ease-[...] utilities

Not Supported

• JavaScript animation libraries (Framer Motion, GSAP, anime.js) — not in scope for this version