ui-animation
Installation
SKILL.md
UI Animation
- IS: designing, implementing, reviewing, and debugging UI motion: springs, gestures, drag, easing, CSS transitions, keyframes, framer-motion.
- IS NOT: extracting an animation from a video or screen recording (use
reverse-engineer-animation), choosing overall visual direction, palettes, or typography (useui-design), or auditing a whole page's UI quality (useui-audit).
Reference files
| File | Read when |
|---|---|
| references/decision-framework.md | Default: deciding whether/why to animate, picking easing character |
| references/spring-animations.md | Using spring physics, framer-motion useSpring, configuring spring params |
| references/component-patterns.md | Building buttons, popovers, tooltips, drawers, modals, toasts with animation |
| references/clip-path-techniques.md | Using clip-path for reveals, tabs, hold-to-delete, comparison sliders |
| references/gesture-drag.md | Implementing drag, swipe-to-dismiss, momentum, pointer capture |
| references/performance-deep-dive.md | Debugging jank, CSS vs JS, WAAPI, CSS variables trap, Framer Motion caveats |
| references/review-format.md | Reviewing animation code: Before/After/Why table and issue checklist |
| references/contextual-animations.md | Implementing contextual icon swaps, word-level stagger entrances, or fixed-offset exit animations |
| references/transition-recipes.md | Installing a CSS transition: card resize, badge, dropdown, modal, panel, page slide, icon swap, number pop-in, text swap, success animation, avatar hover, error shake |