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.
Security Assessment
About modal
modal is an internal convention/guidance skill for the LobeHub codebase that documents how to build and migrate modals, dialogs, popups, and confirm flows using an imperative API. It solves the problem of scattered, inconsistent modal implementations by prescribing a single recommended stack and pattern, steering new code away from declarative open-state modals toward imperative calls that carry no local state.
The SKILL.md recommends the base-ui modal primitives from @lobehub/ui/base-ui, createModal, confirmModal, ModalHost, and the useModalContext hook, and explains that a global base-ui ModalHost must be mounted near the app root or imperative modals will not render. It lays out a feature file structure (an index.tsx exporting a createXxxModal factory plus a content component), shows content and factory examples, covers i18n via useTranslation in components and the i18next t function in options, documents common base-ui options (title, width, maskClosable, styles/classNames slots), and contrasts this with the legacy @lobehub/ui createModal typed as antd Modal props, pointing to concrete example files for migration.
It targets LobeHub frontend contributors working in React/TypeScript who are creating new modals or migrating legacy ones. It is a coding-convention document with example snippets only, marked user-invocable: false so it activates as background guidance rather than a user-facing command; it carries no shell, network, or credential behavior.
FAQ
Which modal API should new code use?
The base-ui stack from @lobehub/ui/base-ui (createModal, confirmModal, ModalHost, useModalContext), using imperative calls rather than declarative open-state modals.
Why aren't my createModal calls appearing?
Base-ui createModal renders through a separate host, so you must mount ModalHost from @lobehub/ui/base-ui once near the app root; without it the modals will not show.
How is this different from the legacy API?
The legacy createModal from @lobehub/ui is typed as antd Modal props (children, styles.body, etc.), while the base-ui version uses headless primitives with a 'content' slot and semantic styles/classNames keys. New work should prefer base-ui.
How is internationalization handled?
Use the useTranslation hook inside content components, and import the t function from i18next for createModal options where hooks are unavailable.
Is this skill user-invocable?
No. It is marked user-invocable: false, so it serves as background convention guidance for contributors rather than a directly invoked command.
Install modal
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
lobehub/lobehub