LO
modal
Используется для создания модальных окон, диалогов и подтверждений через createModal, confirmModal, ModalHost или base-ui modal APIs. Применяется, когда требуется вывести пользователю интерактивное диалоговое окно.
Что делает навык
Навык предоставляет императивный API для создания модальных окон, диалогов и подтверждений через функции createModal, confirmModal и компонент ModalHost из пакета @lobehub/ui/base-ui. Он решает задачу вывода интерактивных диалоговых окон пользователю, заменяя устаревшие решения на основе antd Modal.
Когда применять
- Необходимо вывести пользователю модальное окно с произвольным контентом или детьми (children).
- Требуется создать стандартное диалоговое окно подтверждения действия (confirmModal).
- Необходимо получить контекст модального окна внутри его контента с помощью useModalContext.
- В проекте отсутствует глобальный хост модальных окон, и его нужно добавить рядом с другими глобальными хостами.
Как работает
- Импортировать необходимые функции (createModal, confirmModal, ModalHost, useModalContext) из @lobehub/ui/base-ui.
- Убедиться, что компонент ModalHost из @lobehub/ui/base-ui смонтирован один раз в корне приложения (например, рядом с другими глобальными хостами).
- Если в проекте уже есть ModalHost из @lobehub/ui, добавить второй ленивый (lazy) ModalHost из @lobehub/ui/base-ui до завершения миграции императивных модальных окон.
- Вызвать createModal или confirmModal для открытия окна, передав контент через аргумент content (или children).
- Использовать useModalContext внутри содержимого модального окна при необходимости доступа к его контексту.
Примеры запросов агенту
Создай модальное окно с текстом 'Подтвердите действие' с помощью createModal.
Открой диалог подтверждения с помощью confirmModal.
Добавь глобальный ModalHost из @lobehub/ui/base-ui в корень приложения.
Что понадобится
- Пакет @lobehub/ui/base-ui должен быть установлен и доступен.
- В приложении должен быть смонтирован компонент ModalHost из @lobehub/ui/base-ui.
Описание составлено по SKILL.md навыка, сверено 06.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «lobehub-modal» из репозитория:
# https://github.com/lobehub/lobehub
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r lobehub-modal/ ~/.claude/skills/lobehub-modal/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.