skills.rest
duwenji
duwenjiCOMMUNITY
Explore all skills by this author →
GitHub

modal

Creates imperative modals with ModalHost for React/Next.js apps using @lobehub/ui/base-ui and i18next t.

1|Updated May 9, 2026
Search Tags:#react#i18n#modal#lobehub#ui migration#imperative api#modalhost
One-click install
npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill modal-duwenji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal
Source: https://github.com/duwenji/generative-ai-oss-tutorials/tree/main/sandbox/lobe-chat/.agents/skills/modal
Command: npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill modal-duwenji

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents modal implementation bugs and UI inconsistency by guiding you to use LobeHub’s imperative modal conventions instead of mixing incompatible patterns.

Core Features & Use Cases

  • Imperative modal API: Use createModal, confirmModal, and useModalContext for predictable opening, content rendering, and dismissal.
  • Correct ModalHost mounting: Ensure the ModalHost from @lobehub/ui/base-ui is mounted so imperative modals actually appear.
  • Migration guidance: Move from legacy @lobehub/ui (antd Modal-style props) and declarative <Modal open> patterns to the base-ui modal stack.
  • i18n-safe implementation: Use t from i18next for createModal() options and useTranslation inside modal content.

Quick Start

Ask the AI to show you how to implement an imperative dialog using createModal with a required ModalHost and i18n title, and include the recommended index.tsx plus Content file structure.

Frequently Asked Questions about modal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an imperative modal in a React application using LobeHub UI?▼

To create an imperative modal in a React application, use the createModal and confirmModal APIs from LobeHub. You must mount the global ModalHost component from @lobehub/ui/base-ui to ensure the dialogs render and appear correctly on screen.

What is the best way to migrate declarative open-state modals to an imperative API?▼

The best way to migrate declarative open-state modals is to replace the legacy antd-style <Modal open> pattern with the base-ui modal stack. Use createModal for predictable opening and useModalContext for dismissal and content rendering inside the component.

Why does my imperative modal not appear on the screen in Next.js?▼

Your imperative modal might not appear because the ModalHost from @lobehub/ui/base-ui is not mounted globally. This host component is a required prerequisite to manage and render the modal stack correctly within your React or Next.js application.

How do I integrate i18n translations inside a modal component using i18next?▼

To integrate i18n translations inside a modal component, pass the t function from i18next directly into the createModal options for titles, and call the useTranslation hook inside the modal content layout for dynamic text rendering.

Does LobeHub base-ui support replacing antd Modal-style props for UI migration?▼

Yes, LobeHub base-ui supports UI migration by replacing legacy antd Modal-style props. It provides an imperative API using createModal and correct content and children slot handling to ensure consistent dialog implementations.

Related Skills

Explore More Software Engineering Skills→
lobehublobehub
81.4k

modal

Create and manage modal dialogs programmatically using createModal from @lobehub/ui.

Official
Intermediate
JaveedIshaqJaveedIshaq
1

i18n-translation-guide

Guide react-i18next implementation with Trans, useTranslation, and structured namespaces.

Community
Intermediate
zmh13928433602-syszmh13928433602-sys

modal

Standardize imperative modal management in React apps using base-ui primitives.

Community
Intermediate
mDevsLabsmDevsLabs
1

modal

Create and control modals with imperative APIs in React base-ui projects.

Community
Intermediate