# Interaction Design

> Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, creating gesture-based interactions, designing hover/focus states, building notification/toast systems, adding scroll-triggered animations, implementing drag-and-drop, or creating delightful user experiences.

- Skill: `poteto/interaction-design` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds add poteto/interaction-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/poteto/interaction-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: poteto (https://skillmd.com/u/poteto)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/poteto/interaction-design

---


# Interaction Design

Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions.

## Project Conventions

- **Preferred library:** Framer Motion for React component animations
- **CSS animations:** Use `transform` and `opacity` only for 60fps performance
- **Spring physics:** Prefer spring animations over linear/eased for interactive elements
- **Interruptible:** Users must be able to cancel or override any animation

### Timing Scale

| 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          |

### Accessibility

Always respect `prefers-reduced-motion: reduce`. Set animation duration to 0 when the user prefers reduced motion. This is non-negotiable.

## Reference Files

Read these on demand based on the task:

| File | When to read |
|------|-------------|
| [animation-libraries.md](references/animation-libraries.md) | Choosing or configuring Framer Motion, GSAP, or CSS-based approaches |
| [microinteraction-patterns.md](references/microinteraction-patterns.md) | Building button feedback, toggles, ripples, loading indicators, toasts |
| [scroll-animations.md](references/scroll-animations.md) | Implementing scroll-triggered reveals, parallax, or intersection-based animations |