shadcn-syntax-dialog

What problem does it solve?

shadcn Dialog patterns fail in predictable ways (frozen dialogs, missing accessible titles, portal/z-index bugs, and form-submit close timing), leaving users with broken UX or critical accessibility issues.

Core Features & Use Cases

• Controlled vs uncontrolled correctness: Ensures you always pair open with onOpenChange, or use defaultOpen for one-shot dialogs.
• Accessible DialogTitle enforcement: Prevents critical a11y failures by requiring DialogTitle (including sr-only patterns) and optionally aria-describedby={undefined} when you omit DialogDescription.
• Portal and stacking-context safety: Keeps dialog overlay/content rendering above the app chrome by relying on <DialogContent>’s internal DialogPortal (or using DialogPortal container only when truly needed).
• Safe closing behavior with forms: Guides you to close only after successful submit (so validation errors keep the dialog open).
• Robust Slot/asChild usage: Avoids DialogClose asChild multi-child and ref/prop swallowing issues by requiring a single proper focusable child.

Quick Start

Use the shadcn-syntax-dialog skill to implement a controlled Dialog with DialogTitle, correct portal rendering via DialogContent, and a form-submit handler that closes the dialog only after successful validation.