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

qa-detect-ux-overlap

Detect overlapping UI elements that block visibility or interaction on web pages.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds UI elements that visually collide on screen, helping you catch broken layouts where buttons cover headers, text overlaps in grids, sticky elements hide content, or stacked dialogs obscure each other.

Core Features & Use Cases

  • Element overlap detection: Identifies visible components whose bounding boxes intersect enough to block interaction or readability.
  • Text collision checks: Detects sibling text elements that crash into each other in calendars, headers, and grid-like layouts.
  • Layout safety checks: Flags cramped grid cells, sticky/fixed overlays, and overlapping dialogs that indicate responsive or z-order bugs.
  • Use Case: Run it on a dashboard, calendar, table view, or modal-heavy page to surface visual defects that make the interface hard to use.

Quick Start

Use the qa-detect-ux-overlap skill to inspect the current page for overlapping UI elements and report any visual collisions it finds.

Frequently Asked Questions about qa-detect-ux-overlap

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

FAQPage Schema
How do I detect overlapping UI elements on a responsive web page?▼

You can detect UI overlap by running browser-side geometry inspection and visibility checks. This identifies intersecting bounding boxes that block readability or interaction in components like sticky headers, floating controls, and stacked dialogs.

What causes text collision in responsive grid layouts and calendars?▼

Text collision in responsive grids and calendars happens when sibling text elements intersect due to cramped layout cells or responsive breakpoints. Browser-side geometry inspection identifies these overlapping bounding boxes to flag the layout defects.

Can I check for sticky header and floating control overlap on a dashboard?▼

Yes, you can check for sticky header and floating control overlap on a dashboard. Browser-side geometry inspection identifies when fixed or sticky overlays obscure underlying content, flagging z-order bugs and visual collision defects.

How do I test stacked dialogs for visibility and interaction blocking?▼

To test stacked dialogs for visibility blocking, inspect their bounding box intersections. Browser-side geometry checks identify when overlapping dialogs obscure each other, flagging z-order bugs and interaction-blocking layout defects.

What is the best way to find layout defects in complex web tables?▼

The best way to find layout defects in complex web tables is to inspect element bounding boxes for intersection. Browser-side visibility checks flag cramped grid cells and overlapping text, surfacing visual collisions that degrade user experience.

Related Skills

Explore More Software Engineering Skills→
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate
FlintmereFlintmere

fix-bug

Reproduce reported defects in Flintmere's codebase and validate fixes with regression tests.

Official
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-whitespace

Detect wasted horizontal space in responsive web layouts via DOM geometry inspection.

Community
Advanced
petrkindlmannpetrkindlmann
64

visual-testing

Detects pixel-level UI differences by comparing baselines with current renders across browsers and viewports.

Community
Advanced