skills.rest
Owl-Listener
Owl-ListenerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Owl-Listener/designpowers --skill interaction-design-owl-listener
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

aria-patterns

Implement accessible ARIA roles, states, and properties for interactive web components.

Community
Basic
tiankong0101-bytetiankong0101-byte

ui-ux-pro-max

Create design systems, component specifications, and interactive prototypes for software products.

Community
Advanced
dembrandtdembrandt
33

button-states

Define complete visual interaction states for buttons and clickable elements.

Official
Intermediate
kaeligkaelig
7

implementation-checker

Analyze React UI components for missing accessibility attributes and state handling.

Community
Advanced