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

qa-detect-ux-nav-icons

Detect inconsistent navigation icon presentation and alignment via DOM inspection.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill catches sidebar, tab, and navigation UI issues that make interfaces look sloppy or confusing, especially when icon usage, alignment, sizing, or active-state styling is inconsistent across sibling items.

Core Features & Use Cases

  • Icon consistency checks: Detects mixed icon/no-icon nav items, icon size variance, and icon style mismatches.
  • Alignment and spacing review: Flags label-icon misalignment and inconsistent item heights that break visual rhythm.
  • Readability and state detection: Finds truncated labels without tooltips and missing active-state indicators for the current page.
  • Use case: A product team reviews a dashboard sidebar and immediately sees which nav items need styling cleanup before release.

Quick Start

Ask the skill to inspect the current page for navigation and sidebar icon consistency issues.

Frequently Asked Questions about qa-detect-ux-nav-icons

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

FAQPage Schema
How do I check sidebar navigation icons for UI consistency issues?▼

To check sidebar navigation icons for UI consistency, inspect the browser DOM to detect mixed icon usage, size variance, label misalignment, and missing active-state styling across sibling nav items.

What causes inconsistent active-state styling in sidebar menus?▼

Inconsistent active-state styling in sidebar menus occurs when current-page indicators are missing or applied unevenly across sibling nav items, which can be identified through layout comparison and visual rhythm inspection.

How do I fix inconsistent tab navigation alignment?▼

To fix inconsistent tab navigation alignment, inspect the DOM to flag label-icon misalignment and inconsistent item heights, ensuring visual rhythm is maintained across all related menu entries.

Can I detect missing tooltips on truncated navigation labels automatically?▼

You can detect missing tooltips on truncated navigation labels by inspecting the DOM for label truncation across sibling nav items, flagging readability issues where text overflows without tooltip support.

Does this work for menu lists with mixed icon and no-icon items?▼

Yes, it works for menu lists with mixed icon and no-icon items by applying browser DOM inspection to identify visual rhythm defects and flag sibling navigation entries lacking icon presence.

Related Skills

Explore More Design & Creative Skills→
VincentChong123VincentChong123

agent-browser

Automate web browser navigation, element manipulation, and data extraction.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-active-state

Detect inconsistent active-state styling and missing current-page indicators in navigation menus.

Community
Intermediate
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
DengNaichenDengNaichen
34

axiom-audit-ux-flow

Scan SwiftUI and UIKit source code to detect navigation defects and accessibility issues.

Community
Advanced