skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

modal

Implements imperative modal dialogs in LobeHub using base-ui createModal and confirmModal APIs.

74|11|Updated Jul 4, 2024
Search Tags:#react#modal#dialog#base-ui#lobehub#imperative api#confirm flow
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill modal-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/apps/qwk-in-lobe/.agents/skills/modal
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill modal-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working in the LobeHub codebase need consistent conventions for creating and migrating modals, dialogs, and confirm flows, especially when moving from legacy antd-style modals to the base-ui imperative modal stack. ## Core Features & Use Cases - Imperative Modal Creation: Guides the use of createModal, confirmModal, and useModalContext from @lobehub/ui/base-ui instead of declarative open-state patterns. - ModalHost Wiring: Explains the requirement to mount the base-ui ModalHost near the app root so imperative modals actually render. - Callback Semantics: Clarifies the difference between onOpenChange and onOpenChangeComplete so caller-side cleanup runs reliably when modals close. - Use Case: When adding a new settings dialog, follow the prescribed file structure (index.tsx exporting createXxxModal plus a content component) and wire i18n via useTranslation in content and t from i18next in modal options. ## Quick Start Ask the assistant to create a new imperative modal for a feature using the base-ui createModal pattern with a separate content component and proper ModalHost setup.

Frequently Asked Questions about modal

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

FAQPage Schema
How do I create an imperative modal in LobeHub with base-ui?▼

Call createModal from @lobehub/ui/base-ui with a content component, title, width, and options like maskClosable. Export a createXxxModal function from an index.tsx file and invoke it from a button handler without managing open state.

What is the difference between base-ui createModal and legacy @lobehub/ui createModal?▼

The base-ui createModal uses headless primitives with a content slot and semantic styles keys, while the legacy @lobehub/ui version is typed as antd Modal props with children and styles.body. New code should use base-ui.

Why does my createModal call not render anything?▼

Base-ui createModal renders through a separate ModalHost that must be mounted once near the app root. If only the root @lobehub/ui ModalHost is mounted, add a second lazy ModalHost from @lobehub/ui/base-ui.

Why does onOpenChange not fire when closing a modal programmatically?▼

Calling close() from useModalContext or the ModalInstance only flips the stack entry to open: false and bypasses base-ui's dismissal path, so onOpenChange never fires. Put caller-side cleanup on onOpenChangeComplete instead.

How do I add a confirmation dialog with base-ui?▼

Use confirmModal from @lobehub/ui/base-ui with title, content, okText, cancelText, and an async onOk callback. This replaces declarative confirm dialogs and requires no local open state.

Related Skills

Explore More Software Engineering Skills→
duwenjiduwenji

modal

Creates imperative modals with ModalHost for React/Next.js apps using @lobehub/ui/base-ui and i18next t.

Community
Intermediate
serverpodserverpod
8

riverpod-mutations

Manage UI-driven async operations in Riverpod with Mutation API states.

Official
Intermediate
udecodeudecode
434

toast

Render toast notifications with Sonner for success, error, and loading states.

Official
Basic
arayaromaarayaroma

a11y-focus-management

Implements accessible focus management for React modals and conditionally rendered UI.

Community
Basic