Implement accessible modal and dialog patterns using the HTML dialog element, focus trapping, keyboard navigation, and ARIA attributes. [EXPLICIT] Trigger: "modal", "dialog", "popup", "focus trap", "overlay"
From jm-adknpx claudepluginhub javimontano/jm-adk-alfaThis skill is limited to using the following tools:
agents/guardian.mdagents/lead.mdagents/specialist.mdagents/support.mdevals/evals.jsonknowledge/body-of-knowledge.mdknowledge/knowledge-graph.mdprompts/meta.mdprompts/primary.mdprompts/variations/deep.mdprompts/variations/quick.mdtemplates/output.docx.mdtemplates/output.html"A modal should earn its interruption — not every message deserves to stop the world." — Unknown
Guides the implementation of accessible modal dialogs using the native <dialog> element with proper focus management, keyboard interaction, scroll locking, and ARIA semantics. Use when building confirmation dialogs, forms in overlays, lightboxes, or any content that requires user attention before proceeding. [EXPLICIT]
<dialog> element is viable or if a polyfill is neededshowModal()) and non-modal (show()) dialog behavioroverflow: hidden on body vs overscroll-behavior)<dialog> element with showModal() for modal behavioraria-labelledby (dialog title) and aria-describedby (dialog description)::backdrop pseudo-element for overlay dimming<dialog>) and optional backdrop clickaria-labelledby pointing to its heading<div> elements without role="dialog" and focus managementz-index wars instead of the native <dialog> top layeraccessibility-testing — modal dialogs are common a11y failure pointsnavigation-patterns — mobile navigation often uses dialog/drawer patternsExample invocations:
| Scenario | Handling |
|---|---|
| Empty or minimal input | Request clarification before proceeding |
| Conflicting requirements | Flag conflicts explicitly, propose resolution |
| Out-of-scope request | Redirect to appropriate skill or escalate |
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.