tab
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 via CLI (Recommended)
clawhub install openclaw/skills/skills/ckchzh/tabTab — 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 | [email protected]
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-ckchzh-tab": {
"enabled": true,
"auto_update": true
}
}
}Tags
Related Skills
frontend-design
Generates production-ready UI components from natural language. Use when the user asks to design a component, create a button, build a form, prototype a layout, or generate React/Tailwind CSS code. NOT for: backend logic, API design, database schema, or non-UI tasks.
react-best-practices
Audits React code for performance, bundle size, and best practices. Use when reviewing React code, auditing bundle size, finding performance issues, checking React 18+ patterns, or evaluating a React codebase. NOT for: non-React projects, backend Node.js code, or CSS-only reviews.
experience-signal-death-empty-quarter
Feel the raw tension of survival as a blinding sandstorm strips away digital safety nets, forcing you to trust instinct and simple tools. Navigate shifting dunes, manage dwindling fuel, and hunt for a signal before the heat overwhelms you. (8 steps, medium intensity, several hours). 沙漠求生体验. Supervivencia en tormenta.
experience-wadi-sensor-death
Feel the pulse‑pounding urgency of surviving a sudden flash flood in Oman's stark desert canyons. Navigate collapsing stone channels as sensors fail, using sound and instinct to reach high ground and find water. 14 steps, HIGH intensity, 1‑2 weeks. 沙漠闪洪生存紧迫感. urgencia supervivencia.
experience-red-water-trap-outback
Feel the pulse of raw danger as sudden flash floods turn the red‑dirt Australian Outback into a chaotic river, sharpening your survival instincts and confronting isolation. Navigate water‑logged tracks, seek higher ground, and endure extreme uncertainty. (13 steps, HIGH intensity, 1‑2 weeks) 突发洪水. inundaciones súbitas.