modal

Create and control modal dialogs with an imperative API.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides an imperative API to create and manage modal dialogs in UI applications, replacing ad-hoc stateful handling with a consistent programmatic approach.

Core Features & Use Cases

  • Imperative modal creation: Use createModal to open dialogs without managing local open state.
  • Configurable dialogs: Set title, width, fullscreen, and lifecycle behavior.
  • Content-driven: Supply a content component and optional translation for titles.

Quick Start

Open a sample modal by invoking createModal from @lobehub/ui with a content component.

Frequently Asked Questions about modal

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

FAQPage Schema
How do I open a React modal dialog without managing local open state?

Imperative modal dialogs use the createModal utility to open dialogs programmatically in response to user actions or events, bypassing ad-hoc stateful handling.

How does an imperative API for modal dialogs work in React?

An imperative API for modal dialogs invokes createModal directly to trigger and control dialog appearance and lifecycle behavior, replacing local state variables.

Can I configure modal width and fullscreen behavior in React dialogs?

Configurable dialogs support setting title, width, fullscreen mode, and lifecycle behavior directly when invoking the imperative createModal function.

Does the imperative modal approach support i18n for dialog titles?

Yes, imperative modal creation supports i18n, allowing you to supply translation functions alongside your content component to localize dialog titles.

What is the best way to trigger UI modals from feature-specific components?

Using an imperative API is the best way to trigger UI modals from feature-specific components, ensuring consistent programmatic control without lifting open state.

Why should I use an imperative approach instead of stateful handling for modals?

An imperative approach replaces ad-hoc stateful handling with a consistent programmatic method to create and manage modal dialogs across your application.