Guide · Agent skill
How to use the Focus Not Obscured Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The focus-not-obscured skill gives an AI agent a focused checklist for one accessibility problem: a keyboard user tabs to a control, but a sticky header, footer, cookie banner or chat launcher covers it. It is written for front-end developers, accessibility reviewers and teams adding consent banners or chat widgets to existing sites. After this guide you will know what the skill does, how to install it, how to ask for a review in plain language, and what its limits are.
Focus Not Obscured Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the focus-not-obscured skill ZIP from the page where you found it.
- 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Ask for a focus review. Describe the sticky header, banner or chat widget and mention the states and zoom or mobile layouts to check.
- 5Paste the relevant code. Share the CSS and markup for fixed or sticky elements so the agent can flag exact selectors.
- 6Verify by hand. Tab through the page with all overlays open to confirm each reported issue.
What are agent skills and what does this one do?
An agent skill is a folder containing a SKILL.md file and optional reference files. When it is installed, an agent such as Claude can read the instructions and follow them when a request matches the skill's description.
When this skill is installed, the agent reviews web pages and UI code for one specific 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.
The skill works from written guidance (SKILL.md and a reference rule page). It does not run code itself.
- Checks headers, footers, cookie banners, promo bars and chat launchers for focused elements that scroll underneath them
- Suggests scroll-padding or equivalent spacing, reduced overlay height, or changed focus and scroll behaviour
- Flags exact selectors, breakpoints or UI states where focused controls can be covered
How do you install the focus-not-obscured skill?
Download the ZIP for the skill from the page where you found it. Unzip it into one of two places, depending on how you want to use it.
For a personal setup available across your projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills
How do you trigger the skill with natural requests?
You do not need a special command. Describe the review you want in ordinary words that mention the kind of UI involved. The skill's description covers sticky navigation, consent banners, chat widgets, skip links and fixed-position UI, so requests about those are the ones most likely to use it.
Good requests name the component and the goal. Mention the states you want tested, such as a cookie banner being open or a narrow or zoomed layout.
- Review our sticky header for keyboard focus being hidden when tabbing.
- Check whether the cookie banner covers focused links on mobile.
- Does our chat widget hide focused buttons at 200% zoom?
- Look at this CSS for fixed-position elements that might obscure focus.
What should you expect from a review?
The agent audits keyboard focus with all sticky UI active. It looks for cases where the focused element scrolls underneath headers, footers, banners or launchers, and re-checks zoomed and mobile layouts, where overlap problems usually appear.
For fixes, the guidance favours spacing that keeps focused content clear of overlays. The rule page shows scroll-padding set on the html element to reserve room at the top and bottom, with sticky headers and fixed banners kept in place.
- Test with cookie banners, chat widgets and consent bars open
- Re-test at zoomed and mobile layouts
- Use scroll-padding or equivalent spacing when fixed headers or footers are present
html {
scroll-padding-top: 80px;
scroll-padding-bottom: 96px;
}What does the skill need, and what about scripts and network use?
The skill lists no requirements. It does not run scripts and does not use the network, so it only reads the instructions and files it ships with and the code or pages you give the agent.
Because it does not run code, the agent cannot test your site in a browser. Its findings come from reading your markup and CSS, so you still need to check focus behaviour by hand with a keyboard.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
What are the tips for getting useful results?
Give the agent the actual CSS, layout and component markup for the sticky or fixed elements. Name the breakpoints and UI states you care about, because the skill is asked to flag exact selectors and states.
Treat the output as a review aid. Confirm each finding by tabbing through the page with all overlays open, at realistic zoom levels.
- Paste the header, footer, banner and widget CSS together
- Say which states matter: banner open, chat expanded, mobile width
- Verify every reported issue with a real keyboard pass
What people use it for
- Reviewing a sticky site header to confirm focused links are not hidden when tabbing
- Checking whether a cookie consent banner covers buttons on narrow screens
- Auditing a chat launcher that sits over the page footer at zoomed layouts
- Suggesting scroll-padding values for a fixed-header site before release
Frequently asked questions
How do I install the focus-not-obscured skill?
Download the ZIP from the page where you found the skill and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
Does the focus-not-obscured skill require anything else to run?
The skill lists no requirements. It does not run scripts and does not use the network, so it works from its written guidance and the code or pages you provide.
Is the focus-not-obscured skill free to use?
The skill is published under the MIT licence. Check the licence file in the source repository for the full terms.
Does this skill test my website in a browser?
No. The skill does not run code itself, so its findings come from reading your markup and CSS. You still need to tab through the page manually with overlays open.
Is this skill enough for WCAG compliance certification?
No. The skill gives guidance and review for Focus Not Obscured, not a formal audit or certification. Manual keyboard testing is still needed.
Which projects is this skill useful for?
It is most useful for projects with sticky navigation or fixed-position UI, such as cookie banners and chat widgets. Projects with no fixed or sticky UI will rarely need it.
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 build or review sites with sticky headers, consent banners or chat widgets and want an agent to look for focused controls being hidden. Pick something else if your project has no fixed or sticky UI, or if you need a formal accessibility audit, since this skill gives guidance and review and still requires manual keyboard testing.
Download the skill