About interaction-design
A design skill for creating intuitive interface interactions through motion, feedback, and state transitions. It guides developers on animation choices, timing, and accessibility.
Key features
- 01Framer Motion guidance for React
- 02CSS animation performance rules
- 03Spring-based interactive motion
- 04Interruptible animations
- 05Reduced-motion accessibility
Use cases
- 01Planning button and toggle feedback
- 02Building modal and page transitions
- 03Adding scroll-triggered reveals
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/interaction-designin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
LICENSEreferences/animation-libraries.mdmicrointeraction-patterns.mdscroll-animations.mdDetails
From the project READMEInteraction 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
transformandopacityonly 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 | Choosing or configuring Framer Motion, GSAP, or CSS-based approaches |
| microinteraction-patterns.md | Building button feedback, toggles, ripples, loading indicators, toasts |
| scroll-animations.md | Implementing scroll-triggered reveals, parallax, or intersection-based animations |
Comments
Markdown supported