qa-detect-orientation

Detect layout breakage in landscape orientation by swapping viewport dimensions and scanning for overflow.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill detects usability and layout failures that appear specifically when mobile or tablet devices are rotated into landscape, where short vertical space often exposes hidden overflow, cut-off content, and unusable navigation.

Core Features & Use Cases

  • Landscape overflow detection: Finds horizontal scrolling and content that extends beyond the viewport in landscape mode.
  • Fixed element scrutiny: Flags sticky headers and banners that consume too much of the limited landscape height.
  • Modal fit validation: Detects dialogs and modals that are taller than the viewport and may hide critical actions.
  • Use case: A responsive product looks fine in portrait, but landscape on tablets traps users behind a tall modal or clipped header; this Skill identifies those defects before release.

Quick Start

Run the orientation-detection skill to rotate the current page into landscape and report any overflow, oversized fixed elements, or modals that do not fit the viewport.

Frequently Asked Questions about qa-detect-orientation

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

FAQPage Schema
How do I detect layout overflow when a mobile device is rotated to landscape?

To detect landscape layout overflow, you can swap the viewport dimensions to simulate device rotation and scan for horizontal scrolling or cut-off content. This identifies responsive design breaks specific to landscape orientation.

Why does my responsive modal get cut off on tablets in landscape mode?

Responsive modals get cut off in landscape because the short vertical height traps content taller than the viewport. Modal fit validation detects dialogs that hide critical actions when viewport height is limited.

How do I check if fixed headers take up too much screen space in landscape orientation?

Fixed element scrutiny checks sticky headers and banners by evaluating oversized fixed UI components against landscape viewport dimensions. This flags navigation elements consuming excessive vertical space on touch devices.

What is the best way to automate responsive audits for mobile rotation defects?

Automating responsive audits requires a real browser resize step to simulate rotation, followed by an in-page evaluation probe scanning for overflow. The original orientation is restored after inspecting for viewport-sensitive defects.

Does landscape overflow detection work without installing additional dependencies?

Landscape overflow detection works without dependencies by using a real browser resize step and a single in-page evaluation probe. It operates directly within responsive design workflows to identify layout breakage.