interaction-design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
Profile →npx skills add wshobson/agents --skill interaction-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Interaction Design Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users. ## When to Use This Skill - Adding microinteractions to enhance user feedback - Implementing smooth page and component transitions - Designing loading states and skeleton screens - Creating gesture-based interactions - Building notification and toast systems - Implementing drag-and-drop interfaces - Adding scroll-triggered animations - Designing hover and focus states ## Core Principles ### 1. Purposeful Motion Motion should communicate, not decorate: - **Feedback**: Confirm user actions occurred - **Orientation**: Show where elements come from/go to - **Focus**: Direct attention to important changes - **Continuity**: Maintain context during transitions ### 2. Timing Guidelines | Duration | Use Case | | --------- | ----------------------------------------- | | 100-150ms | Micro-feedback (hovers, clicks) | | 200-300ms | Small transitions (toggles, dropdowns) | | 300-500ms | Medium transitions (modals, page changes) | | 500ms+ | Complex choreographed animations | ### 3. Easing Functions ```css /* Common easings */ --ease-out
- When to Use This Skill
- Core Principles
- 1. Purposeful Motion
- 2. Timing Guidelines
- 3. Easing Functions
- Quick Start: Button Microinteraction
- Interaction Patterns
- 1. Loading States
- 2. State Transitions
- 3. Page Transitions
- 4. Feedback Patterns
- 5. Gesture Interactions
- CSS Animation Patterns
- Keyframe Animations
What does the interaction-design skill do?
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
How do I install it?
Run `npx skills add wshobson/agents --skill interaction-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From wshobson/agents, a repository with 38,479 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.