要点
Strategic animation and micro-interaction enhancement for improved usability and delight.
- Guides systematic assessment of animation opportunities across feedback, transitions, entrance effects, and delight moments, with mandatory accessibility support for
prefers-reduced-motion - Provides timing recommendations (100–800ms by purpose), GPU-accelerated easing curves, and anti-patterns to avoid (bounce/elastic effects, layout property animations, animation fatigue)
- Covers implementation across CSS transitions, @keyframes, JavaScript Web Animations API, and Framer Motion, with performance optimization for 60fps on target devices
- Requires frontend-design skill context and performance constraints before proceeding; includes detailed patterns for buttons, forms, state changes, navigation, and delight moments
SKILL.md
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
MANDATORY PREPARATION
Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints.
Assess Animation Opportunities
Analyze where motion would improve the experience:
- Identify static areas:
- Missing feedback: Actions without visual acknowledgment (button clicks, form submission, etc.)
- Jarring transitions: Instant state changes that feel abrupt (show/hide, page loads, route changes)
- Unclear relationships: Spatial or hierarchical relationships that aren't obvious
- Lack of delight: Functional but joyless interactions
- Missed guidance: Opportunities to direct attention or explain behavior