qa-detect-word-break

Detect horizontal overflow from long unbreakable text via DOM inspection.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds layout breakage caused by long unbreakable text such as URLs, emails, hashes, and code-like identifiers that can push containers wider than intended.

Core Features & Use Cases

  • Horizontal overflow detection: Flags text elements whose content exceeds the available width because wrapping rules are missing or too strict.
  • Long-token analysis: Identifies the longest unbreakable word or token so you can quickly see what is forcing the overflow.
  • Responsive QA use case: Use it when reviewing comments, descriptions, logs, or user-generated content that may appear correctly in one viewport but break layouts in another.

Quick Start

Run this Skill on a page with narrow containers and long text to identify elements that overflow because they lack proper wrapping rules.

Frequently Asked Questions about qa-detect-word-break

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

FAQPage Schema
How do I detect horizontal overflow caused by long words in a responsive layout?

Long unbreakable text like URLs and hashes pushes containers wider than intended because wrapping rules are missing. Inspecting computed wrapping styles and container widths helps pinpoint the exact layout defects causing horizontal overflow in responsive interfaces.

How do I find which specific word is forcing a container to overflow?

Long-token analysis identifies the longest unbreakable word or token inside a container so you can quickly see what is forcing the overflow. This targets the exact string causing layout breakage in user-generated content and logs.

Why does user-generated content break my layout in narrow viewports but not wider ones?

User-generated content breaks layouts in narrow viewports because long unbreakable text exceeds the restricted clientWidth. Smaller screens have less available width, so unbreakable tokens force horizontal overflow when CSS wrapping rules are missing.

Does this responsive QA testing require any specific browser dependencies?

No external dependencies are required for this responsive QA testing. It relies on standard browser DOM inspection capabilities, checking computed wrapping styles, scrollWidth, and clientWidth to pinpoint long-word layout defects across viewports.

What is the best way to QA text-heavy interfaces for layout bugs across different screen sizes?

The best way to QA text-heavy interfaces for layout bugs is to inspect scrollWidth and clientWidth across viewports. This catches horizontal overflow from long unbreakable text in comments, logs, and descriptions before users encounter broken layouts.