From rt
Recommends easing curves, durations, transform origins, and implementation for UI animations based on purpose, frequency, and pattern type like enter/exit or hover.
npx claudepluginhub richtabor/agent-skills --plugin rtThis skill uses the workspace's default tool permissions.
Design intentional, purposeful motion for product UI. This skill evaluates animation needs and recommends specific easing curves, durations, and implementation approaches based on interaction frequency and purpose.
Implements UI animations, page transitions, micro-interactions, hover effects, loading states, and scroll animations using Framer Motion, CSS Transitions, and Tailwind CSS.
Applies animation principles like easing, durations, stagger, and sequencing to UI motion for natural, performant interactions. Supports accessibility and low-power devices.
Guides motion design for UI using Disney's 12 principles, creates animation specs, style guides, timing details, and developer handoff deliverables.
Share bugs, ideas, or general feedback.
Design intentional, purposeful motion for product UI. This skill evaluates animation needs and recommends specific easing curves, durations, and implementation approaches based on interaction frequency and purpose.
Every animation needs a job. If it has no job, don't animate.
Before any recommendations, read both reference files:
references/decision-tree.md) - Which easing category to use based on the interaction type, plus scale/origin/hover guidancereferences/easing-tokens.md) - Specific curves, duration values, and performance guidelinesFor each component or interaction, determine:
2.1 Purpose
What job does this animation do?
If no clear purpose exists, recommend no animation.
2.2 Frequency
How often will users trigger this?
2.3 Pattern Type
What kind of motion is this?
Based on the evaluation, provide specific recommendations using tokens from the reference files.
For each animation request, provide:
## Animation Recommendation
**Component**: [What's being animated]
### Evaluation
- **Purpose**: [responsiveness / spatial / understanding / delight / none]
- **Frequency**: [high / medium / low]
- **Pattern**: [enter-exit / morph / time-based / hover / keyboard]
### Recommendation
- **Easing**: [token name] — `[cubic-bezier value]`
- **Duration**: [token name] — `[ms value]`
- **Properties**: [transform, opacity, etc.]
- **Transform Origin**: [if applicable]
- **Spring vs Bezier**: [recommendation and why]
- **Bounce**: [yes/no and why]
### Implementation
[Code snippet or CSS/JS example]
### Notes
[Any specific guidance for this case]
User: "How should I animate this dropdown menu?"
Response:
## Animation Recommendation
**Component**: Dropdown menu
### Evaluation
- **Purpose**: Responsiveness — immediate feedback when user clicks trigger
- **Frequency**: Medium — common interaction but not rapid-fire
- **Pattern**: Enter/exit — appearing and disappearing from screen
### Recommendation
- **Easing**: --ease-out-quart — `cubic-bezier(.165, .84, .44, 1)`
- **Duration**: --dur-2 — `180ms`
- **Properties**: transform (scale, translateY), opacity
- **Transform Origin**: Top center (or top-left/top-right based on trigger position)
- **Spring vs Bezier**: Bezier is fine here; spring useful if menu can be interrupted mid-animation
- **Bounce**: No — tap-to-open shouldn't bounce
### Implementation
```css
.dropdown {
transform-origin: top center;
transition:
transform 180ms cubic-bezier(.165, .84, .44, 1),
opacity 180ms cubic-bezier(.165, .84, .44, 1);
}
.dropdown[data-state="closed"] {
opacity: 0;
transform: scale(0.96) translateY(-8px);
}
.dropdown[data-state="open"] {
opacity: 1;
transform: scale(1) translateY(0);
}
## Tips for Best Results
1. **Be specific about the component** - "dropdown" vs "modal" vs "tooltip" matters
2. **Mention the trigger** - Click, hover, keyboard, scroll
3. **Share context** - "This is a productivity app" vs "marketing landing page"
4. **Ask about multiple states** - Open, close, hover, disabled
5. **Specify framework** - CSS, Framer Motion, GSAP, React Spring
## Resources
This skill includes:
### references/decision-tree.md
Flowchart for choosing the right easing category based on interaction type. Includes scale values, transform-origin guidance, hover/touch considerations, and accessibility.
### references/easing-tokens.md
Complete set of easing curves (ease-out, ease-in-out families), duration tokens, and performance guidelines.