modal
LobeHub imperative modal conventions. Use when creating or migrating modals, dialogs, popups, confirm flows, ModalHost wiring, createModal, confirmModal, useModalContext, or base-ui modal APIs.
Profile →npx skills add lobehub/lobehub --skill modal --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 ``` features/ └── MyFeatureModal/ ├── index.tsx # export createXxxModal └── MyFeatureContent.tsx # modal body ``` ### 1. Co
- Recommended: @lobehub/ui/base-ui
- Global ModalHost (required)
- Why imperative?
- File structure
- 1. Content (MyFeatureContent.tsx)
- 2. createModal (index.tsx)
- 3. Usage
- i18n
- useModalContext
- Common options (base-ui)
- Confirm
- Legacy: @lobehub/ui (root)
- Examples
What does the modal skill do?
LobeHub imperative modal conventions. Use when creating or migrating modals, dialogs, popups, confirm flows, ModalHost wiring, createModal, confirmModal, useModalContext, or base-ui modal APIs.
How do I install it?
Run `npx skills add lobehub/lobehub --skill modal --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.