css-motion-systems

What problem does it solve?

Motion is essential for communicating state changes and maintaining accessibility; this skill provides a production-oriented framework for designing and implementing motion in web UI, balancing clarity, performance, and user comfort.

Core Features & Use Cases

• Define motion tokens (duration, distance, easing) for a design system.
• Choose between CSS transitions, CSS keyframes, WAAPI, and the View Transitions API.
• Ensure accessibility with reduced-motion support and meaningful feedback across route/state changes.
• Apply motion strategies to route transitions, list/detail choreography, and component states.

Quick Start

Create a basic motion token set (duration, distance, easing) and apply a simple fade-and-slide transition to a component.