Interaction Patterns

Quick Reference

rules/interaction-skeleton-loading.md

rules/interaction-infinite-scroll.md

rules/interaction-progressive-disclosure.md

rules/interaction-modal-drawer-inline.md

rules/interaction-drag-drop.md

rules/interaction-tabs-overflow.md

rules/interaction-toast-notifications.md

rules/interaction-cognitive-load-thresholds.md

rules/interaction-form-ux.md

rules/interaction-persuasion-ethics.md

Decision Table — Loading States

Quick Start

Skeleton Loading

function CardSkeleton() {
  return (
    <div className="animate-pulse space-y-3">
      <div className="h-48 w-full rounded-lg bg-muted" />
      <div className="h-4 w-3/4 rounded bg-muted" />
      <div className="h-4 w-1/2 rounded bg-muted" />
    </div>
  )
}

function CardList({ items, isLoading }: { items: Item[]; isLoading: boolean }) {
  if (isLoading) {
    return (
      <div className="grid grid-cols-3 gap-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <CardSkeleton key={i} />
        ))}
      </div>
    )
  }
  return (
    <div className="grid grid-cols-3 gap-4">
      {items.map((item) => <Card key={item.id} item={item} />)}
    </div>
  )
}

Infinite Scroll with Accessibility

function InfiniteList({ fetchNextPage, hasNextPage, items }: Props) {
  const sentinelRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting && hasNextPage) fetchNextPage() },
      { rootMargin: "200px" }
    )
    if (sentinelRef.current) observer.observe(sentinelRef.current)
    return () => observer.disconnect()
  }, [fetchNextPage, hasNextPage])

  return (
    <div role="feed" aria-busy={isFetching}>
      {items.map((item) => (
        <article key={item.id} aria-posinset={item.index} aria-setsize={-1}>
          <ItemCard item={item} />
        </article>
      ))}
      <div ref={sentinelRef} />
      {hasNextPage && (
        <button onClick={() => fetchNextPage()}>Load more items</button>
      )}
      <div aria-live="polite" className="sr-only">
        {`Showing ${items.length} items`}
      </div>
    </div>
  )
}

Rule Details

Skeleton Loading

Load:

rules/interaction-skeleton-loading.md

Infinite Scroll

Load:

rules/interaction-infinite-scroll.md

Progressive Disclosure

Load:

rules/interaction-progressive-disclosure.md

Modal / Drawer / Inline

Load:

rules/interaction-modal-drawer-inline.md

Drag & Drop

@dnd-kit/core

Load:

rules/interaction-drag-drop.md

Tabs Overflow

Load:

rules/interaction-tabs-overflow.md

Toast Notifications

Load:

rules/interaction-toast-notifications.md

Cognitive Load Thresholds

Load:

rules/interaction-cognitive-load-thresholds.md

Form UX

Load:

rules/interaction-form-ux.md

Persuasion Ethics

Load:

rules/interaction-persuasion-ethics.md

Key Principles

1. Keyboard parity — Every mouse interaction MUST have a keyboard equivalent. No drag-only, no hover-only.
2. Skeleton over spinner — Use content-shaped placeholders for data loading; reserve spinners for indeterminate actions.
3. Native HTML first — Prefer

   <dialog>

   ,

   <details>

   ,

   role="feed"

   over custom implementations.
4. Progressive enhancement — Features should work without JS where possible, then enhance with interaction.
5. Announce state changes — Use

   aria-live

   regions to announce dynamic content changes to screen readers.
6. Respect scroll position — Back navigation must restore scroll position; infinite scroll must not lose user's place.

Anti-Patterns (FORBIDDEN)

• Spinner for content loading — Spinners give no spatial hint. Use skeletons matching the content shape.
• Infinite scroll without Load More — Screen readers and keyboard users cannot reach footer content. Always provide a button fallback.
• Modal for browsable content — Modals trap focus and block interaction. Use drawers or inline expansion for browsing.
• Drag-only reorder — Excludes keyboard and assistive tech users. Always provide arrow key + Enter alternatives.
• Toast without ARIA role — Toasts are invisible to screen readers. Use

  role="status"

  for success,

  role="alert"

  for errors.
• Auto-dismiss error toasts — Users need time to read errors. Never auto-dismiss error notifications.

Detailed Documentation

Related Skills

• ork:ui-components

  — shadcn/ui component patterns and CVA variants

• ork:animation-motion-design

  — Motion library and View Transitions API

• ork:accessibility

  — WCAG compliance, ARIA patterns, screen reader support

• ork:responsive-patterns

  — Responsive layout and container query patterns

• ork:performance

  — Core Web Vitals and runtime performance optimization