skills.rest
zinohome
zinohomeCOMMUNITY
Explore all skills by this author →
GitHub

modal-drawer-system

Generate accessible modal dialogs and drawers with focus trapping and ARIA attributes.

1|Updated Nov 6, 2025
Search Tags:#accessibility#react#frontend development#ui components#modal#drawer
One-click install
npx skills add https://github.com/zinohome/CozyChat --skill modal-drawer-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal-drawer-system
Source: https://github.com/zinohome/CozyChat/tree/main/.claude/skills/modal-drawer-system
Command: npx skills add https://github.com/zinohome/CozyChat --skill modal-drawer-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a robust system for creating accessible and user-friendly modal dialogs and drawers, enhancing user interfaces with interactive overlays.

Core Features & Use Cases

  • Accessible Components: Implements modals and drawers with focus trapping, ESC key dismissal, scroll locking, and ARIA attributes for screen reader compatibility.
  • Flexible Rendering: Utilizes portal rendering to ensure components are outside the normal DOM hierarchy, preventing styling conflicts.
  • Use Case: When you need to display a confirmation message, an edit form, or detailed information without navigating away from the current page, use this Skill to generate a polished and accessible overlay.

Quick Start

Use the modal-drawer-system skill to create a confirmation dialog with the title "Confirm Action" and description "Are you sure you want to proceed?".

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 in React with focus trapping and ARIA attributes?▼

Focus trapping in modals restricts keyboard navigation to overlay elements, preventing users from tabbing to hidden background content. This mechanism requires scroll locking and ARIA attributes to ensure screen reader compatibility and proper user interaction.

How do I create a React drawer component that prevents styling conflicts?▼

ESC key dismissal provides an expected keyboard shortcut to close modals and drawers without requiring mouse interaction. Combined with scroll locking, it ensures background content remains static while users interact with the overlay component.

Does this modal system support React portal rendering for detail views?▼

Yes, the modal system supports React portal rendering to display detail views outside the normal DOM hierarchy. This approach prevents styling conflicts and ensures components render correctly without navigating away from the current page.

What is the best way to generate confirmation dialogs in React frontend development?▼

The best way to generate confirmation dialogs in React frontend development is using a component system with built-in accessibility features. This includes focus trapping, ESC key dismissal, scroll locking, and ARIA attributes for screen reader compatibility.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

modal-drawer-system

Create accessible React TypeScript modal and drawer components with focus trapping and ARIA attributes.

Community
Advanced
landim32landim32
1

react-modal

Standardize React modal dialogs with a reusable Radix UI Dialog wrapper.

Community
Intermediate
mauriciodelriomauriciodelrio
3

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

Community
Intermediate
yonatangrossyonatangross
217

interaction-patterns

Codify UI interaction patterns for accessible frontend components.

Community
Intermediate