modal-drawer-system
CommunityAccessible modals & drawers
Authorzinohome
Version1.0.0
Installs0
System Documentation
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?".
Dependency Matrix
Required Modules
None requiredComponents
scripts
💻 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-drawer-system Download link: https://github.com/zinohome/CozyChat/archive/main.zip#modal-drawer-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.