modal

Create modal dialogs imperatively with createModal from @lobehub/ui.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/dodevproject/lobe-chat --skill modal-dodevproject
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: modal
Source: https://github.com/dodevproject/lobe-chat/tree/main/.agents/skills/modal
Command: npx skills add https://github.com/dodevproject/lobe-chat --skill modal-dodevproject

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation of modal dialogs in your application by providing an imperative API, eliminating the need to manage modal state declaratively.

Core Features & Use Cases

  • Imperative Modal Creation: Directly call a function to open modals without managing open states.
  • Customizable Content: Easily integrate custom React components as modal content.
  • Use Case: When a user clicks a button to configure a setting, this Skill can instantly display a modal with the configuration form without requiring complex state management in the parent component.

Quick Start

Use the modal skill to create a new modal with custom content.

Frequently Asked Questions about modal

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

FAQPage Schema
How do I create modals programmatically without managing state declaratively?

You can create modals programmatically using the imperative createModal function, which eliminates the need to manage open states declaratively. This simplifies dynamic UI dialog generation directly via function calls.

What is an imperative API for modal dialog creation?

An imperative API for modal dialog creation allows you to directly call a function to open modals. This approach removes the need to manage complex open state variables declaratively within your user interface components.

How do I display a configuration form in a modal when a button is clicked?

To display a configuration form in a modal when a button is clicked, use an imperative modal creation function. It instantly displays the modal with custom content without requiring complex state management in the parent component.

Can I use custom React components as modal content?

Yes, you can easily integrate custom React components as modal content. The imperative API supports customization of modal appearance and behavior through standard component props for dynamic generation.

Does the modal skill work with the @lobehub/ui component library?

Yes, the modal skill works with @lobehub/ui by utilizing its createModal function. This integration facilitates dynamic modal generation and supports customizing modal appearance and behavior through component props.

When should I avoid declarative state management for dialog components?

You should avoid declarative state management for dialogs when you need to instantly display configuration forms or information without complex state tracking. An imperative API provides a simpler alternative for dynamic generation.