dialogs

Implement accessible modal, sheet, and alert dialogs with shadcn/ui and Tailwind CSS.

1|Updated Jul 15, 2026

Search Tags:#accessibility #frontend #modals #dialogs #shadcn #ui-components

Ready to run

npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill dialogs-dzakiamriz22

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dialogs
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/dialogs
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill dialogs-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the complexity of implementing accessible, keyboard-navigable, and animated modal interfaces, ensuring consistent user experience across your application.

Core Features & Use Cases

Multi-Pattern Support: Provides standardized implementations for centered modals, slide-in sheets, and destructive confirmation alerts.
Accessibility First: Automatically manages focus trapping, ARIA attributes, and keyboard event handling for screen readers and power users.
Use Case: Quickly generate a complex multi-step form modal or a slide-out settings panel that adheres to WCAG 2.1 AA standards without writing boilerplate focus-management code.

Quick Start

Use the dialogs skill to generate a centered modal for editing user profile information.

Frequently Asked Questions about dialogs

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

FAQPage Schema

How do I build accessible modals with shadcn/ui that trap focus and handle keyboard navigation?▼

Build accessible modals with shadcn/ui by implementing automated focus trapping, ARIA attributes, and keyboard event handling to ensure WCAG 2.1 compliance for screen readers and keyboard users.

What's the best way to create a slide-in settings panel using Tailwind CSS?▼

Create a slide-in settings panel using Tailwind CSS by implementing the sheet pattern, which provides a standardized, animated, and keyboard-navigable UI component for side-panel interfaces.

How do I implement a destructive confirmation alert dialog that meets WCAG 2.1 AA standards?▼

Implement a destructive confirmation alert dialog meeting WCAG 2.1 AA standards by using semantic HTML structure and automated focus management to ensure accessible destructive action confirmations.

Does this dialogs skill support multi-step form modals without writing custom focus-management code?▼

Yes, the dialogs skill supports multi-step form modals by automatically managing focus trapping and semantic HTML structure, eliminating the need to write custom focus-management boilerplate.

Can I use these dialog patterns for both centered modals and destructive actions in the same application?▼

Yes, you can use these dialog patterns for both centered modals and destructive actions, as the skill provides multi-pattern support for modals, sheets, and alert dialogs within a single application.