Tab UI component reference — design patterns, accessibility, state management, responsive tabs. Use when implementing tabbed interfaces, designing tab navigation, or building accessible tab components.

Install

openclaw skills install tab

Tab — Tab UI Component Reference

Quick-reference skill for tab component design, accessibility patterns, and implementation.

When to Use

  • Implementing tabbed content panels in web applications
  • Designing tab navigation for sections of related content
  • Making tabs accessible with proper ARIA roles and keyboard support
  • Choosing between tabs, accordions, and other navigation patterns
  • Building responsive tab components that work on mobile

Commands

intro

scripts/script.sh intro

Tab component overview — when to use tabs, types, alternatives.

anatomy

scripts/script.sh anatomy

Tab anatomy — tab list, tab buttons, tab panels, indicators, badges.

patterns

scripts/script.sh patterns

Design patterns — horizontal, vertical, scrollable, closeable, draggable tabs.

accessibility

scripts/script.sh accessibility

Accessibility — ARIA roles, keyboard navigation, focus management, screen readers.

state

scripts/script.sh state

State management — controlled vs uncontrolled, lazy loading, URL sync, persistence.

responsive

scripts/script.sh responsive

Responsive strategies — scrollable tabs, dropdown conversion, priority tabs, swipe.

css

scripts/script.sh css

CSS implementation — indicator animations, theming, variants, transitions.

checklist

scripts/script.sh checklist

Tab component design and implementation checklist.

help

scripts/script.sh help

version

scripts/script.sh version

Powered by BytesAgain | bytesagain.com | hello@bytesagain.com