Interaction Design
Creates smooth, purposeful animations and microinteractions using Framer Motion, CSS transitions, and gesture libraries. Handles the full spectrum from button hover states and loading skeletons to page transitions and swipe gestures. Includes timing guidelines, easing functions, and accessibility patterns like reduced motion support. The code examples cover real implementation details like ripple effects, drag interactions, and spring physics. What I like is the emphasis on performance and user preferences rather than flashy effects for their own sake. Saves you from reinventing interaction patterns and keeps animations consistent across your app.
- skills.sh installs
- 17K
- GitHub stars
- 42.4K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add wshobson/agents --skill interaction-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/wshobson/agents
- Category
- Design & UI/UX
More from wshobson/agents
All 174- Design System Patterns16.7K
- Terraform Module Library16.1K
- React Native Design16.1K
- React State Management15.9K
- Solidity Security15.8K
- Uv Package Manager15.7K
- React Native Architecture15.6K
- Gdpr Data Handling15.4K
- Python Project Structure15.4K
- Accessibility Compliance15.2K
- K8s Security Policies15.1K
- Monorepo Management15K
- Python Error Handling14.7K
- Rag Implementation14.4K
- Deployment Pipeline Design14.2K
- Changelog Automation14.2K
- Bash Defensive Patterns14.1K
- Visual Design Foundations14.1K
- Debugging Strategies13.9K
- Python Anti Patterns13.8K
- Stripe Integration13.8K
- Microservices Patterns13.7K
- Secrets Management13.6K
- Web Component Design13.6K
Recommended
More Design & UI/UX
design-motion-principleskylezantos/design-motion-principlesMotion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposef13.8Kskills.sh installs
design-systemaffaan-m/eccUse this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.6Kskills.sh installs
accessibility-a11ymindrally/skillsImplement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.2.8Kskills.sh installs
ui-design-systemdavila7/claude-code-templatesUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handof1.7Kskills.sh installs
design-systemjezweb/claude-skillsExtract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmo1.1Kskills.sh installs
ui-design-systemalirezarezvani/claude-skillsUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handof1.1Kskills.sh installs