interaction-design

Design accessible UI component states, transitions, and feedback patterns.

234|55|Updated Mar 18, 2026

Search Tags:#design #accessibility #interaction #transitions #motion #states

Ready to run

npx skills add https://github.com/Owl-Listener/designpowers --skill interaction-design-owl-listener

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: interaction-design
Source: https://github.com/Owl-Listener/designpowers/tree/main/skills/interaction-design
Command: npx skills add https://github.com/Owl-Listener/designpowers --skill interaction-design-owl-listener

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Interactions are promises. This skill provides a structured approach to designing interactive states, transitions, and feedback that are perceivable, operable, and inclusive across products.

Core Features & Use Cases

Map all interactive states: default, hover, focus, active, disabled, error and ensure accessible announcements.
Define timing and feedback: immediate feedback, loading indicators, completion states, and error messaging for consistent UX.
Support motion and gestures: respect prefers-reduced-motion and provide keyboard alternatives for gestures.

Quick Start

Turn the concept of interactive states into a concrete design brief for a UI component by detailing default, hover, focus, and error states along with their feedback.

Frequently Asked Questions about interaction-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I map all interactive UI states for accessible web and mobile components?▼

To map interactive UI states, detail the default, hover, focus, active, disabled, and error states for each component, ensuring perceivable feedback and accessible announcements across web and mobile interfaces.

What is the best way to design UI transitions and motion that respect reduced-motion preferences?▼

Designing UI transitions and motion requires respecting the prefers-reduced-motion media query by providing alternative feedback mechanisms or disabling non-essential animation to maintain accessibility for users with motion sensitivities.

How do I ensure keyboard accessibility and ARIA roles are applied correctly to interactive elements?▼

Ensure keyboard accessibility by mapping keyboard alternatives to interactive states and applying correct ARIA roles to provide perceivable, operable feedback for default, focus, active, and error conditions.

How do I define consistent feedback timing for loading indicators and error messaging?▼

Define consistent feedback timing by structuring immediate responses, loading indicators, completion states, and error messaging to provide a reliable user experience across all interactive UI components.

Can I use this approach to design inclusive gesture interactions for mobile interfaces?▼

Yes, inclusive gesture design for mobile interfaces is supported by mapping interactive states and providing keyboard alternatives, ensuring gestures remain operable and accessible across different user needs.

What should I include in a design brief for UI component states and feedback?▼

A design brief for UI component states should detail the default, hover, focus, and error states alongside their specific feedback mechanisms, ensuring consistent timing, motion considerations, and accessible announcements.