- 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 introTab component overview — when to use tabs, types, alternatives.
anatomy
scripts/script.sh anatomyTab anatomy — tab list, tab buttons, tab panels, indicators, badges.
patterns
scripts/script.sh patternsDesign patterns — horizontal, vertical, scrollable, closeable, draggable tabs.
accessibility
scripts/script.sh accessibilityAccessibility — ARIA roles, keyboard navigation, focus management, screen readers.
state
scripts/script.sh stateState management — controlled vs uncontrolled, lazy loading, URL sync, persistence.
responsive
scripts/script.sh responsiveResponsive strategies — scrollable tabs, dropdown conversion, priority tabs, swipe.
css
scripts/script.sh cssCSS implementation — indicator animations, theming, variants, transitions.
checklist
scripts/script.sh checklistTab component design and implementation checklist.
help
scripts/script.sh helpversion
scripts/script.sh version*Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*