Mobile headlessui accessible overlay
A curated library of 124 AI agent skills organized into 10 categories, with model-specific versions for Claude, GPT-5.5, GPT-5.4 and earlier, GLM, and DeepSeek.
npx -y skills add mhrsdev/AI-Agent-Skills-Library --skill mobile-headlessui-accessible-overlayAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Use when building accessible mobile menus, dialogs, popovers, disclosure panels, focus management, keyboard behavior, and ARIA state inspired by Headless UI.
SKILL.md
1.4 KB, as published. Nobody here has run it
Mobile Headless UI Accessible Overlay
Use this skill for accessible mobile menus, popovers, dialogs, and disclosure panels inspired by tailwindlabs/headlessui.
Primary source:
Focus areas:
- Semantic menu, dialog, popover, and disclosure behavior.
- ARIA state synchronization.
- Focus trap and focus restore.
- Escape key and outside click behavior.
- Touch-first interaction without losing keyboard support.
Checklist:
- Use native interactive elements before custom roles.
- Set
aria-expandedon disclosure/menu buttons. - Link controls to panels with
aria-controlswhere useful. - Move focus into modal dialogs and restore focus on close.
- Provide escape, backdrop/outside click, and navigation close paths.
- Ensure tap targets are large enough and do not depend on hover.
Common fixes:
- If a mobile menu opens visually but screen readers do not understand it, repair button semantics and state.
- If keyboard focus remains behind a dialog, add focus management.
- If outside click fails on touch devices, handle pointer events consistently.