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

qa-detect-ux-icons

Detect icon UX defects in web interfaces via DOM inspection.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds icon-based UX defects that make interfaces unclear, hard to interpret, or visually inconsistent, especially when an icon looks clickable but lacks discoverable meaning for sighted users.

Core Features & Use Cases

  • Icon-only control review: Detects buttons and links that rely on icons without tooltip support or clear labeling.
  • Visual quality checks: Flags undersized, oversized, squashed, clipped, or ambiguously styled icons that weaken usability.
  • Consistency analysis: Identifies inconsistent icon-to-text spacing, duplicated icon meanings, and color-only status indicators.
  • Use case: A product team can run this Skill on a dashboard and quickly find unlabeled kebab menus, tiny toolbar icons, and inconsistent action spacing before release.

Quick Start

Run the qa-detect-ux-icons skill on a page with icons to identify unlabeled, ambiguous, or visually broken icon patterns.

Frequently Asked Questions about qa-detect-ux-icons

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

FAQPage Schema
How do I find unlabeled icon-only buttons in my web interface?▼

To find unlabeled icon-only buttons, you can inspect the DOM for controls lacking tooltip support or clear labeling. This Skill detects icon UX defects by analyzing button labels and discoverable meaning for sighted users.

What causes icon visual inconsistency in UI dashboards?▼

Icon visual inconsistency is caused by undersized, oversized, squashed, or clipped icons, alongside inconsistent icon-to-text spacing. Visual quality checks identify these ambiguously styled icons to flag actionable usability issues before release.

Can I check color-only status indicators for accessibility issues?▼

Yes, you can check color-only status indicators by analyzing DOM color usage and icon signature patterns. Consistency analysis identifies indicators that rely solely on color, reducing discoverability and clarity for sighted users.

Does this tool detect missing tooltips on kebab menus?▼

Yes, this tool detects missing tooltips on kebab menus by performing DOM inspection of labels and tooltips. It flags icon-only controls that lack discoverable meaning, ensuring actionable accessibility issues are caught.

What is the best way to audit decorative icons for usability?▼

The best way to audit decorative icons is to inspect sizing, spacing, and color usage across browser-rendered layouts. This Skill flags ambiguously styled or broken icon patterns that weaken overall interface usability and clarity.

Why do sighted users find icon-only controls confusing?▼

Sighted users find icon-only controls confusing when an icon looks clickable but lacks discoverable meaning. Running a visual review detects these icon UX defects, identifying missing tooltip support and unclear labeling in the DOM.

Related Skills

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

qa-detect-ux-nav-icons

Detect inconsistent navigation icon presentation and alignment via DOM inspection.

Community
Intermediate
petrkindlmannpetrkindlmann
64

qa-metrics

Define QA metrics with formulas, targets, and CI automation hooks.

Community
Advanced
fusenginefusengine
22

validating-accessibility

Validate digital interfaces against WCAG 2.2 Level AA accessibility standards.

Community
Intermediate
enigmaicon-engenigmaicon-eng
1

usability-frameworks

Evaluate user interfaces using Nielsen heuristics and severity-based prioritization.

Community
Basic