Skip to content
Get packs

Avoid Intrusive Interstitials

Reviews pop-ups, modals and overlays for SEO and accessibility problems and suggests fixes

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent checks CSS and JavaScript for modals, overlays, cookie banners, newsletter pop-ups and promotional dialogs. It flags full-screen overlays that appear on page load, hard-to-dismiss pop-ups on mobile, and dialogs that don't manage keyboard focus or Escape-key closing. It then suggests alternatives such as sticky banners, inline content, or properly built accessible dialogs.

Great for

  • Front-end developers reviewing a site's pop-ups or cookie banners before launch
  • Marketers or designers who want promotional overlays checked against Google's mobile guidance
  • Teams auditing for WCAG focus management and keyboard accessibility

Skip it if

  • Sites with no overlays or dialogs, since there is little to check (low value)
  • Legal compliance decisions: the skill gives general guidance and does not confirm what local law requires for cookie consent or age checks

Try asking

  • “Review my cookie banner CSS and JavaScript for accessibility problems”
  • “Check whether this newsletter pop-up will hurt my mobile search rankings”
  • “Audit my modal component for focus trapping and Escape key handling”
  • “Suggest a less intrusive alternative to this full-screen promo overlay”
Step-by-step guide: how to use Avoid Intrusive InterstitialsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    interstitials.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip interstitials.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip interstitials.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at the specific component files or stylesheets containing the overlay, so it can name exact selectors and breakpoints.
  • Mention whether the pop-up appears on mobile and when it triggers, since the review depends on those details.
  • Treat the output as a checklist. Confirm legal requirements (such as cookie consent) with a qualified professional.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.