Help us improve
Share bugs, ideas, or general feedback.
From designpowers
Designs accessible interactive states, transitions, animations, error handling, loading patterns, and feedback for UI elements, covering visual, screen reader, keyboard, and touch interactions.
npx claudepluginhub owl-listener/designpowersHow this skill is triggered — by the user, by Claude, or both
Slash command
/designpowers:interaction-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Interactions are promises. Every button says "click me and something will happen." Every loading spinner says "wait, it is coming." This skill ensures those promises are kept for everyone, regardless of how they interact with the interface.
Provides React and CSS patterns for loading states, error handling, empty states, microinteractions, accessibility features, and animations to build intuitive user experiences.
Decomposes UI interactions into Dan Saffer's four-part framework (trigger, rules, feedback, loops/modes). Useful when designing gesture-driven controls, loading transitions, system status indicators, or evaluating animation for usability vs decoration.
Guides designing microinteractions — triggers, rules, feedback, loops, and modes — to polish UI details like toggles, loading states, and form feedback.
Share bugs, ideas, or general feedback.
Interactions are promises. Every button says "click me and something will happen." Every loading spinner says "wait, it is coming." This skill ensures those promises are kept for everyone, regardless of how they interact with the interface.
For every interactive element, define:
| State | Visual | Screen Reader | Keyboard | Touch |
|---|---|---|---|---|
| Default | [appearance] | [announcement] | [behaviour] | [behaviour] |
| Hover | [appearance] | n/a | n/a | n/a |
| Focus | [appearance + focus ring] | [announcement] | [how to reach] | n/a |
| Active/Pressed | [appearance] | [announcement] | [trigger key] | [gesture] |
| Disabled | [appearance, not just greyed] | [announcement + reason] | [skip in tab order?] | [behaviour] |
| Error | [appearance + message] | [announcement + guidance] | [focus moved?] | [behaviour] |
| Loading | [appearance] | [live region update] | [interaction blocked?] | [behaviour] |
| Success | [appearance] | [announcement] | [next focus target] | [behaviour] |
Every user action deserves a response. Map the feedback:
Immediate feedback (< 100ms):
Short wait feedback (100ms - 1s):
Long wait feedback (> 1s):
Completion feedback:
Errors are not edge cases — they are guaranteed states. Design for them:
Error message format: [What happened] + [What to do about it]
Animations serve a purpose or they serve nobody:
When to animate:
When NOT to animate:
Inclusive motion:
prefers-reduced-motion — always provide a reduced or no-motion alternativeIf the design includes gesture interactions:
For each interaction, document:
writing-design-plans (as part of plan execution)ui-composition (visual states), cognitive-accessibility (interaction complexity), accessible-content (error messages)designpowers-critique| Flag | Response |
|---|---|
| Component with only default and hover states | Map ALL states including focus, error, loading, disabled |
| Animation without prefers-reduced-motion support | Add motion reduction. This is not optional |
| Error state that only changes colour | Add text, icon, and screen reader announcement |
| Gesture without alternative input method | Add keyboard and/or button alternative |