masscodeio UI Primitives
Overview
Базовые UI-элементы в massCode должны собираться из существующих Ui* компонентов и Shadcn-паттернов. Этот skill отвечает за component-level usage rules, а не за общую визуальную базу.
Component Usage
- Локальные UI-компоненты доступны через auto-import с префиксом
Ui. - Базовые элементы вроде button, input, checkbox, action button не переизобретай на сыром HTML, если есть готовый
Ui*вариант. - Если нужного элемента нет, сначала создай его в
src/renderer/components/ui/, потом используй в фиче.
Buttons
- Primary action должен быть явным и не конкурировать с несколькими равноправными CTA в одном контейнере.
- Icon-only actions должны быть понятны по контексту и иметь tooltip или другой доступный label path.
- Loading и pending actions должны использовать существующий button pattern, а не ad-hoc “disabled text swap”.
- Destructive actions не должны выглядеть как обычные secondary controls.
Cards And Containers
- Для автономных panel-like блоков используй существующий
Card/Ui*container pattern, если он уже есть в области. - Внутренние muted blocks не нужно пересобирать разными
div-паттернами в каждой фиче. - Repeated panel structure должна переезжать в shared primitive или local feature primitive, а не копироваться markup-в-маркап.
Readonly And Copyable Content
- Длинный readonly output, generated text, URLs и similar content не показывай как “обычный disabled input”, если это ухудшает чтение.
- Для copy flows используй существующий copy pattern и уведомления через
useSonner(). - Readonly content должен оставаться визуально читаемым и удобно копируемым.
Styling Helpers
- Для variants используй
cva. - Для склейки классов используй
cn(). - Не делай variants вручную строковыми
if-цепочками там, где нужен нормальный variant API.
Shadcn Rules
- Shadcn-компоненты импортируй вручную из
@/components/ui/shadcn/*. - Для namespace-based компонентов используй паттерн вроде
import * as Dialog from '@/components/ui/shadcn/dialog'.
Notifications
- Для уведомлений используй
useSonner(). - Не добавляй локальную, параллельную систему toast/notification внутри фичи.
Tooltip, Popover, Overlay
- Tooltip — для короткого пояснения.
- Popover — для richer inline content, picker-like content или contextual controls.
- Не заменяй их ad-hoc overlay-разметкой без необходимости.
- Validation и inline guidance должны использовать существующие tooltip/popover primitives, если проект уже их применяет в аналогичных местах.
Dialog Focus
Во всех диалогах явно управляй фокусом при открытии и закрытии. Не допускай автоматического фокуса на крестике закрытия и появления tooltip на кнопке открытия из-за возврата фокуса после закрытия.
По умолчанию отменяй стандартный autofocus на
DialogContent:@open-auto-focus="(e) => e.preventDefault()" @close-auto-focus="(e) => e.preventDefault()"Исключение — намеренный фокус на конкретном поле или действии, нужном для сценария диалога. Задавай такую цель явно; при закрытии выбирай цель возврата фокуса без побочного показа tooltip.
Сохраняй focus trap и клавиатурную навигацию. Проверяй открытие и закрытие мышью и клавиатурой, включая Escape.
Common Mistakes
- Писать ещё одну кнопку или input с нуля “потому что быстрее”.
- Склеивать сложные conditional classes без
cn(). - Дублировать существующий primitive внутри feature directory вместо общего
src/renderer/components/ui/. - Использовать disabled input как универсальный readonly display surface.
- Делать overlay pattern вручную там, где уже есть Shadcn primitive.
- Смешивать правила primitives с вопросами визуальной базы, которые должны идти в
ui-foundations.