interaction-design
Design meaningful interactions and microinteractions. Create delightful user experiences through thoughtful animation, feedback, and responsive interface design.
By aj-geddes · 486 installs
npx skills add aj-geddes/useful-ai-prompts --skill interaction-design
Source repository · Upstream listing
Interaction Design
Table of Contents
[Overview]( overview)
[When to Use]( when to use)
[Quick Start]( quick start)
[Reference Guides]( reference guides)
[Best Practices]( 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](references/animation transition design.md) Animation & Transition Design
[Error Handling & Feedback](references/error handling feedback.md) Error Handling & Feedback
[Accessibility in Interactions](references/accessibility in interactions.md) 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