skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-ux-breadcrumb

Detect breadcrumb navigation defects in responsive web layouts.

Updated May 22, 2026
Search Tags:#accessibility#navigation#responsive#ux#breadcrumb#aria
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-ux-breadcrumb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-ux-breadcrumb
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-ux-breadcrumb
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-ux-breadcrumb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill detects common breadcrumb navigation defects that make page hierarchy confusing, inaccessible, or visually inconsistent.

Core Features & Use Cases

  • Duplicate segment detection: Flags breadcrumbs like Students > Students where parent and current page labels repeat.
  • Structural and accessibility checks: Identifies missing home links, single-item pseudo-breadcrumbs, inconsistent separators, missing navigation landmarks, and clickable current-page items.
  • Responsive UX review: Catches breadcrumbs that wrap into multiple lines on narrow viewports and lose their intended one-line navigation pattern.

Quick Start

Use the breadcrumb skill to inspect the current page for breadcrumb hierarchy, accessibility, and responsive layout issues.

Frequently Asked Questions about qa-detect-ux-breadcrumb

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

FAQPage Schema
How do I detect breadcrumb navigation accessibility defects on a web page?▼

Breadcrumb navigation accessibility defects are detected by inspecting visible containers for missing ARIA landmarks, inconsistent separators, and absent home links. This process validates hierarchy and current-page state to ensure proper screen reader support.

Why do my breadcrumbs wrap awkwardly on mobile responsive layouts?▼

Breadcrumbs wrap awkwardly on mobile responsive layouts when viewport-aware wrapping checks are not applied. Evaluating narrow viewport behavior identifies trails that lose their intended one-line navigation pattern and degrade visual clarity.

What is a duplicate segment breadcrumb error in UX navigation?▼

A duplicate segment breadcrumb error in UX navigation occurs when parent and current-page labels repeat, such as Students > Students. Consecutive segment comparison detects these redundant hierarchies that confuse page structure.

How do I check if my current-page breadcrumb link state is clickable?▼

Checking if a current-page breadcrumb link state is clickable requires link-state inspection of the navigation trail. Identifying clickable current-page items prevents user confusion and standardizes the expected non-clickable terminal node behavior.

Can I use automated breadcrumb checks for single-item pseudo-breadcrumbs?▼

Automated breadcrumb checks can evaluate single-item pseudo-breadcrumbs by inspecting structural elements. This validation flags trails lacking multiple segments, ensuring the navigation hierarchy provides meaningful path context rather than a redundant label.

What are common breadcrumb separator consistency issues in web navigation?▼

Common breadcrumb separator consistency issues in web navigation involve varying characters between consecutive segments. Structural checks identify inconsistent separators within the visible container, ensuring a unified visual path representation across the hierarchy.

Related Skills

Explore More Design & Creative Skills→
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-required-state

Detect ambiguous required-field and error-state patterns in web forms.

Community
Advanced
sumilee-pcusumilee-pcu

bug-triage

Parse bug reports to classify severity and priority for sprint planning.

Community
Advanced
manhthien2005manhthien2005

responsive-qa

Verify responsive layout and interaction quality across Chrome viewports.

Community
Intermediate
Doyajin174Doyajin174
1

accessibility-wcag

Audit frontend codebases for WCAG 2.2 accessibility compliance.

Community
Advanced