| 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
