interaction-patterns

Codify UI interaction patterns for accessible frontend components.

217|20|Updated Dec 31, 2025
One-click install
npx skills add https://github.com/yonatangross/orchestkit --skill interaction-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interaction-patterns
Source: https://github.com/yonatangross/orchestkit/tree/main/plugins/ork/skills/interaction-patterns
Command: npx skills add https://github.com/yonatangross/orchestkit --skill interaction-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and rules (resource) components.

What problem does it solve?

This Skill addresses common challenges in UI development by providing codified patterns for user interaction, ensuring a smooth, accessible, and efficient user experience across various components.

Core Features & Use Cases

  • Loading States: Implements skeleton loading, spinners, and progress bars for effective perceived performance.
  • Content Interaction: Offers patterns for infinite scroll, progressive disclosure, and tab overflow handling.
  • Overlay Components: Guides the use of modals, drawers, and inline selections for clear user flows.
  • Accessibility: Ensures keyboard alternatives for drag-and-drop and proper ARIA usage for all interactive elements.
  • Use Case: When building a product listing page, use the infinite scroll pattern to load more items seamlessly as the user scrolls, and implement skeleton loaders to maintain a fluid experience while data is fetched.

Quick Start

Implement skeleton loading for a list of user profile cards that are fetched from an API.

Frequently Asked Questions about interaction-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement accessible infinite scroll without breaking keyboard navigation?

Accessible infinite scroll requires proper ARIA attributes to announce dynamically loaded content and keyboard alternatives to navigate new items. This pattern ensures users relying on screen readers or keyboards can interact seamlessly with continuously fetched data.

What is the best way to handle skeleton loading for API fetched data?

Skeleton loading improves perceived performance by displaying placeholder outlines while fetching API data. Implementing these patterns for elements like user profile cards maintains a fluid user experience during network requests.

How do I make drag-and-drop interactions accessible for keyboard users?

Accessible drag-and-drop interactions require keyboard alternatives to allow users to select and move items without a mouse. These patterns ensure adherence to UX best practices and accessibility standards for all interactive elements.

When should I use progressive disclosure in UI design?

Progressive disclosure is used to reveal complex information progressively, reducing initial cognitive load. This interaction design pattern helps craft intuitive user interfaces by showing essential content first and secondary details upon user request.

What are the recommended patterns for tab overflow handling in frontend components?

Tab overflow handling patterns manage UI space when tabs exceed container width, ensuring clear user flows. These interaction patterns maintain layout integrity while keeping navigation accessible across various screen sizes.

Does this interaction design guidance cover toast notification positioning and modal drawers?

Yes, this covers toast notification positioning and overlay components like modals and drawers. It provides codified patterns to ensure clear user flows and adherence to UX best practices for these specific interface elements.