skills.rest
dembrandt
dembrandtOFFICIAL
Explore all skills by this author →
Website𝕏@dembrandtcomGitHub

tab-navigation

Create accessible tabbed interfaces with ARIA semantics and keyboard navigation.

33|6|Updated Apr 19, 2026
Search Tags:#accessibility#keyboard navigation#responsive design#tabs#aria#dashboard ui#tab navigation
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill tab-navigation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tab-navigation
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/tab-navigation
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill tab-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps organize related content into intuitive tabbed interfaces without creating confusing navigation, overflow, accessibility, or state-management problems.

Core Features & Use Cases

  • Tab Selection: Choose appropriate underline, contained, pill, or vertical tab styles based on layout context and visual emphasis.
  • Responsive Behavior: Handle tab overflow with horizontal scrolling or a More menu instead of wrapping tabs across multiple lines.
  • Accessible Interaction: Implement ARIA roles, roving tabindex keyboard navigation, visible focus states, and correctly hidden inactive panels.
  • Use Case: Design a product detail page that lets users switch between overview, activity, and settings while preserving the selected tab in the URL.

Quick Start

Ask the tab-navigation skill to design an accessible tabbed settings page with responsive overflow handling and deep-linkable tab state.

Frequently Asked Questions about tab-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement accessible tab navigation with ARIA and roving tabindex?▼

Accessible tab navigation requires implementing ARIA tab semantics, roving tabindex keyboard navigation, visible focus states, and correctly hidden inactive panels to ensure screen reader compatibility and keyboard accessibility.

What is the best way to handle responsive tab overflow in a dashboard UI?▼

Responsive tab overflow should be handled using horizontal scrolling or a More menu instead of wrapping tabs across multiple lines, ensuring the dashboard UI layout remains clean and usable across different screen sizes.

How do I preserve selected tab state in the URL for a product detail page?▼

Tab state persistence allows the selected tab to be preserved in the URL, enabling deep-linking so users can switch between overview, activity, and settings views on a product detail page while maintaining shareable states.

When should I use vertical tabs instead of underline or pill tabs?▼

Vertical, underline, contained, or pill tab styles should be chosen based on layout context and visual emphasis, with vertical tabs typically suited for dashboard sidebars and underline tabs fitting compact content panels.

Why does my keyboard navigation skip inactive tab panels?▼

Inactive tab panels must be correctly hidden from keyboard navigation to prevent focus traps; implementing proper ARIA semantics and roving tabindex ensures keyboard focus moves only between active tab elements.

Can I use tab navigation for a settings screen with multiple shared-context data areas?▼

Tab navigation organizes related content into accessible tabbed interfaces for settings screens, dashboards, and content panels, allowing users to manage multiple shared-context data areas without confusing interaction patterns.

Related Skills

Explore More Design & Creative Skills→
OZVEOZVE

dashboard-tab-ui

Create tabbed UI forms in Mercur dashboards using TabbedForm.

Community
Intermediate
swyxioswyxio
154

sync-url-navigation

Sync URL query parameters with navigation, tab, and filter state.

Community
Intermediate
DimillianDimillian
3.9k

swiftui-ui-patterns

Compose SwiftUI interfaces with tab-based navigation and reusable components.

Community
Intermediate
kostja94kostja94
872

tab-accordion

Implement tab and accordion components with native HTML details and summary elements.

Community
Intermediate