Tab

---

name: "tab" version: "1.0.0" description: "Tab UI component reference — design patterns, accessibility, state management, responsive tabs. Use when implementing tabbed interfaces, designing tab navigation, or building accessible tab components." author: "BytesAgain" homepage: "https://bytesagain.com" source: "https://github.com/bytesagain/ai-skills" tags: [tab, tabs, ui-component, navigation, a11y, frontend, tabpanel] category: "frontend"

---

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*