secondsky/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.
npx skills add https://github.com/secondsky/claude-skills --skill interaction-designCreate 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-motionTake secondsky/interaction-design from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.