ui-animation

The `ui-animation` skill provides guidance and support for creating, reviewing, and debugging user interface animations and motion implementations. It addresses common challenges in UI design, such as maintaining continuity between states, providing visual feedback, and enhancing perceived responsiveness. By offering structured principles and reference materials, this skill helps designers and developers implement animations that are smooth, interruptible, and aligned with user expectations, reducing jank and improving overall product polish.

This skill encompasses a wide range of capabilities, including managing springs, gestures, drag interactions, clip-path reveals, easing, timing, and animation reviews. It provides explicit recommendations for animation techniques, such as using CSS transitions for interruptible actions, keyframes for predetermined sequences, and spring physics for natural motion. Additionally, it emphasizes best practices like asymmetric timing for entry and exit, input-driven animations, and avoiding the animation of layout properties to maintain performance. Reference files cover detailed topics such as spring parameters, component animation patterns, clip-path techniques, gesture handling, performance optimization, and contextual animation strategies.

Target users include UI/UX designers, front-end developers, and motion designers who are implementing or reviewing animations in web and app interfaces. Typical use cases involve adding smooth transitions, swipe gestures, or feedback animations to components, reviewing existing animations for quality and consistency, and debugging performance issues. This skill is particularly valuable for teams aiming to maintain high-quality motion design across a product, ensuring that animations enhance usability, delight, and visual coherence without compromising responsiveness.