skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

dialog-usage

Implement accessible dialogs with UI Kit and Zag.js in React apps.

2|Updated Dec 2, 2024
Search Tags:#accessibility#react#modal#dialog#ui-kit#drawer#zagjs
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill dialog-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dialog-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/dialog-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill dialog-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a concise guide for implementing accessible dialogs and drawers using @techsio/ui-kit Dialog with Zag.js in React applications.

Core Features & Use Cases

  • Accessible modal overlays and drawers with proper focus management.
  • Reusable Dialog component with configurable placement, size, and behavior.
  • Guidance on token usage and safe integration with the UI kit.

Quick Start

Invoke the Dialog component in your React app with a title, description, and actions to render a focused dialog.

Frequently Asked Questions about dialog-usage

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

FAQPage Schema
How do I build accessible dialogs and drawers in React?▼

To build accessible dialogs in React, use the UI Kit Dialog component integrated with Zag.js to manage focus and overlays. This implementation provides a reusable component with configurable placement and behavior for modals and drawers.

How does Zag.js handle focus management for modal overlays?▼

Zag.js handles focus management for modal overlays by integrating with the UI Kit to trap focus within the dialog. This mechanism ensures accessible interactions by managing focus shifts correctly when the dialog opens and closes.

Can I use the UI Kit Dialog component for both modals and drawers?▼

Yes, you can use the UI Kit Dialog component for both modals and drawers. It supports configurable placement, size, and behavior, allowing you to adapt the overlay pattern to various complex UI scenarios.

What is the best way to configure a React dialog with UI Kit tokens?▼

The best way to configure a React dialog is by applying UI Kit tokens within the Dialog component setup. This approach ensures safe integration and consistent styling while leveraging Zag.js for the underlying accessibility logic.

Why does my React modal dialog fail to manage focus correctly?▼

Your React modal dialog may fail to manage focus if it lacks proper Zag.js integration for accessibility. Implementing the UI Kit Dialog ensures focus is trapped and restored correctly according to standard accessibility guidelines.

Related Skills

Explore More Software Engineering Skills→
yeeehaoooyeeehaooo

web-artifacts-builder

Bundle React projects into single HTML artifacts for Claude.

Community
Advanced
emaginebremaginebr
1

react-modal

Create modal dialogs in React using the react-bootstrap Modal component.

Official
Basic
alfadocsalfadocs

alfadocs-design-review

Audit AlfaDocs app screens for @alfadocs/ui-kit design-system compliance.

Official
Advanced
Community-AccessCommunity-Access
387

Modal Specialist

Ensure web application modals meet WCAG AA accessibility standards.

Official
Advanced