Interaction Design
Design and implement purposeful microinteractions, motion, transitions, loading states, gestures, and user feedback patterns that improve usability and delight.
Best for
Frontend developers and product designers building animated, stateful, and gesture-driven user experiences.
npx skills add https://github.com/wshobson/agents --skill interaction-design
Common use cases
When to use this skill
- Add clear feedback to buttons, forms, loading states, and notifications.
- Design page transitions, gestures, drag-and-drop, and scroll interactions.
- Build a consistent timing and easing system with reduced-motion support.
Example prompts
Prompts you can adapt
How to use it
A simple workflow
Open the verified wshobson source on GitHub and review its SKILL.md or repository documentation.
npx skills add https://github.com/wshobson/agents --skill interaction-design
Start with an example prompt below, adapt it to your project, and verify the result.
FAQ
Questions about Interaction Design
Is this linked to an official public source?
Yes. This page links directly to the wshobson GitHub source shown above. Review its documentation and license before production use.
How do I add this skill?
Run the setup command shown on this page, then refresh your agent if required.
Related skills
Keep building the workflow
Apple Design
Translate Apple's fluid-interface principles to the web with responsive feedback, interruptible motion, physical gestures, depth, typography, and reduced-motion support.
Emil Design Engineering
Apply Emil Kowalski's design-engineering philosophy to UI polish, component craft, purposeful animation, and production-ready frontend details.
React View Transitions
Implement native-feeling page and component transitions with React's View Transition APIs and Next.js patterns.