Design UI animations with transform and opacity effects and reduced-motion fallbacks.
npx skills add https://github.com/mmartinsoliv/dotfiles --skill animation-mmartinsoliv
Please help me install this Agent Skill. Skill: animation Source: https://github.com/mmartinsoliv/dotfiles/tree/main/agents/skills/animation Command: npx skills add https://github.com/mmartinsoliv/dotfiles --skill animation-mmartinsoliv
This Skill helps you create UI motion that feels responsive, polished, and accessible without sacrificing performance or usability.
Use the animation skill to design a 250ms hover transition for a button and include a reduced-motion fallback.
High-intent search queries and answers about installing and using this skill.
Accessible UI animations require short durations, approved easing curves, and reduced-motion fallbacks. You should favor transform and opacity-based effects to maintain performance while respecting motion-sensitive user preferences.
The best way to animate CSS hover effects is using short durations with transform and opacity-based transitions. This approach keeps interfaces smooth under load while applying consistent, approved easing curves for natural motion.
Configuring Framer Motion springs for interactive UI components involves applying approved easing curves and short, natural durations across interactive states. This ensures interface transitions remain responsive and performant.
Yes, this approach supports dropdown and card reveal transitions by applying consistent motion rules. It uses transform and opacity-based animation with short durations to keep web component reveals smooth and accessible.
Web animations feel slow under load when they use non-transform or non-opacity properties. You should switch to transform and opacity-based effects with short durations to keep UI transitions performant.
You need a reduced-motion fallback whenever adding hover behavior or interactive UI animations. It ensures motion-sensitive users can safely navigate interface transitions by respecting their reduced-motion preferences.
rattamnoonEnforce transform and opacity motion rules to reduce UI animation jank.
dtsongDesign motion language specifying transition principles, micro-interactions, and reduced-motion alternatives in Markdown.
47networkGenerate production-ready CSS animations with configurable easing, spring physics, and stagger patterns.
greensockCoordinate complex animations using the GSAP timeline API.
