Menu
Component implementation patterns for QIP UI. Use when editing tables, forms, modals, notifications, labels, icons, and permissions-related UI.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Mapper Element provides an ability to setup a mapping between the message from source element to the target element. Use this skill when performing mapping between two elements, requiring data transformation, the user asks to add mapper/mapper-2.
API integration and utility usage conventions in QIP UI. Use when editing src/api, src/misc, or code that consumes these layers.
Core development standards for the Qubership Integration Platform UI. Use when implementing, refactoring, or testing code in ui/.
Theme and environment behavior for QIP UI. Use when working on styles, color logic, rendering, or mode-specific behavior.
Based on SOC occupation classification
| name | ui-component-patterns |
| description | Component implementation patterns for QIP UI. Use when editing tables, forms, modals, notifications, labels, icons, and permissions-related UI. |
Use these conventions in ui/src/components/.
Table.flex-table class.InlineEdit for editable cells.src/components/table/tableSearch.ts (normalizeSearchTerm, matchesByFields).filter(Boolean); only filter null, undefined, and empty string.actions-column class and helpers/constants from actionsColumn.ts.usePermissions.hasPermissions.Required.ProtectedButton and ProtectedDropdown for protected actions.NotAuthorized as fallback on restricted pages.useModalContext().<Modal> directly in TSX.showModal({ component: <YourModal /> }).closeContainingModal().src/components/modal/.confirmAndRun(message, action) from src/misc/confirm-utils.ts.Form.normalize and getValueProps on Form.Item for non-trivial value mapping.@rjsf/antd from JSON schema loaded at runtime.@rjsf/validator-ajv8.src/components/modal/chain_element/field/src/components/modal/chain_element/widget/useNotificationService; do not call Ant Design notification directly.EntityLabels for display and LabelsEdit for editing labels.@ant-design/icons first.lucide-react or react-icons only for missing specialized icons.src/assets/ and are loaded through IconProvider from src/icons/.OverridableIcon for icons that support runtime override.currentColor for theme compatibility.