Interaction Design

by secondsky88378361314fMIT227 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago

Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.

Instructions onlyDesign & Creative

AI-generated overview

Guidance and code patterns for designing loading, error, empty, animation, and accessible interaction states in user interfaces.

What it does: Provides interaction design guidance for user interfaces, covering feedback patterns, microinteractions, and accessibility. It supplies timing tables for microinteractions, transitions, and entrances, plus example CSS and JSX snippets for skeleton loaders, error states, empty states, and screen-reader status announcements. It also lists animation guidelines and best practices such as respecting reduced-motion preferences and supporting keyboard navigation.
When to use it: Use when designing loading states, error handling UX, animation guidelines, or touch interactions. It fits teams defining interaction patterns and feedback behavior for a web or app interface. It is also useful when checking that motion and state changes remain accessible.
Requirements: No scripts or tools required; instructions only. The examples reference CSS, JSX/React, and browser APIs such as matchMedia, but nothing needs to be installed or run.

Interaction Design

Create intuitive user experiences through thoughtful feedback and interaction patterns.

Interaction Patterns

Loading States

css

/* Skeleton loader */.skeleton {  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);  background-size: 200% 100%;  animation: shimmer 1.5s infinite;}
@keyframes shimmer {  0% { background-position: 200% 0; }  100% { background-position: -200% 0; }}

/* Skeleton loader */.skeleton {  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);  background-size: 200% 100%;  animation: shimmer 1.5s infinite;}
@keyframes shimmer {  0% { background-position: 200% 0; }  100% { background-position: -200% 0; }}

jsx

function LoadingState({ isLoading, children }) {  if (isLoading) {    return <div className="skeleton" style={{ height: 200 }} />;  }  return children;}

function LoadingState({ isLoading, children }) {  if (isLoading) {    return <div className="skeleton" style={{ height: 200 }} />;  }  return children;}

Error States

jsx

function ErrorState({ error, onRetry }) {  return (    <div className="error-container" role="alert">      <Icon name="warning" />      <h3>Something went wrong</h3>      <p>{error.message}</p>      <button onClick={onRetry}>Try Again</button>    </div>  );}

function ErrorState({ error, onRetry }) {  return (    <div className="error-container" role="alert">      <Icon name="warning" />      <h3>Something went wrong</h3>      <p>{error.message}</p>      <button onClick={onRetry}>Try Again</button>    </div>  );}

Empty States

jsx

function EmptyState({ title, description, action }) {  return (    <div className="empty-state">      <Illustration name="empty-inbox" />      <h3>{title}</h3>      <p>{description}</p>      {action && <button onClick={action.onClick}>{action.label}</button>}    </div>  );}

function EmptyState({ title, description, action }) {  return (    <div className="empty-state">      <Illustration name="empty-inbox" />      <h3>{title}</h3>      <p>{description}</p>      {action && <button onClick={action.onClick}>{action.label}</button>}    </div>  );}

Accessibility

jsx

// Announce state changes to screen readersfunction StatusAnnouncer({ message }) {  return (    <div aria-live="polite" aria-atomic="true" className="sr-only">      {message}    </div>  );}
// Respect motion preferencesconst prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Announce state changes to screen readersfunction StatusAnnouncer({ message }) {  return (    <div aria-live="polite" aria-atomic="true" className="sr-only">      {message}    </div>  );}
// Respect motion preferencesconst prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

Animation Guidelines

Keep animations under 500ms (longer feels sluggish)
Use ease-out for entering, ease-in for exiting
Respect prefers-reduced-motion
Ensure focus indicators are always visible
Test with keyboard navigation

Best Practices

Provide immediate feedback for all actions
Show loading states for waits >0.5s
Include clear error messages with recovery options
Design meaningful empty states
Support keyboard navigation

Source and attribution

Source:secondsky/claude-skillsinplugins/interaction-design/skills/interaction-designat commit8837836

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Pattern	Duration	Use Case
Microinteraction	100-200ms	Button press, toggle
Transition	200-400ms	Page change, modal
Entrance	300-500ms	List items appearing

Interaction Design

Interaction Design

Interaction Patterns

Loading States

Error States

Empty States

Accessibility

Animation Guidelines

Best Practices

Source and attribution

More from secondsky/claude-skills

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design