ux-ui-animation_skill

Overview

This skill designs UI animations and transitions for web and app interfaces. It produces concrete animation definitions, timing plans, and motion guidelines that improve clarity and perceived performance. The goal is to turn interaction intent into predictable, accessible motion patterns.

How this skill works

The agent inspects interaction flows, component states, and timing needs to recommend animations and micro-interactions. It outputs CSS animation rules and a motion guide with rationales, timing scales, and usage examples. Deliverables map to src/styles/animations.css for code and docs/ui/motion/ for guidance.

When to use it

• When defining entrance, exit, and state-change motion for components
• When standardizing micro-interactions across a design system
• When improving perceived performance with motion (loading, transitions)
• When creating accessibility-friendly timing and reduced-motion alternatives
• When documenting motion patterns for handoff to engineers

Best practices

• Prefer simple, single-purpose animations for meaningful state changes
• Use a consistent timing scale (duration and easing) across components
• Provide reduced-motion alternatives and respect user preferences
• Match motion direction and emphasis to interaction intent
• Document usage examples and code snippets alongside rationale

Example use cases

• Create CSS keyframes and classes for button hover, focus, and press states and place them in src/styles/animations.css
• Define a drawer or modal transition with entrance/exit timing, easing, and an accessibility fallback
• Design micro-interactions for list reordering and provide timing tokens for the design system
• Produce a motion guide in docs/ui/motion/ describing when to use spring vs. easing curves and recommended durations
• Audit existing transitions and refactor them into a consistent motion scale and semantic classes