--- description: ReUI PRO (@reui) — MCP user-reui, Frame surface, kit, license, матрица выбора alwaysApply: true --- # ReUI MCP — обязательно (PRO + free) **Приоритет:** ReUI PRO **выше** голого shadcn. См. [`reui-pro-priority.mdc`](reui-pro-priority.mdc). Проект: **Base UI** (`style: base-nova`), surface lock **`frame`**. Связанные: [`reui-pro-priority.mdc`](reui-pro-priority.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`frontend-monorepo.mdc`](frontend-monorepo.mdc), [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`frontend-ui-patterns.mdc`](frontend-ui-patterns.mdc). | Документ | URL | |----------|-----| | **llms.txt** | https://reui.io/llms.txt | | **Get Started** | https://reui.io/docs/get-started | | **Styling** | https://reui.io/docs/styling | | **MCP** | https://reui.io/docs/mcp | | **Blocks** | https://reui.io/blocks | | **Settings blocks** | https://reui.io/blocks/application/settings | | **License** | https://reui.io/docs/license-setup | | **Base UI components** | https://reui.io/docs/components/base/ | ## Primary MCP 1. **`user-reui`** — `search` / `compose_page` / `get_block` / `get_component` / `get_install_command` / `validate_usage` / `get_audit_checklist` 2. **`plugin-shadcn-shadcn`** — primitives `@shadcn`; для `@reui` — вторично **Обязательно** цитировать `previewUrl` + `docsUrl` для каждой UI-зоны. ## Когда ReUI vs shadcn | Задача | Registry | Импорт | |--------|----------|--------| | Button, Sheet, Field, Sidebar, Tabs | `@shadcn` | `@telemt/ui/components/*` | | PRO pages/sections (settings, stats, auth, dashboard) | `@reui` blocks | adapt → `apps/web/src/components/` / `reui-kit/` | | Data Grid | `@reui` | `@/components/reui/data-grid/*` → `ResourcePage` | | Filters | `@reui` | `@/components/reui/filters` | | Frame surface | `@reui` | `@/components/reui/frame` | | KPI | block [stats-12](https://reui.io/preview/base/stats-12) | `reui-kit/KpiStatGrid` — см. [`kpi-hybrid.mdc`](kpi-hybrid.mdc) | | Quick Actions | Frame tiles sibling KPI | `reui-kit/QuickActionGrid` | | Semantic badge / alert | `@reui` | `@/components/reui/badge`, `@/components/reui/alert` | | Number / date / autocomplete / color / kanban | `@reui` | `@/components/reui/*` | **Сложные списки** — `ResourcePage` (с Filters) или `FrameDataGrid` (простой CRUD Frame+DataGrid); не raw ``, не Card shell. **Quick Actions** — только `QuickActionGrid` (не Card / Button grid). **KPI** — только `KpiStatGrid` (EvoBGP hybrid); не SectionCards. ## MCP workflow 0. Codegraph / поиск существующих `reui-kit/*`, `@/components/reui/*` 1. `user-reui` `search` (`surface: "frame"`, `category` при известном) 2. Страница целиком → `compose_page`; секция → `get_block` 3. `get_component` для API primitives из `componentsUsed` 4. CLI из `apps/web`: `pnpm dlx shadcn@latest add @reui/ --yes` 5. Post-add: shadcn imports → `@telemt/ui/components/*` 6. Adapt by reuse → kit / route 7. `validate_usage` + `get_audit_checklist` ## Размещение | Слой | Путь | Импорт | |------|------|--------| | shadcn | `packages/ui/src/components/` | `@telemt/ui/components/*` | | ReUI CLI | `apps/web/src/components/reui/` | `@/components/reui/*` | | PRO blocks (reference) | `apps/web/src/components/blocks/` | adapt into kit, не копипаст в routes | | Kit | `apps/web/src/components/reui-kit/` | `@/components/reui-kit/*` | ## Установленные ReUI (apps/web) **Components:** `frame`, `data-grid/*`, `filters`, `kanban`, `badge`, `alert`, `autocomplete`, `number-field`, `date-selector`, `color-picker`, `timeline`, `rating`, `phone-input`, `icon-stack` **Kit:** `ResourcePage`, `KpiStatGrid`, `QuickActionGrid`, `OpsDashboard`, `KanbanBoard`, `DetailPanel`, `SettingsShell` **Blocks (reference):** `stats-12`, `card-35`, `auth-13`, `app-shell-12`, `settings-16`, `settings-8`, `empty-state-12`, `form-7`, `data-grid-filtering-2`, `dashboard-1`, … ## License ```env # .env.local (gitignored) REUI_LICENSE_KEY= ``` `apps/web/components.json` → `@reui` с `Authorization: Bearer ${REUI_LICENSE_KEY}`. ## Эталоны preview | Зона | Preview | |------|---------| | KPI / Quick Actions | https://reui.io/preview/base/stats-12 · https://reui.io/preview/base/card-12 | | List | https://reui.io/preview/base/data-grid-filtering-2 | | Settings | https://reui.io/preview/base/settings-16 | | Auth | https://reui.io/preview/base/auth-13 | | Shell | https://reui.io/preview/base/app-shell-12 | | Empty | https://reui.io/preview/base/empty-state-12 | ## Запрещено - Копипаст с reui.io без CLI - ReUI в `packages/ui` / импорт как `@telemt/ui` - Radix-варианты docs — только Base UI - Raw `bg-emerald-*` вместо ReUI `variant` - Hand-roll data-grid/filters/KPI/Quick Actions/settings rows при наличии `@reui` / kit - Смешивать Card и Frame на ops-экране - Ставить shadcn/ui blocks выше ReUI PRO ## Чеклист - [ ] `user-reui` search/get_block + previewUrl - [ ] `surface: frame` - [ ] CLI add из `apps/web` при новом item - [ ] Kit / `@/components/reui` / `@telemt/ui` — правильный слой - [ ] `pnpm --filter web build`