component-dialog
CommunityGenerate an accessible React Dialog fast
Authorshawn-sandy
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
tinycss2
Components
references
💻 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: component-dialog Download link: https://github.com/shawn-sandy/agentic-acss-plugins/archive/main.zip#component-dialog 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.