Skills
.Work. You
Rest

modal-toast-dialog-stinger

Official

Build accessible React overlays with confidence

Software Engineering#accessibility#react#modal#dialog#radix#overlay#toast
Authorlegioncodeinc
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill solves the complexity of designing accessible React overlays by providing consistent guidance for selecting primitives, handling focus behavior, and avoiding common modal and notification UX failures.

Core Features & Use Cases

  • Overlay Primitive Selection: Choose the right implementation pattern for dialogs, alert dialogs, drawers, toasts, and command palettes using established React libraries.
  • Accessibility Auditing: Apply the accessible-modal contract covering focus traps, keyboard behavior, ARIA attributes, scroll locking, and focus restoration.
  • Use Case: Review a React application's overlay system to identify accessibility issues, select better primitives, and standardize modal, toast, and drawer behavior.

Quick Start

Ask the skill to audit my React overlays and recommend accessible primitives and fixes for any focus, ARIA, or stacking issues.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: modal-toast-dialog-stinger
Download link: https://github.com/legioncodeinc/that-git-life/archive/main.zip#modal-toast-dialog-stinger

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 545,000+ vetted skills library on demand.