skills.rest
SmallAi-API
SmallAi-APICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

modal

Implements imperative modals and confirmations using createModal and ModalHost from @lobehub/ui/base-ui.

Updated Jan 27, 2026
Search Tags:#frontend#react#modal#dialog#base-ui#createmodal#confirmmodal
One-click install
npx skills add https://github.com/SmallAi-API/smaihub --skill modal-smallai-api
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal
Source: https://github.com/SmallAi-API/smaihub/tree/main/.agents/skills/modal
Command: npx skills add https://github.com/SmallAi-API/smaihub --skill modal-smallai-api

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @lobehub/ui, react-i18next, i18next.

What problem does it solve? Declarative modal patterns require managing local open state for every dialog, which adds boilerplate and bugs. This Skill guides you to build imperative modals with createModal and confirmModal from @lobehub/ui/base-ui, so dialogs open with a single function call and no local state. ## Core Features & Use Cases - Imperative Modal Creation: Define a content component plus a createXxxModal factory using createModal, with options like title, width, maskClosable, and semantic styles. - Confirmation Dialogs: Use confirmModal with okText, cancelText, and async onOk handlers for destructive or confirmation flows. - Correct Close Handling: Learn why cleanup callbacks must attach to onOpenChangeComplete instead of onOpenChange, since close() from useModalContext bypasses base-ui's dismissal path. - Use Case: You need a settings dialog in a React feature folder. Create MyFeatureContent.tsx with useModalContext for closing, export createMyFeatureModal from index.tsx, mount the base-ui ModalHost once at the app root, and trigger the modal from a button onClick. ## Quick Start Ask the AI to create an imperative base-ui modal for a feature using createModal with a separate content component and confirm the ModalHost is mounted.

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 React without local state?▼

Use createModal from @lobehub/ui/base-ui with a content component, title, width, and maskClosable options. Calling the generated function opens the modal through a globally mounted ModalHost, so no open state or <Modal /> JSX is needed.

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

The root @lobehub/ui createModal is typed as antd Modal props with children and styles.body, while @lobehub/ui/base-ui provides headless primitives using content and semantic style keys. New code should use base-ui and mount its separate ModalHost.

Why does my createModal dialog not appear on screen?▼

Base-ui createModal renders through its own ModalHost, which must be mounted once near the app root. If the project only mounts ModalHost from @lobehub/ui, add a second lazy ModalHost from @lobehub/ui/base-ui.

Why is onOpenChange not firing when the modal closes?▼

Calling close() from useModalContext or the ModalInstance only flips open to false and skips base-ui's dismissal path, so onOpenChange never fires. Put caller-side cleanup on onOpenChangeComplete, which fires for both user dismissal and programmatic close.

How do I add a confirmation dialog with async OK handling?▼

Use confirmModal from @lobehub/ui/base-ui with title, content, okText, cancelText, and an async onOk callback. This covers destructive-action confirmations without building a custom modal component.

Related Skills

Explore More Software Engineering Skills→
xkl2013xkl2013

i18n

Integrate react-i18next to add locale keys and generate translations.

Community
Intermediate
betterbrandbetterbrand

add-dialog-component

Create Radix UI dialog components with forms and tRPC mutations.

Community
Intermediate
ancolemanancoleman
503

providing-feedback

Implement toasts, alerts, modals, and progress indicators in frontend applications.

Community
Intermediate
OpenSourceAGIOpenSourceAGI
74

modal

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

Official
Intermediate