Agent skill · design visual · 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.
Why this skill is useful
Provides specific interaction design patterns and code snippets for loading, error, and empty states that enhance user experience design.
What it needs
About 1k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
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 Error States Empty States Accessibility 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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/interaction-design