Interaction Design

This one helps you design interactions that feel responsive and intentional rather than arbitrary. You'll use it when you're building animations, transitions, microinteractions, loading states, or any touch-based patterns like swipe and pinch-to-zoom. It includes reference guides on animation timing, error feedback, and accessibility considerations. The best practices are solid reminders: keep animations under 400ms, respect motion preferences, and always provide keyboard alternatives. Honestly, the interaction pattern reference table alone is worth having around when you're debating whether a double-tap or long-press makes more sense for your use case.

skills.sh installs: 510
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill interaction-design --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

Common Interaction Patterns:

Swipe:
  Use: Mobile lists, carousels
  Feedback: Visual sliding, momentum
  Accessibility: Keyboard alternative (arrows)

Tap & Hold:
  Use: Context menus, drag prep
  Feedback: Visual feedback after delay
  Duration: ~500ms before trigger

Pinch & Zoom:
  Use: Image viewing, maps
  Feedback: Smooth zoom animation
  Boundaries: Set min/max zoom levels

Drag & Drop:
  Use: Reordering, moving items
  Feedback: Visual during drag, drop confirmation
  Fallback: Alternative method (buttons)

SKILL.md on GitHub