Modal

This teaches Claude the LobeHub modal conventions, specifically pushing you toward the imperative base-ui API (createModal, confirmModal) instead of declarative open state patterns. It covers the required ModalHost mounting, the Content plus index.tsx file split, when to use the content prop versus children, and how to handle i18n inside createModal calls where hooks aren't available. The big gotcha is that base-ui modals render through a separate ModalHost from the legacy root package, so you need both mounted during migration or nothing shows up. Useful if you're working in a LobeHub codebase and need to know whether to reach for @lobehub/ui or @lobehub/ui/base-ui when opening dialogs.

skills.sh installs: 1.3K
GitHub stars: 79.8K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add lobehub/lobe-chat --skill modal --agent claude-code

Installs into .claude/skills of the current project.

Files

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.