interaction-physics_skill

Overview

This skill teaches how to craft intentional microinteractions, animations, transitions, and feedback systems that guide users and communicate state. It focuses on practical principles—timing, easing, distance, performance, and accessibility—to make interactions feel natural and useful. Use it to design, audit, and implement microinteractions for web and mobile interfaces.

How this skill works

The skill inspects individual microinteractions (triggers, rules, feedback, loops) and evaluates timing, easing, and motion distance against recommended guidelines. It identifies CPU-intensive animations, suggests GPU-accelerated alternatives (transform, opacity), and applies accessibility checks like prefers-reduced-motion and keyboard focus states. Outputs include design patterns, CSS/animation snippets, and concrete improvement recommendations.

When to use it

• Designing or refining button, form, loading, notification, or page transition interactions
• Auditing existing interactions for timing, easing, and accessibility issues
• Implementing animation code with performance best practices
• Optimizing animations for smooth 60fps rendering
• Adding intentional, delightful feedback without distracting users

Best practices

• Give every user action visible feedback (visual, text, or icon) instead of relying on motion alone
• Follow timing guidelines: UI feedback 150–250ms, transitions 300–500ms, attention 500–1000ms
• Prefer ease-out for entering, ease-in for exiting, linear for continuous motion
• Animate GPU-friendly properties (transform, opacity); avoid animating layout properties like width/height
• Respect prefers-reduced-motion and provide non-motion alternatives
• Ensure keyboard focus states mirror hover/active feedback for accessibility

Example use cases

• Create consistent button states: hover, active, disabled, loading with accessible focus outlines
• Design form validation microinteractions with color, icons, and subtle entrance animations for messages
• Build skeleton loaders, spinners, and progress bars that use GPU-friendly animations
• Implement notification enter/exit animations with clear timing and escape-friendly behavior
• Optimize page and modal transitions to feel natural while preserving performance and reduced-motion preferences