Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From interaction-design
Provides React and CSS patterns for loading states, error handling, empty states, microinteractions, accessibility features, and animations to build intuitive user experiences.
npx claudepluginhub secondsky/claude-skills --plugin interaction-designHow this skill is triggered — by the user, by Claude, or both
Slash command
/interaction-design:interaction-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create intuitive user experiences through thoughtful feedback and interaction patterns.
Designs accessible interactive states, transitions, animations, error handling, loading patterns, and feedback for UI elements, covering visual, screen reader, keyboard, and touch interactions.
Designs microinteractions, motion design, transitions, loading states, and feedback patterns for UI polish using Framer Motion and Tailwind.
Provides accessible UI interaction patterns for skeleton loading, infinite scroll, progressive disclosure, modals/drawers, drag-and-drop, tab overflow, and toast notifications. Use for loading states, pagination, overlays, reorderable lists.
Share bugs, ideas, or general feedback.
Create intuitive user experiences through thoughtful feedback and interaction patterns.
| Pattern | Duration | Use Case |
|---|---|---|
| Microinteraction | 100-200ms | Button press, toggle |
| Transition | 200-400ms | Page change, modal |
| Entrance | 300-500ms | List items appearing |
/* 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;
}
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 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>
);
}
// 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;
prefers-reduced-motion