Bitrix ui

Skill bxmaximum/bitrix-framework-skills/skills/bitrix-ui

Covers Bitrix UI library — main.popup, main.sidepanel, ui.system.dialog, ui.dialogs.messagebox, ui.system.menu, ui.system.input, ui.alerts, notification-manager, icons, typography. Applied when building admin interfaces and public UI with kernel components. Key terms — Extension::load, Popup, SidePanel, system-dialog, MessageBox, ui.alerts, UI kit.From its SKILL.md

Install

npx -y skills add bxmaximum/bitrix-framework-skills --skill bitrix-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

3 things to look at

24 days oldThe repository was created 24 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
19 stars19 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.2 KB, 972 tokens by cl100k_base, as published. Nobody here has run it

Bitrix UI Library

Modern admin and public interfaces use JS extensions from ui and main modules. Load via Extension::load() in PHP, import classes in modular JS.

Choosing a Component

Scenario	Extension
Full modern dialog (title, content, custom layout)	`ui.system.dialog` (`Dialog`) — preferred for new UI
Simple confirm / alert / message box	`ui.dialogs.messagebox` (`MessageBox`)
Context/dropdown menu (modern)	`ui.system.menu`
Popup with custom positioning, legacy	`main.popup`
Slide-over panel (CRM-style)	`main.sidepanel`
Toast notifications	`ui.notification-manager`
Alerts/banners (inline UI alerts)	`ui.alerts`
Form inputs (modern)	`ui.system.input`, `ui.system.label`, `ui.system.chip`
Icons	`ui.icon-set` / `ui.icons`
Loading skeleton	`ui.system.skeleton`
Hints/tooltips	`ui.hint`
Animations	`ui.lottie`

`ui.system.dialog` vs `ui.dialogs.messagebox`

ui.system.dialog — modern system Dialog component (structured dialog UI for new admin screens).
ui.dialogs.messagebox — classic MessageBox helpers (confirm, alert, show) for quick confirmations and alerts. Not a replacement for ui.system.dialog; use MessageBox for simple prompts, Dialog for richer UI.

There is no extension ui.system.alert — use ui.alerts.

Loading Pattern

PHP:

\Bitrix\Main\UI\Extension::load(['ui.system.dialog', 'ui.alerts', 'ui.notification-manager']);

JS (in extension):

import { Dialog } from 'ui.system.dialog';
import { MessageBox } from 'ui.dialogs.messagebox';
import { Alert, AlertColor } from 'ui.alerts';
import { Notification } from 'ui.notification-manager';

System Dialog (preferred for new UI)

import { Dialog } from 'ui.system.dialog';

const dialog = new Dialog({
    title: 'Settings',
    content: 'Dialog body',
    // buttons / events per Dialog API
});
dialog.show();

Message Box (simple confirm/alert)

import { MessageBox } from 'ui.dialogs.messagebox';

MessageBox.confirm('Delete item?', () => {
    // on confirm
});

MessageBox.alert('Done');
MessageBox.show({
    message: 'Confirm action?',
    buttons: MessageBox.createButtons(MessageBox.BTN_OK, MessageBox.BTN_CANCEL),
    onOk: () => { /* ... */ },
});

Alerts

import { Alert, AlertColor, AlertSize } from 'ui.alerts';

const alert = new Alert({
    text: 'Saved successfully',
    color: AlertColor.SUCCESS,
    size: AlertSize.MD,
});
// render into a container per Alert API

Popup (legacy/base)

\Bitrix\Main\UI\Extension::load('main.popup');

import { Popup } from 'main.popup';

const popup = new Popup({
    id: 'my-popup',
    content: 'Saved successfully',
    closeIcon: true,
});
popup.show();

Side Panel

\Bitrix\Main\UI\Extension::load('main.sidepanel');

BX.SidePanel.Instance.open('/local/admin/custom-page.php', {
    width: 800,
    cacheable: false,
});

Notifications

import { Notification } from 'ui.notification-manager';

Notification.Center.notify({
    content: 'Saved',
    autoHideDelay: 3000,
});

Typography and Icons

Load ui.design-tokens / typography extensions for consistent admin styling. Icons via ui.icon-set — use named icons, not inline SVG copies.

Checklist

Prefer ui.system.dialog / ui.system.* over legacy main.popup for new admin UI; use ui.dialogs.messagebox for simple confirms.
Alerts via ui.alerts, not a non-existent ui.system.alert.
Extensions loaded in PHP before inline scripts.
Modular JS uses import from extension names, not global BX where avoidable.
Side panel URLs are real routes or admin pages with proper auth.
Notifications used for transient feedback, dialogs/message boxes for confirmations.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.