CtrlK
BlogDocsLog inGet started
Tessl Logo

interaction-design

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.

Install with Tessl CLI

npx tessl i github:secondsky/claude-skills --skill interaction-design
What are skills?

Overall
score

83%

Review — 79%

Does it follow best practices?

Validation — 14 / 16 Passed

Validation for skill structure

SKILL.md
Review
Evals

Interaction Design

Create intuitive user experiences through thoughtful feedback and interaction patterns.

Interaction Patterns

PatternDurationUse Case
Microinteraction100-200msButton press, toggle
Transition200-400msPage change, modal
Entrance300-500msList 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>
  );
}

Empty States

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

// Announce state changes to screen readers
function StatusAnnouncer({ message }) {
  return (
    <div aria-live="polite" aria-atomic="true" className="sr-only">
      {message}
    </div>
  );
}

// Respect motion preferences
const 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
Repository
github.com/secondsky/claude-skills
Last updated
Created

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill