Interaction Design

Covers the fundamentals of feedback patterns and state handling with practical React examples for loading skeletons, error messages, and empty states. Includes a helpful timing reference table showing microinteractions should stay under 200ms while entrance animations can stretch to 500ms. The accessibility reminders about prefers-reduced-motion and screen reader announcements are solid. Most useful when you're implementing those in-between moments that make interfaces feel responsive rather than just functional. The CSS shimmer loader is ready to copy-paste, and the guidelines around immediate feedback and keyboard navigation hit the important points without overcomplicated patterns.

skills.sh installs: 456
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill interaction-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Interaction Design

Create intuitive user experiences through thoughtful feedback and interaction patterns.

Interaction Patterns

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

Loading States

/* 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; }
}

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

Error States

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>
  );
}