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.