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 the LobeHub modal system 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--9accbe