Guide creation, review, and debugging of UI animations with CSS, Framer Motion, or WAAPI.
npx skills add https://github.com/tillysoso/mv1 --skill ui-animation-tillysoso
Please help me install this Agent Skill. Skill: ui-animation Source: https://github.com/tillysoso/mv1/tree/main/.claude/skills/ui-animation Command: npx skills add https://github.com/tillysoso/mv1 --skill ui-animation-tillysoso
UI motion design is often inconsistent and hard to audit across products. This guide provides a centralized approach to creating, reviewing, and debugging UI animations for feedback, continuity, and delight.
Describe the UI animation you want to implement and I will generate a ready-to-use motion plan.
High-intent search queries and answers about installing and using this skill.
Debug UI animation inconsistencies by reviewing spring physics, easing curves, and timing across components. This structured workflow audits motion implementations to ensure visual continuity, correct gesture responses, and cohesive feedback across all web interfaces.
The best way to implement accessible motion is to apply explicit guidance on when to animate, default easing values, and accessibility considerations. This ensures Framer Motion and CSS transitions provide feedback without causing vestibular issues or performance bottlenecks.
Create a cohesive motion strategy by defining structured workflows for drag gestures and clip-path reveals. This approach standardizes animation timing, spring configurations, and implementation reviews to maintain consistency across complex interaction patterns.
Yes, you can review UI motion implemented with WAAPI and keyframes. The review process evaluates performance considerations, timing accuracy, and accessibility compliance to refine animations built with various web animation technologies.
You should not use spring animations when explicit timing or precise keyframe synchronization is required over physics-based motion. The review process helps determine when easing and CSS transitions are more appropriate than springs for specific interactions.
Yes, the animation review workflow supports debugging clip-path reveals and drag interactions. It evaluates these specific gesture and reveal implementations against performance considerations and accessibility standards to ensure smooth, consistent rendering.
ZiadNagarDefine motion tokens, choreography patterns, and reduced-motion support for design systems.
izzoaApply calibrated framer-motion seeds and named motion patterns to React components.
boraoztuncApply Emil Kowalski's UI design philosophy to refine interface polish and consistency.
batdorj-sReview animation and motion code against ten design engineering standards.
