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.

66

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/interaction-design/skills/interaction-design/SKILL.md
SKILL.md
Quality
Evals
Security

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
secondsky/claude-skills
Path

plugins/interaction-design/skills/interaction-design/SKILL.md

Commit

ad16332

Last updated
First committed

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