qa-detect-hidden-resources

Detect CSS-hidden desktop resources downloaded on mobile viewports.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill finds desktop-only content that is hidden on mobile but still causes browsers to load images, iframes, videos, or background assets, wasting bandwidth and slowing the mobile experience.

Core Features & Use Cases

  • Hidden Image Detection: Identifies CSS-hidden desktop containers on mobile that already downloaded embedded images.
  • Embedded Media Detection: Flags hidden iframes and videos that have active source URLs and may still open network connections.
  • Background Asset Detection: Detects hidden elements with background-image URLs that may have been prefetched.
  • Use Case: A responsive homepage contains a desktop-only carousel and ad panel; this Skill pinpoints the hidden container so the team can remove unnecessary mobile downloads.

Quick Start

Ask the agent to scan the current page on mobile for CSS-hidden desktop containers that are still downloading images, embeds, or background assets.

Frequently Asked Questions about qa-detect-hidden-resources

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

FAQPage Schema
How do I detect hidden images and iframes still downloading on mobile bandwidth?

To detect hidden images and iframes wasting mobile bandwidth, inspect CSS-hidden desktop containers on mobile viewports using browser DOM evaluation. This identifies hidden elements, resource-loaded media, and computed styles that trigger unnecessary network requests.

Why does CSS hidden content still cause image downloads during a responsive audit?

CSS hidden content causes image downloads during a responsive audit because browsers often prefetch background-image assets and embedded media URLs within hidden containers before evaluating visibility, keeping active network connections open on mobile devices.

What is the best way to find hidden desktop-only resources affecting mobile performance?

The best way to find hidden desktop-only resources affecting mobile performance is to scan the page on mobile and tablet viewports. This flags hidden elements with active source URLs, background images, and embedded videos that waste bandwidth.

Do I need browser DOM evaluation to find background images in hidden containers?

Yes, you need browser DOM evaluation to find background images in hidden containers. Evaluating computed styles is required to inspect hidden elements and accurately identify network-impacting content like prefetched background-image assets.

Can this responsive audit detect hidden videos with active source URLs?

Yes, this responsive audit can detect hidden videos with active source URLs. It flags embedded media, including iframes and videos within CSS-hidden desktop containers, that may still open network connections and download data on mobile.