skills.rest
majesticlabs-dev
majesticlabs-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dialog-patterns

Create accessible native dialog UIs for Rails with Turbo Frames and Stimulus.

47|11|Updated Nov 26, 2025
Search Tags:#accessibility#turbo#rails#dialog#stimulus
One-click install
npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill dialog-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dialog-patterns
Source: https://github.com/majesticlabs-dev/majestic-marketplace/tree/main/plugins/majestic-rails/skills/dialog-patterns
Command: npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill dialog-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides native HTML dialog patterns for Rails apps, enabling accessible modals, confirmations, alerts, and toasts without heavy JS frameworks.

Core Features & Use Cases

  • Zero-JS Confirmations: Declarative dialogs with Invoker Commands where supported.
  • Async Modals with Turbo Frames: Integrated modal flows using Turbo Frames.
  • Accessible Dialogs: Focus management and ARIA considerations baked in.

Quick Start

Implement a simple Delete confirmation using a native dialog with turbo-frame and a Stimulus controller.

Frequently Asked Questions about dialog-patterns

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

FAQPage Schema
How do I build accessible modal dialogs in Rails without a heavy JavaScript framework?▼

Native dialog patterns in Rails use the HTML <dialog> element with Turbo Frames and Stimulus controllers to create accessible modals. This approach handles focus trapping, ARIA roles, ESC key handling, and backdrop clicks natively, eliminating the need for external dialog libraries while maintaining full accessibility compliance.

Can I use native HTML dialogs with Turbo and Stimulus in Rails?▼

Yes. Native dialogs integrate seamlessly with Turbo Frames for async modal flows and Stimulus for lifecycle management. Turbo Frames load dialog content dynamically, while Stimulus controllers manage focus, keyboard events, and dialog state transitions declaratively.

How do I implement confirmations and alerts as native dialogs in Rails?▼

Build confirmation dialogs using the native <dialog> element with Turbo Frames for form submissions and Stimulus controllers to handle user responses. Invoker Commands enable zero-JavaScript confirmations where supported, reducing boilerplate while preserving accessibility semantics.

What accessibility features does the native dialog element provide for Rails modals?▼

The native <dialog> element provides automatic focus management, backdrop inertness, ESC key handling, and ARIA dialog semantics. Paired with Stimulus controllers for focus trapping and role configuration, it satisfies WCAG requirements without manual accessibility patches.

Does the native dialog element support multi-step interactions and form workflows?▼

Yes. Turbo Frames enable dynamic form loading into dialogs, and Stimulus controllers manage state transitions across steps. The native dialog semantics remain intact through multi-step interactions, supporting complex workflows like confirmations followed by secondary forms.

Related Skills

Explore More Software Engineering Skills→
newstlernewstler
20

hotwire-patterns

Apply Turbo and Stimulus patterns to Rails CRUD views for interactive interfaces.

Community
Intermediate
ShoebtamboliShoebtamboli
14

rails-hotwire

Build reactive Rails 7+ interfaces using Turbo and Stimulus.

Community
Intermediate
rubakasrubakas
4

rails-javascript

Integrate Stimulus, Turbo, and Importmap into Rails 8 frontend patterns.

Official
Intermediate
landim32landim32
1

react-modal

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

Community
Intermediate