Implement accessible UI animations with CSS, Framer Motion, and React Native Reanimated.
npx skills add https://github.com/JimmyTranDev/dotfiles --skill ui-animator
Please help me install this Agent Skill. Skill: ui-animator Source: https://github.com/JimmyTranDev/dotfiles/tree/main/src/opencode/skills/ui-animator Command: npx skills add https://github.com/JimmyTranDev/dotfiles --skill ui-animator
Creating engaging, accessible UI animations across platforms can be time-consuming and error-prone; this guide provides patterns and rules to deliver polished motion without sacrificing performance or accessibility.
Implement a polished hover animation for a primary button in a new React project.
High-intent search queries and answers about installing and using this skill.
Accessible UI animations respect reduced-motion preferences by providing alternative transitions or disabling motion cues. You implement these strategies alongside CSS transitions and Framer Motion to ensure interactions remain usable without sacrificing performance.
Gesture-driven animations with spring physics in React Native use Reanimated and Gesture Handler. You configure spring animation parameters to deliver smooth, interactive motion cues for modals, lists, and interactive components.
Consistent cross-platform UI transitions use standardized CSS keyframes and Framer Motion patterns. You apply these transition rules across web, iOS, and Android to deliver polished motion cues for modals, lists, and progress indicators.
Framer Motion supports scroll-driven animations and progress indicators. You map scroll position to animation values to create interactive, performant motion cues that function consistently across web and mobile platforms.
CSS transitions cause performance issues when animating expensive properties. You resolve this by following robust performance rules, optimizing keyframes, and leveraging React Native Reanimated for complex mobile motion.
Framer Motion handles web UI micro-interactions while React Native Reanimated manages mobile. You apply unified spring physics and gesture-handling patterns to achieve consistent cross-platform behavior for interactive components.
mrodrigues1Implement React Native styling, React Navigation, and Reanimated 3 animations.
remiconnessonApply animation best practices to React and Framer Motion interfaces.
cloner93Provide MVI architecture, theming, adaptive navigation, and reusable components for cross-platform clients.
Ender-Wiggin2019Plan and implement CSS and JavaScript animations across UI interaction categories.
