Skip to content
Get packs

Focus Not Obscured Checker

Checks that focused controls aren't hidden behind sticky headers, banners or chat widgets

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

What it does

When installed, the agent reviews web pages and UI code for a specific accessibility problem: a keyboard user tabs to a button or link, but a sticky header, footer, cookie banner or chat launcher covers it. The agent checks tab order and viewport behaviour at realistic zoom levels, and suggests fixes such as scroll-padding, shorter overlays, or changed focus behaviour. It works from written guidance (SKILL.md and a reference rule page) and does not run code itself.

Great for

  • Front-end developers reviewing sticky navigation or fixed-position UI
  • Accessibility reviewers checking WCAG Focus Not Obscured compliance
  • Teams adding cookie consent banners or chat widgets to existing sites

Skip it if

  • Projects with no fixed or sticky UI, where the rule rarely applies
  • Automated compliance certification: the skill gives guidance and review, not a formal audit, and manual keyboard testing is still needed

Try asking

  • “Review this sticky header CSS and tell me if keyboard focus can get hidden under it”
  • “Check our cookie banner and chat widget for focused elements being covered when tabbing”
  • “Suggest scroll-padding values so focused links aren't hidden behind our fixed footer”
Step-by-step guide: how to use Focus Not Obscured CheckerInstall, 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.

    focus-not-obscured.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip focus-not-obscured.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip focus-not-obscured.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

  • Give the agent the actual CSS, layout code or a URL description so it can name exact selectors and breakpoints.
  • Ask it to test with cookie banners and chat widgets open, and at high zoom or mobile widths, where overlaps usually appear.
  • Confirm findings by tabbing through the page yourself in a browser, since the skill's guidance is advisory.

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.