motion-ui - Build polished UIs with purposeful motion
Create modern interfaces with Framer Motion micro-interactions, clear UI states, design tokens, and accessibility-aware animations.
Tags
Updated: 2026-09-29Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Implement motion-rich UI components
- Define design tokens
- Animate component state changes
- Add button micro-interactions
- Animate alerts and modals
- Handle loading and success states
- Support reduced-motion preferences
- Validate UI interaction states
Inputs
- Component or page requirements
- Project memory file
- Existing design tokens
- Component library conventions
- Accessibility settings
Outputs
- Motion-enabled UI code
- Animated component states
- Design token definitions
- Accessibility attributes
- Updated project memory file
Requirements
- Framer Motion
- CSS variables
- Tailwind CSS or global CSS
- Frontend implementation environment