modal-drawer-system

Name: modal-drawer-system
Availability: InStock
Author: camilo8902

Implement accessible modals and drawers with focus trap, ESC close, and ARIA attributes.

Updated Jan 24, 2026

Search Tags:#accessibility #frontend #react #ui components #modal #drawer

Ready to run

npx skills add https://github.com/Camilo8902/GabyCosmetics --skill modal-drawer-system-camilo8902

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: modal-drawer-system
Source: https://github.com/Camilo8902/GabyCosmetics/tree/main/.claude/skills/modal-drawer-system
Command: npx skills add https://github.com/Camilo8902/GabyCosmetics --skill modal-drawer-system-camilo8902

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a robust system for creating accessible modal dialogs and drawer components, ensuring a seamless user experience across different devices and for users with disabilities.

Core Features & Use Cases

Accessible Modals & Drawers: Implements focus trapping, ESC key closing, scroll locking, and ARIA attributes for enhanced accessibility.
Flexible Rendering: Supports portal rendering for correct DOM hierarchy and includes animations for smooth transitions.
Use Case: When building a user interface that requires pop-up forms, confirmation dialogs, or slide-out side panels, this Skill ensures these elements are implemented correctly and accessibly.

Quick Start

Use the modal-drawer-system skill to create a modal with a title and description for user confirmation.

Frequently Asked Questions about modal-drawer-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build accessible modals and drawers in React?▼

Build accessible modals and drawers in React by implementing portal rendering for correct DOM hierarchy, focus trapping, scroll locking, and ARIA attributes to ensure keyboard and screen reader compatibility.

Why does my modal dialog lose focus or fail to close on ESC?▼

Modal dialogs lose focus or fail to close on ESC when they lack proper focus trapping and keyboard event handling. A robust modal system ensures focus remains inside the dialog and ESC triggers a safe close.

What's the best way to prevent background scrolling when a drawer is open?▼

Prevent background scrolling when a drawer is open by applying a scroll lock mechanism to the document body. This ensures the underlying page remains fixed while the slide-out panel is active.

Do I need portal rendering for React side panels and overlays?▼

You need portal rendering for React side panels and overlays to escape parent DOM stacking contexts. This ensures the modal or drawer renders at the top level, preventing z-index and styling conflicts.

Can I use this system for React confirmation dialogs and edit forms?▼

You can use this system for React confirmation dialogs and edit forms. It includes sample implementations for common use cases like user confirmations, detail views, and pop-up form submissions.

When do I need ARIA attributes for UI components like sidebars?▼

You need ARIA attributes for UI components like sidebars to expose their state to assistive technologies. Proper roles, labels, and properties ensure screen readers announce overlays and drawers correctly.