Agent skill · software engineering · lobehub
modal
Use for modals, dialogs and confirmations with createModal, confirmModal, ModalHost or base-ui modal APIs.
Why this skill is useful
Provides specific implementation patterns and API usage for creating modals with the LobeHub base-ui library that the AI wouldn't reliably generate on its own.
What it needs
Requires @lobehub/ui installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 81,352 stars on the source repository.
What this skill does
Modal Imperative API Guide Recommended: @lobehub/ui/base-ui New code should use the base-ui modal stack (headless primitives, not antd Modal): createModal, confirmModal, ModalHost from @lobehub/ui/base-ui useModalContext from @lobehub/ui/base-ui inside modal content Body slot: pass content (or children; runtime uses content ?? children). Global ModalHost (required) Base-ui createModal renders through a separate host from the root package. The app must mount ModalHost from @lobehub/ui/base-ui once near the root (e.g. next to other global hosts). Without it, createModal calls will not appear. If the project only mounts ModalHost from @lobehub/ui, add a second lazy ModalHost from @lobehub/ui/base-ui until all imperative modals are migrated. Why imperative? Mode Characteristics Recommended ----------- ------------------------------------ ----------- Declarative open state + <Modal /> ❌ Imperative Call createModal(), no local state ✅ File structure 1. Content (MyFeatureContent.tsx) 2. createModal (index.tsx) 3. Usage i18n Content: useTranslation in components. createModal options: import { t } from 'i18next' where hooks are unavailable. useModalContext Closing: which callback actually fires close() — from useModalContext() inside the content, or from the returned ModalInstance — only flips the stack entry to open: false. It does not go through base-ui's dismissal path, so: callback user dismissal (Esc / backdrop / header ✕) close() from content or instance ---------------------- ------------------------------------------ ---------------------------------- onOpenChange fires does not fire onOpenChangeComplete fires with false fires with false Put caller-side cleanup (clearing an editing flag, resetting the provider's open state) on onOpenChangeComplete. Wiring it to onOpenChange looks correct until a footer button closes the modal, and then the caller never learns it went away — typically leaving a flag set so the modal cannot be reopened. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills lobehub/modal