From ravie
Use this skill when adding, polishing, or debugging UI transitions and animations, especially before launch or when reviewing prototype motion for production readiness. Do not use for decorative animation without user value, WebGL/Three.js work, or layout/responsive issues that belong to responsive-ui.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ravie:animation-motionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Restrained, performant motion. Transform and opacity only. Reduced motion respected. No decorative animation without purpose.
Restrained, performant motion. Transform and opacity only. Reduced motion respected. No decorative animation without purpose.
Add motion that helps users understand state changes, direct attention, and feel the interface responding — without causing jank, nausea, or distraction.
Before UI work or review, read rules/ui.md and apply the project’s responsive, accessibility, component-state, and design-token expectations.
Every animation must answer: what does this help the user understand?
Only animate transform and opacity. These are GPU-composited and don't trigger layout recalculation. Animating width, height, top, left, margin, or padding causes jank.
ease-out (fast start, slow end)ease-in (slow start, fast end)ease-in-outlinear for UI animation (feels mechanical)@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
transform and opacityprefers-reduced-motion# Motion review — [component/flow]
| Animation | Property animated | Duration | Easing | Purpose | Verdict |
|---|---|---|---|---|---|
| [modal open] | transform+opacity | 250ms | ease-out | state change | keep |
| [logo spin] | transform | 2s loop | linear | decorative | remove |
## Reduced motion: [respected? Y/N]
## Jank risk: [any layout-property animations? file:line]
accessibility-ui — reduced motion is an a11y requirementthreejs-motion-performance — for WebGL/3D motiondesign-system-ui — motion tokens (duration, easing) are part of the systemAnimating layout properties — width, height, top cause jank. Use transform: scale() and transform: translate() instead.
No reduced motion — ~10% of users have this enabled. Ignoring it is both an a11y and UX failure.
Motion that blocks interaction — A 400ms entrance animation that the user must wait out before the element responds to clicks, or a transition with no interruptible/exit path so rapid navigation stacks animations. Keep UI transitions short, make them interruptible, and never gate a click behind an animation finishing.
npx claudepluginhub amnafarzy/ravie --plugin ravieGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.