Interaction Design

Design UI component interaction specifications with visual states, transitions, and WCAG accessibility.

1|1|Updated Feb 21, 2026

Search Tags:#accessibility #responsive design #component design #interaction design #ux #ui states

Ready to run

npx skills add https://github.com/dtsong/claude-code-windows-setup --skill interaction-design-dtsong

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Interaction Design
Source: https://github.com/dtsong/claude-code-windows-setup/tree/main/skills/council/advocate/interaction-design
Command: npx skills add https://github.com/dtsong/claude-code-windows-setup --skill interaction-design-dtsong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of defining how users interact with UI components, ensuring a consistent, accessible, and intuitive user experience across all states and devices.

Core Features & Use Cases

Define Visual States: Specifies appearance for default, hover, focus, active, loading, success, error, and disabled states.
Specify Transitions: Outlines animations and feedback mechanisms between states.
Ensure Accessibility: Integrates ARIA roles, keyboard navigation, and screen reader announcements.
Responsive Design: Adapts component behavior for desktop, tablet, and mobile.
Use Case: Designing a custom button component for a web application, ensuring it looks and behaves correctly for all users, including those using keyboard navigation or screen readers, across different screen sizes.

Quick Start

Define the interaction design for a new modal component, including all visual states and accessibility requirements.

Frequently Asked Questions about Interaction Design

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

FAQPage Schema

How do I design UI component interactions that cover all visual states and transitions?▼

Designing UI component interactions involves specifying detailed visual states like default, hover, focus, active, loading, success, error, and disabled, alongside the transition animations between them. This ensures a consistent and intuitive user experience across web and mobile applications.

What is the best way to ensure responsive design for custom UI components across different devices?▼

Ensuring responsive design for custom UI components requires adapting component behavior and visual states for desktop, tablet, and mobile screens. This approach maintains consistent interaction design and intuitive user feedback across diverse screen sizes.

How do I make front-end components accessible and compliant with WCAG standards?▼

Making front-end components accessible involves integrating ARIA roles, keyboard navigation, and screen reader announcements into the interaction design. This ensures compliance with WCAG accessibility standards for users with diverse interaction needs.

Can I use this interaction design approach for both web and mobile application UX workflows?▼

Yes, you can apply this interaction design approach to both web and mobile application UX workflows. It defines detailed specifications for component interactions, ensuring consistent visual states and accessibility requirements across diverse platforms.

What visual states do I need to specify when defining a custom button component for front-end development?▼

When defining a custom button component, you need to specify visual states including default, hover, focus, active, loading, success, error, and disabled. Outlining feedback mechanisms and transitions between these states ensures correct behavior for all users.