Agent skill · design visual · aj-geddes
interaction-design
Design meaningful interactions and microinteractions. Create delightful user experiences through thoughtful animation, feedback, and responsive interface design.
Why this skill is useful
Provides specific interaction patterns and design principles that enhance user experience but are not commonly known.
What it needs
About 1k tokens when loaded. Last updated 2026-03-04. 307 stars on the source repository.
What this skill does
Interaction Design Table of Contents Overview When to Use Quick Start Reference Guides Best Practices Overview Interaction design focuses on how users engage with systems, creating intuitive and delightful experiences through feedback and responsiveness. When to Use Designing user flows and touchpoints Creating animations and transitions Defining error and loading states Building microinteractions Improving usability and feedback Mobile interaction patterns Quick Start Minimal working example: Reference Guides Detailed implementations in the references/ directory: Guide Contents --- --- Animation & Transition Design Animation & Transition Design Error Handling & Feedback Error Handling & Feedback Accessibility in Interactions Accessibility in Interactions Best Practices ✅ DO Keep animations under 400ms Provide clear visual feedback Use animations to guide attention Respect motion preferences Make interactions reversible Test with keyboard and screen readers Provide multiple interaction methods Design for touch and mouse Use appropriate easing curves Document interaction behavior ❌ DON'T Animate for decoration only Use animations longer than 500ms Ignore motion-sensitive users Remove focus indicators Trap users in modals Use confusing animations Animate everything Ignore loading states Forget error states Skip accessibility testing
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aj-geddes/interaction-design