qa-detect-ux-alignment

Detect vertical alignment defects in web interfaces using DOM bounding-box measurements.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill detects subtle layout alignment defects that make interfaces look unpolished or harder to use, such as misaligned labels, icons, breadcrumbs, tables, buttons, and header elements.

Core Features & Use Cases

  • Breadcrumb and title alignment checks: Finds baseline drift between breadcrumb items and nearby page titles.
  • Form and control alignment checks: Flags label-input misalignment, uneven button rows, and inconsistent form action placement.
  • Icon and table rhythm checks: Detects icon-text vertical drift and mixed vertical positioning inside table rows.
  • Header layout checks: Catches center misalignment in banner and navbar structures.
  • Use case: A QA reviewer can run this skill on a product page and quickly identify the exact elements that need flexbox or spacing fixes.

Quick Start

Use the qa-detect-ux-alignment skill to inspect the current page for visible alignment issues and report any misaligned UI elements.

Frequently Asked Questions about qa-detect-ux-alignment

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

FAQPage Schema
How do I detect vertical alignment defects in web interfaces?

To detect vertical alignment defects in web interfaces, you can inspect the browser DOM using bounding-box and text-baseline measurements to identify pixel-level drift across rendered page elements.

What causes breadcrumb and page title misalignment in layouts?

Breadcrumb and page title misalignment is caused by baseline drift between elements. Inspecting bounding-box measurements helps catch these vertical alignment defects before they reach users.

Can I check form labels and inputs for pixel-level misalignment?

Yes, you can check form labels and inputs for pixel-level misalignment. The process flags label-input drift, uneven button rows, and inconsistent form action placement by measuring bounding boxes.

Does detecting UX alignment issues require browser DOM inspection?

Yes, detecting UX alignment issues requires browser DOM inspection. It relies on bounding-box and text-baseline measurements to identify pixel-level drift in table rows, headers, and icon-text controls.

What is the best way to find icon-text vertical drift in table rows?

The best way to find icon-text vertical drift in table rows is by applying alignment checks that detect mixed vertical positioning and rhythm inconsistencies using text-baseline measurements.

How do I fix header layout center misalignment in navbar structures?

Fixing header layout center misalignment in navbar structures requires identifying the drift first. Alignment checks catch center misalignment in banner and navbar structures to guide flexbox or spacing fixes.