How do I install the Modal skill?

Run npx skillmds@latest add bytesagain/modal in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Modal safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Modal?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Modal free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

bytesagain (@bytesagain) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Modal by bytesagain — Agent Skill

Name: Modal
Rating: 4.5 (4 reviews)
Author: bytesagain

File contents

Modal — Modal Dialog Reference

Quick-reference skill for modal dialogs — HTML dialog element, accessibility, focus management, and UI patterns.

When to Use

Building accessible modal dialogs for web applications
Using the native HTML <dialog> element
Implementing focus trapping and keyboard navigation
Understanding modal vs non-modal (modeless) dialogs
Handling backdrop clicks, escape key, and scroll locking

Commands

`intro`

scripts/script.sh intro

What modals are, modal vs modeless, when to use (and not use) modals.

`html`

scripts/script.sh html

HTML <dialog> element — showModal, show, close, returnValue, forms.

`accessibility`

scripts/script.sh accessibility

Modal accessibility — ARIA roles, focus trap, keyboard nav, screen readers.

`focus`

scripts/script.sh focus

Focus management — trapping, restoring, tab order, inert attribute.

`css`

scripts/script.sh css

Modal styling — backdrop, animations, responsive, scroll lock.

`patterns`

scripts/script.sh patterns

Modal UI patterns — confirmation, form, wizard, lightbox, alert.

`frameworks`

scripts/script.sh frameworks

Modal components in React, Vue, Angular — portals, composition, state.

`antipatterns`

scripts/script.sh antipatterns

Modal anti-patterns: modal hell, breaking back button, scroll jank.

`help`

scripts/script.sh help

`version`

scripts/script.sh version

Powered by BytesAgain | bytesagain.com | hello@bytesagain.com

---name: modaldescription: Modal dialog reference — accessible, performant modal windows for web and mobile. Use when building modal dialogs, understanding focus trapping, backdrop behavior, or implementing the HTML dialog element.--- # Modal — Modal Dialog Reference Quick-reference skill for modal dialogs — HTML dialog element, accessibility, focus management, and UI patterns. ## When to Use - Building accessible modal dialogs for web applications - Using the native HTML `<dialog>` element - Implementing focus trapping and keyboard navigation - Understanding modal vs non-modal (modeless) dialogs - Handling backdrop clicks, escape key, and scroll locking ## Commands ### `intro` ```bash scripts/script.sh intro ``` What modals are, modal vs modeless, when to use (and not use) modals. ### `html` ```bash scripts/script.sh html ``` HTML `<dialog>` element — showModal, show, close, returnValue, forms. ### `accessibility` ```bash scripts/script.sh accessibility ``` Modal accessibility — ARIA roles, focus trap, keyboard nav, screen readers. ### `focus` ```bash scripts/script.sh focus ``` Focus management — trapping, restoring, tab order, inert attribute. ### `css` ```bash scripts/script.sh css ``` Modal styling — backdrop, animations, responsive, scroll lock. ### `patterns` ```bash scripts/script.sh patterns ``` Modal UI patterns — confirmation, form, wizard, lightbox, alert. ### `frameworks` ```bash scripts/script.sh frameworks ``` Modal components in React, Vue, Angular — portals, composition, state. ### `antipatterns` ```bash scripts/script.sh antipatterns ``` Modal anti-patterns: modal hell, breaking back button, scroll jank. ### `help` ```bash scripts/script.sh help ``` ### `version` ```bash scripts/script.sh version ``` --- *Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*

Frequently asked questions

Modal

File contents

Modal — Modal Dialog Reference

When to Use

Commands

intro

html

accessibility

focus

css

patterns

frameworks

antipatterns

help

version

Related skills