Agent skill · design visual · yonatangross
interaction-patterns
UI interaction design patterns for skeleton loading, infinite scroll with accessibility, progressive disclosure, modal/drawer/inline selection, drag-and-drop with keyboard alternatives, tab overflow handling, and toast notification positioning. Use when implementing loading states, content pagination, disclosure patterns, overlay components, reorderable lists, or notification systems.
Why this skill is useful
Provides specific UI interaction design patterns and code examples that enhance accessibility and user experience, which the AI may not generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Interaction Patterns Codifiable UI interaction patterns that prevent common UX failures. Covers loading states, content pagination, disclosure patterns, overlays, drag-and-drop, tab overflow, and notification systems — all with accessibility baked in. Quick Reference Rule File Impact When to Use ------ ------ -------- ------------- Skeleton Loading rules/interaction-skeleton-loading.md HIGH Content-shaped placeholders for async data Infinite Scroll rules/interaction-infinite-scroll.md CRITICAL Paginated content with a11y and keyboard support Progressive Disclosure rules/interaction-progressive-disclosure.md HIGH Revealing complexity based on user need Modal / Drawer / Inline rules/interaction-modal-drawer-inline.md HIGH Choosing overlay vs inline display patterns Drag & Drop rules/interaction-drag-drop.md CRITICAL Reorderable lists with keyboard alternatives Tabs Overflow rules/interaction-tabs-overflow.md MEDIUM Tab bars with 7+ items or dynamic tabs Toast Notifications rules/interaction-toast-notifications.md HIGH Success/error feedback and notification stacking Cognitive Load Thresholds rules/interaction-cognitive-load-thresholds.md HIGH Enforcing Miller's Law, Hick's Law, and Doherty Threshold with numeric limits Form UX rules/interaction-form-ux.md HIGH Target sizing, label placement, error prevention, and smart defaults Persuasion Ethics rules/interaction-persuasion-ethics.md HIGH Detecting dark patterns and applying ethical engagement principles Total: 10 rules across 6 categories Decision Table — Loading States Scenario Pattern Why ---------- --------- ----- List/card content loading Skeleton Matches content shape, reduces perceived latency Form submission Spinner Indeterminate, short-lived action File upload Progress bar Measurable operation with known total Image loading Blur placeholder Prevents layout shift, progressive reveal Route transition Skeleton Preserves layout while data loads Background sync None / subtle indicator Non-blocking, low priority Qu …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/interaction-patterns--204070