Interaction Design
Adds motion, feedback, and transition patterns to UI code so interactions feel polished.
- Repository
- wshobson/agents
- Stars
- 42,095
- Licence
- MIT
- Files
- 4 files
What it does
Once installed, the agent gives you UI animation and interaction code that follows consistent guidelines: how long different transitions should take, which easing curves to use, and how to show loading states, button feedback, toggles, page transitions, swipe gestures and scroll animations. It also reminds the agent to respect users who have reduced-motion settings turned on. Skills are instruction files that teach an AI agent a specialised capability; this one is a design playbook with code examples rather than a tool that changes anything on its own.
Great for
- Front-end developers adding polish to a React or web interface
- Designers who want motion specs translated into working code
- Teams building loading states, toasts, or gesture-based interactions
Skip it if
- Projects that do not use React or the browser, since the examples assume React, Tailwind-style classes and Framer Motion; the agent would need to adapt them
- Users who need strict accessibility compliance without review, because the reduced-motion handling shown is basic and should be checked by a human
Try asking
- “Add a satisfying hover and tap animation to my primary call-to-action button”
- “Create a skeleton loading state for a product card grid”
- “Implement a swipe-to-dismiss gesture for notification cards”
- “Set up fade and slide transitions between pages using Framer Motion”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
interaction-design.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip interaction-design.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip interaction-design.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Name the framework you use (React, Vue, plain CSS) so the agent adapts the examples correctly
- Ask for reduced-motion alternatives explicitly and test them with your OS setting turned on
- Check generated animation durations against your app's existing timing scale to keep motion consistent
What's inside
- references/animation-libraries.md
- references/microinteraction-patterns.md
- references/scroll-animations.md
- SKILL.md
Redistributed unmodified from wshobson/agents under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.