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`

```bash
scripts/script.sh intro
```

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

### `anatomy`

```bash
scripts/script.sh anatomy
```

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

### `patterns`

```bash
scripts/script.sh patterns
```

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

### `accessibility`

```bash
scripts/script.sh accessibility
```

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

### `state`

```bash
scripts/script.sh state
```

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

### `responsive`

```bash
scripts/script.sh responsive
```

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

### `css`

```bash
scripts/script.sh css
```

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

### `checklist`

```bash
scripts/script.sh checklist
```

Tab component design and implementation checklist.

### `help`

```bash
scripts/script.sh help
```

### `version`

```bash
scripts/script.sh version
```

---

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