Guide · Agent skill
How to use the Adblock Element Hiding Check agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The element-hiding skill is a set of instructions that tells an AI agent to review a website's HTML for class names and IDs that common ad blockers are known to hide, such as .ad, .banner, or .cookie-banner. It is aimed at front-end developers and site owners who need legitimate banners and cookie notices to stay visible to visitors who run blockers. After this guide you will know how to install the skill, ask for the check in plain language, and read what the agent reports.
Adblock Element Hiding Checkthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the element-hiding skill ZIP from the Front-End-Checklist page on this directory.
- 2Unzip the skill folder. Extract it so the element-hiding folder with SKILL.md and references/rule.md sits in ~/.claude/skills/ or a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there instead.
- 4Ask for the check in plain language. Describe the page and the concern, such as a missing cookie banner for users with blockers.
- 5Rename flagged elements. Replace matching names like .cookie-banner with specific, content-focused names such as .cookie-preferences.
- 6Test with uBlock Origin. Enable uBlock Origin, load the page and confirm that banners, notices and layouts still appear.
What does the element-hiding skill make the agent do?
When the skill is active, the agent reviews a page's HTML class names and IDs against patterns that ad blockers such as uBlock Origin, using EasyList rules, are known to hide. Names like .ad, .ads, .advertisement, .banner, .sponsor, #ad and #banner are on the list of commonly blocked names in the skill.
The agent explains why a real notice, such as a cookie consent banner or promo bar, could disappear for visitors with a blocker on. It then suggests more specific, content-focused names and recommends testing the page with uBlock Origin enabled to confirm what is hidden.
How do you install the element-hiding skill?
Download the ZIP for the skill from the Front-End-Checklist page on this directory. Unzip it so the skill folder sits in your personal skills folder at ~/.claude/skills/, or in a project's .claude/skills/ folder if you want it limited to one project.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills. The skill's files are references/rule.md and SKILL.md.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
~/.claude/skills/element-hiding/How do you trigger the skill with a natural request?
You do not need a special command. The skill's description is about reviewing a website for layout and functionality issues caused by adblocker rules, so ask the agent in those terms. Give it the page HTML or the project files, and say what you are worried about.
Good requests name the symptom or the element. For example, you might ask the agent to check whether a cookie banner could be hidden by ad blockers, or to review a homepage for promo sections that blockers might remove.
- Check whether our cookie consent banner could be hidden by ad blockers.
- Review this page's class names for anything uBlock Origin would hide.
- Visitors say the promo banner is missing with an ad blocker on. What class names might cause that?
What does a typical check look like?
The skill describes a three-part check. First, the agent reviews the HTML source for IDs and class names that match common adblocker patterns. Second, it suggests renaming affected elements to specific names that do not match those patterns. For cookie banners, its example moves from .cookie-banner to names such as .privacy-controls or .cookie-preferences.
Third, you test the page yourself. Turn on uBlock Origin, load the page in a browser, and look for missing content, broken layouts, or a consent banner that does not appear. The agent cannot see what a blocker hides on your live page unless you report it or provide that information.
What do you need before you start, and what are the safety notes?
The skill lists no required tools or packages. It does not run scripts and does not use the network, so it only works from the text you give it and its own reference file. Plan for about 15 minutes of work, based on the skill's time estimate.
The skill is meant to make legitimate content less likely to be hidden. It is not a way to block ads or to get past a site's protections. Its own Code Review section mentions server and header inspection, but the skill gives only generic guidance for that step, so do not rely on it for server configuration.
- No dependencies or required tools are listed
- No scripts are run and no network access is used
- Do not use it to evade blockers on other people's sites
What people use it for
- Checking that a cookie consent notice still shows for visitors with ad blockers on
- Reviewing a homepage's promo or notification bars before launch
- Investigating a visitor report of a missing banner or broken layout
- Renaming generic class names like .banner to clearer names tied to the content
Frequently asked questions
What is the element-hiding skill?
It is an agent skill that reviews a website's HTML class names and IDs for names that common ad blockers, using EasyList rules, are known to hide. It suggests safer, more specific names and recommends testing with uBlock Origin enabled.
How do I install the element-hiding agent skill?
Download the ZIP from the Front-End-Checklist page here and unzip it into ~/.claude/skills/ for personal use or a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the element-hiding skill need anything installed?
The skill lists no required dependencies. It does not run scripts and does not use the network, so no extra tools are needed beyond an agent that supports skills.
Is the element-hiding skill free to use?
The skill is published under the MIT licence. The source does not mention pricing, so check the repository for any terms beyond the licence.
Which class names does the skill say ad blockers hide?
The skill lists .ad, .ads, .advertisement, .banner, .sponsor, #ad, #ads and #banner as commonly blocked names. It also flags .cookie-notice and .consent in its check step.
Can the skill give a verified GDPR compliance audit?
No. The skill is a heuristic check, and its statistic about desktop users is stated without a source in the files. For a formal privacy or compliance audit, use a qualified reviewer and a dedicated tool.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or site owner who wants to make sure cookie notices and promo banners are not silently hidden by common ad blocker rules. Pick another approach if you need an authoritative privacy or GDPR audit, or if you want help with server and header configuration, since the skill offers only generic guidance there.
Download the skill