Back to the catalog

easing-wizard

Generate professional CSS easing curves, audit animations, and get expert motion design advice — powered by Easing Wizard

Open source Repository Open in the app JSON README (API)

About

Generate professional CSS easing curves, audit animations, and get expert motion design advice — powered by Easing Wizard

Details

Kind
Plugins
Topic
No topic detected
Publisher
roydigerhund
Origin
marketplace
Category
ferramentas
Stars
1
Forks
1
Last push
2026-06-19T22:44:16Z
Repository state
ativo
Language
Shell
License
MIT
Added
2026-08-30 01:48:58
Updated
2026-08-30 01:48:58
Origin id
roydigerhund/easingwizard-claude-plugin/easing-wizard

README

# Easing Wizard — Claude Code Plugin

Easing Wizard helps developers replace generic CSS easing defaults with professional motion design curves. It provides 7 MCP tools for generating Bezier, Spring, Bounce, Wiggle, and Overshoot curves with 68 presets covering common UI patterns. Output includes CSS (cubic-bezier/linear()), Tailwind classes, and interactive preview links. Three skills let you describe an animation feel and get a curve recommendation, scan files to upgrade default easings, or audit your entire project for animation improvements. An animation expert agent provides motion design advice grounded in perceptual psychology.

## Installation

The plugin is published in the `claude-community` marketplace. In Claude Code:

```
/plugin marketplace add anthropics/claude-plugins-community
/plugin install easing-wizard@claude-community
```

Or from your terminal:

```bash
claude plugin marketplace add anthropics/claude-plugins-community
claude plugin install easing-wizard@claude-community
```

Then run `/reload-plugins` (or restart Claude Code) to activate it.

## Use Cases

1. **Describe the feel, get the curve.** A developer types `/easingwizard:recommend-curve snappy dropdown menu` and receives a Spring SNAP preset recommendation with ready-to-paste CSS, a Tailwind utility class, and a visual preview link — no manual curve tweaking needed.
2. **Upgrade easings in existing code.** A developer points `/easingwizard:improve-easings` at a component file full of `transition: all 0.3s ease`. The plugin analyzes each transition's context (hover state, modal entrance, toggle) and replaces browser defaults with matched professional curves directly in the file.
3. **Audit an entire project's animations.** Running `/easingwizard:audit-easings` scans all CSS, SCSS, and Tailwind files across the codebase, identifies every animation using default or missing easings, and produces a prioritized report with specific preset suggestions and preview links for each finding.

## Skills

- `/easingwizard:recommend-curve` — Describe the feel you want, get a curve recommendation with CSS + Tailwind output and a preview link
- `/easingwizard:improve-easings` — Add or improve easing in your CSS/Tailwind code
- `/easingwizard:audit-easings` — Scan your project for animation improvements

Claude also automatically suggests appropriate easing curves when you're writing CSS transitions or animations (via the `easing-advice` skill).

## MCP Tools

7 tools for generating Bezier, Spring, Bounce, Wiggle, and Overshoot curves with CSS and Tailwind output.

## Animation Expert Agent

A specialist agent with deep knowledge of motion design principles and perceptual psychology, automatically consulted for animation questions.

More