Focus Not Obscured Checker
Checks that focused controls aren't hidden behind sticky headers, banners or chat widgets
- 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”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
focus-not-obscured.zip - 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
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.