element-hiding

Installation
SKILL.md

Adblock Element Hiding

If your cookie consent banner has class .cookie-banner or ID #consent-popup, adblockers may hide it — users never see the consent notice, which can cause GDPR compliance issues and broken UX for ~30-40% of desktop users.

Quick Reference

  • Adblockers use EasyList filter rules to hide elements with class names, IDs, or patterns associated with ads
  • Common blocked names: .ad, .ads, .advertisement, .banner, #ad, #ads, #banner, .sponsor
  • Affected elements: legitimate banners, notification bars, promotional sections, and cookie consent notices
  • Test your site with uBlock Origin enabled — check for missing content, broken layouts, or hidden consent banners
  • Rename affected elements using semantic, content-specific class names to avoid false-positive blocking

Check

Review the HTML source for element IDs and class names that match common adblocker patterns: .ad, .ads, .advertisement, .banner, .sponsor, #ad, #banner, .cookie-notice, .consent. Test the page with uBlock Origin enabled in a browser to identify elements that are hidden.

Fix

Rename affected elements using specific, content-focused class names that do not match adblocker patterns. For cookie consent banners specifically, use class names like .privacy-controls or .cookie-preferences instead of .cookie-banner or .gdpr-notice.

Installs
5
GitHub Stars
73.9K
First Seen
Aug 11, 2026
element-hiding — thedaviddias/front-end-checklist