qa-detect-rtl-layout

Detect RTL layout breakage by scanning DOM elements for overflow and fixed-position issues.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds layout and positioning defects that only appear when a page is rendered right-to-left, helping catch broken internationalization before users do.

Core Features & Use Cases

  • RTL overflow detection: Flags pages and containers that become horizontally scrollable after switching the document direction to RTL.
  • Logical property validation: Identifies fixed and sticky elements that stay anchored to the wrong side because they use left/right instead of logical inset properties.
  • Responsive QA support: Useful for auditing headers, navs, sidebars, and containers across languages such as Arabic or Hebrew where direction changes can break layout.

Quick Start

Ask the agent to run the qa-detect-rtl-layout skill on the current page and report any overflow or side-positioning defects found in RTL mode.

Frequently Asked Questions about qa-detect-rtl-layout

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

FAQPage Schema
How do I detect RTL layout overflow when testing responsive web pages?

RTL layout overflow is detected by switching the document direction to right-to-left and measuring whether containers or the page become horizontally scrollable. This flags UI regions that break when rendered for RTL languages.

What causes fixed and sticky elements to anchor on the wrong side in RTL mode?

Fixed and sticky elements anchor incorrectly in RTL mode when CSS uses physical left or right properties instead of logical inset properties. Scanning the DOM validates that positioning adapts to the switched direction.

How does RTL layout testing work for internationalization QA?

RTL layout testing for internationalization QA works by applying in-page DOM scanning with direction restoration to headers, navigation, and sidebars. It measures overflow and validates fixed elements to catch broken rendering before users do.

Can I audit headers and sidebars for Arabic or Hebrew direction changes?

Yes, you can audit headers, navs, sidebars, and containers for Arabic or Hebrew direction changes. Responsive QA workflows scan these UI regions to detect horizontal overflow and side-positioning defects caused by RTL switching.

What is the best way to catch broken internationalization in right-to-left layouts?

The best way to catch broken internationalization in right-to-left layouts is running an automated DOM scan that switches direction, measures container overflow, and checks fixed or sticky elements for logical property validation.

Why does my web page become horizontally scrollable after switching to RTL direction?

A web page becomes horizontally scrollable in RTL direction when containers lack proper logical properties or fixed elements fail to adapt. Overflow detection measures these layout breakages caused by the right-to-left direction switch.