interaction-design

Apply feedback patterns and accessible interaction design to loading states and error handling UX.

204|30|Updated Nov 8, 2025

Search Tags:#accessibility #error handling #user experience #loading states #microinteractions

Ready to run

npx skills add https://github.com/secondsky/claude-skills --skill interaction-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: interaction-design
Source: https://github.com/secondsky/claude-skills/tree/main/plugins/interaction-design/skills/interaction-design
Command: npx skills add https://github.com/secondsky/claude-skills --skill interaction-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Focuses on feedback patterns, microinteractions, error states, and accessibility to craft delightful, usable interfaces.

Core Features & Use Cases

Loading states, skeletons, and progress indicators
Error handling UX and retry patterns
Accessible interactions and motion considerations
Microinteractions for taps, transitions, and entrances

Quick Start

Implement a loading skeleton, error state, and microinteraction on a button.

Frequently Asked Questions about interaction-design

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

FAQPage Schema

How do I design loading states and skeleton screens that keep users informed?▼

Loading states communicate progress to users during asynchronous operations. Use skeleton screens, progress indicators, and feedback patterns to signal that the interface is responding, preventing perceived freezing and improving perceived performance during waits.

What's the best way to handle error states in user interfaces?▼

Error handling UX combines clear messaging with retry patterns and accessible focus indicators. Present errors near the point of failure, explain what went wrong in plain language, and provide actionable next steps so users can resolve issues independently.

How do I make microinteractions accessible and responsive?▼

Microinteractions—feedback on taps, transitions, and entrances—must respect motion preferences, include accessible focus indicators, and remain keyboard navigable. Design animations that enhance usability without relying on motion alone to convey information.

Can I use these interaction patterns across different platforms?▼

Feedback patterns and accessible interaction design apply across web, mobile, and touch interfaces. The core principles—immediate feedback, keyboard navigability, and motion considerations—adapt to each platform's input model and assistive technology support.

Why is immediate feedback important in user interactions?▼

Immediate feedback confirms that the user's action registered and signals what's happening next. Without it, users doubt whether their input worked, leading to repeated attempts and frustration. Feedback closes the loop between intention and system response.

What accessibility requirements should I follow for interactive elements?▼

Accessible interactions require visible focus indicators for keyboard users, semantic HTML or ARIA roles, sufficient color contrast, and support for assistive technologies. Touch interactions need adequate target sizes; animations must respect prefers-reduced-motion settings.