ReddRadar
Agent skill
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 this agent skill to your Project
npx add-skill https://github.com/secondsky/claude-skills/tree/main/plugins/interaction-design/skills/interaction-design
SKILL.md
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>
);
}
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
secondsky/claude-skills
skill-name
[TODO: Write comprehensive description in third-person. Start with "This skill provides..." or "This skill should be used when..."] [TODO: Add "Use when" scenarios - specific situations where Claude should use this skill] [TODO: Add keywords - technologies, use cases, error messages that should trigger this skill]
secondsky/claude-skills
websocket-implementation
Implements real-time WebSocket communication with connection management, room-based messaging, and horizontal scaling. Use when building chat systems, live notifications, collaborative tools, or real-time dashboards.
secondsky/claude-skills
ai-sdk-ui
secondsky/claude-skills
bun-nextjs
This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.
secondsky/claude-skills
bun-sqlite
Use for bun:sqlite, SQLite operations, prepared statements, transactions, and queries.
secondsky/claude-skills
bun-sveltekit
Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs
Didn't find tool you were looking for?