skills.rest
dtsong
dtsongCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/dtsong/claude-code-windows-setup --skill interaction-design-dtsong
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

wireframe-spec

Define wireframe layouts as annotated specifications encoding content priority and component placement.

Official
Intermediate
PolGubauPolGubau

building-components

Guide building accessible UI components with semantic HTML and ARIA attributes.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
esneiderbravoesneiderbravo
1

accessibility-standards

Audit UI accessibility for WCAG 2.2 AA compliance with automated and manual checks.

Community
Intermediate