interaction-design_skill

Overview

This skill helps designers and developers create intuitive, accessible interaction experiences by prescribing feedback patterns, microinteractions, loading and error state treatments, and animation guidelines. It packages practical, production-ready patterns for web apps using modern stacks like React and Tailwind. Use it to standardize how UI responds to user input and system state across your product.

How this skill works

The skill inspects common interaction scenarios—button presses, loading flows, errors, empty states, and screen-reader announcements—and provides concrete implementations and timing guidance. It recommends durations for microinteractions and transitions, accessible ARIA patterns, skeleton loaders, error layouts with retry actions, and motion-respecting animation rules. Code snippets and rules-of-thumb make integration into React and TypeScript projects straightforward.

When to use it

• Designing button/toggle feedback and microinteractions for touch or mouse
• Implementing loading states and skeleton placeholders for slow network responses
• Building error states with clear messages and retry/recovery flows
• Creating meaningful empty states that guide the next user action
• Setting animation timing and respecting prefers-reduced-motion for accessibility

Best practices

• Provide immediate visual feedback for every user action to confirm intent
• Show loading states for delays longer than ~0.5s using skeletons or spinners
• Keep microinteractions short (100–200ms) and transitions under 500ms
• Respect prefers-reduced-motion and ensure focus indicators remain visible
• Include clear error text plus a recovery option (retry, help link, or contact)

Example use cases

• Replace a static spinner with a skeleton loader and shimmer animation for content-heavy pages
• Add a 150ms microinteraction to button presses to convey tactility on mobile
• Implement an ErrorState component with role="alert" and a retry callback for failed API calls
• Create an EmptyState component that suggests the next action and includes a primary CTA
• Announce important status changes to screen readers using an aria-live StatusAnnouncer