skills.rest
PeakTai
PeakTaiCOMMUNITY
Explore all skills by this author →
GitHub

wok-ui-modal

Implement wok-ui modal dialogs with lifecycle callbacks and custom content.

Updated Sep 14, 2023
Search Tags:#typescript#ui#frontend#modal#dialog#wok-ui
One-click install
npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-modal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wok-ui-modal
Source: https://github.com/PeakTai/wok-ui/tree/main/skills/wok-ui-modal
Command: npx skills add https://github.com/PeakTai/wok-ui --skill wok-ui-modal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Wok-ui modal UI provides a cohesive, reusable way to display dialogs with consistent styling and behavior across an application, reducing boilerplate and design drift.

Core Features & Use Cases

  • Show basic, fullscreen, centered, or static-backdrop modals using wok-ui's showModal API.
  • Support custom headers, footers, and fully custom content, including embedded forms or complex layouts.
  • Manage modal lifecycle with onClose, onShown, and onConfirm callbacks, and easily close via modal.close() or closeAllModals().

Quick Start

Import showModal from wok-ui and start by displaying a basic modal with a title and body.

Frequently Asked Questions about wok-ui-modal

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

FAQPage Schema
How do I create a TypeScript modal dialog with custom headers and footers?▼

You can create a TypeScript modal dialog with custom headers and footers by passing title, body, footer, and buttons options to the wok-ui showModal API. This provides type-safe configuration and consistent styling for your frontend application.

What's the best way to manage modal lifecycle callbacks in a TypeScript frontend?▼

The best way to manage modal lifecycle callbacks in a TypeScript frontend is using wok-ui's onClose, onShown, and onConfirm options. These type-safe callbacks ensure clear lifecycle management, allowing you to execute logic when the dialog appears, confirms, or closes.

Can I display a fullscreen and centered modal dialog using wok-ui?▼

Yes, you can display a fullscreen and centered modal dialog using wok-ui. The showModal API supports both fullscreen and dialogCentered options, allowing you to control the display mode and positioning of your dialog window across typical frontend apps.

Does wok-ui support embedding forms inside a modal dialog?▼

Yes, wok-ui supports embedding forms inside a modal dialog. The showModal API provides a replaceByBody option for fully custom content, enabling you to embed complex layouts and forms directly within the modal for cohesive user interaction.

How do I close all open modals at once in a TypeScript application?▼

To close all open modals at once in a TypeScript application, call the closeAllModals() function provided by wok-ui. Alternatively, you can use the modal.close() method on a specific instance to dismiss a single dialog window programmatically.

Related Skills

Explore More Software Engineering Skills→
PeakTaiPeakTai

wok-ui-getting-started

Guide wok-ui project creation, installation, and routing with npm.

Community
Intermediate
albanistrefialbanistrefi
4

umbraco-notifications

Emit Umbraco backoffice toast notifications via UMB_NOTIFICATION_CONTEXT.

Community
Basic
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-shadcn

Compose accessible React UI primitives with shadcn/ui and Radix UI.

Community
Advanced
TechsioCZTechsioCZ
2

dialog-usage

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

Official
Intermediate