component-dialog

Generate accessible React Dialog components with TypeScript and SCSS templates.

Updated Apr 21, 2026

Search Tags:#typescript #accessibility #react #scss #dialog #ui-generation #fpkit

Ready to run

npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-dialog

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-dialog
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/component-dialog
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-dialog

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tinycss2, and includes references (resource) components.

What problem does it solve?

It helps you scaffold an accessible modal Dialog component (with focus trapping, correct ARIA behavior, and safe close behavior) without manually wiring UI, accessibility attributes, or styles.

Core Features & Use Cases

Accessible modal behavior with native <dialog>: uses showModal() for focus trapping, Escape-to-close, and return-focus-on-close.
Header/body/footer composition: supports title/description plus optional footer actions for confirm/cancel flows.
Dependency-aware generation: ensures the Button component exists first so the close button and footer actions compile cleanly.

Quick Start

Use the component-dialog skill to generate an fpkit-style Dialog by describing the title, whether it should be modal, the trigger element, the body content, and the footer actions (confirm/cancel) you want.

Frequently Asked Questions about component-dialog

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

FAQPage Schema

How do I create an accessible React dialog component with TypeScript?▼

Generate an accessible React dialog component using TypeScript by scaffolding dialog.tsx and dialog.module.scss files with native showModal() behavior, focus trapping, ARIA attributes, and safe close functionality without manual wiring.

How do I add focus trapping and screen reader support to a React modal?▼

Add focus trapping and screen reader support to a React modal by using the native <dialog> element's showModal() method, which automatically handles focus management, return-focus-on-close, and ARIA behavior for accessibility compliance.

Does this dialog generator require a Button component to exist first?▼

Yes, the dialog generator is dependency-aware and verifies that a Button component exists before generating files, ensuring the close button and footer confirm/cancel actions compile cleanly without missing references.

Can I generate React modal confirmation flows with header, body, and footer composition?▼

Yes, you can generate React modal confirmation flows with header, body, and footer composition by specifying the title, description, body content, and optional footer actions for confirm and cancel buttons during the component generation process.

Why use the native <dialog> element instead of a div-based React modal?▼

The native <dialog> element provides built-in focus trapping, Escape-to-close behavior, and return-focus-on-close out of the box, eliminating the need to manually wire accessibility attributes and keyboard event handlers in your React modal component.

How do I scaffold a React dialog component with SCSS styles?▼

Scaffold a React dialog component with SCSS styles by generating dialog.tsx and dialog.module.scss files using predefined templates, which also initializes ui.tsx when missing and verifies integration through detect_target and verify_integration scripts.