---
description: Frontend — shadcn primitives + ReUI PRO blocks; CLI-first; kit patterns
globs: apps/web/**/*,packages/ui/**/*
alwaysApply: false
---

# Frontend — shadcn/ui + ReUI PRO

**Иерархия:** ReUI PRO > kit > shadcn primitives. См. [`reui-pro-priority.mdc`](reui-pro-priority.mdc).

**Источник истины:** MCP **`user-reui`** (pages/blocks/KPI/settings) + MCP `plugin-shadcn-shadcn` (только primitives) + docs. Не выдумывать UI. Не поднимать ui.shadcn.com/blocks выше `@reui`.

Monorepo — [`frontend-monorepo.mdc`](frontend-monorepo.mdc). ReUI — [`reui-mcp.mdc`](reui-mcp.mdc). Patterns — [`frontend-ui-patterns.mdc`](frontend-ui-patterns.mdc).

| Документ | URL |
|----------|-----|
| **shadcn Components** | https://ui.shadcn.com/docs/components |
| **ReUI Blocks** | https://reui.io/blocks |
| **ReUI llms.txt** | https://reui.io/llms.txt |
| **ReUI Settings** | https://reui.io/blocks/application/settings |
| **Installation** | https://ui.shadcn.com/docs/installation |
| **Monorepo** | https://ui.shadcn.com/docs/monorepo |
| **Forms (RHF)** | https://ui.shadcn.com/docs/forms/react-hook-form |

## Шаг 0 — перед любым UI-кодом

0. Найти существующие `reui-kit/*` / shared
1. **Pages / KPI / settings / enterprise** → MCP `user-reui` (`search` → `get_block` / `compose_page`) + cite `previewUrl`
2. **Primitives** → MCP `plugin-shadcn-shadcn` + `pnpm dlx shadcn@latest docs <component>`
3. CLI add из `apps/web` → adapt

**Новая страница** → сначала ReUI PRO `compose_page` / blocks ([reui.io/blocks](https://reui.io/blocks)), не ui.shadcn.com/blocks как primary.

## Shared / kit (обязательно)

| Component | Файл |
|-----------|------|
| `PageShell` | `page-shell.tsx` |
| `ResourcePage` | `reui-kit/resource-page.tsx` |
| `OpsDashboard` / `KpiStatGrid` / `QuickActionGrid` | `reui-kit/ops-dashboard.tsx`, `kpi-stat-grid.tsx`, `quick-action-grid.tsx` |
| `KanbanBoard` | `reui-kit/kanban-board.tsx` |
| `DetailPanel` | `reui-kit/detail-panel.tsx` |
| `SettingsShell` | `reui-kit/settings-shell.tsx` |
| `EmptyState` | `empty-state.tsx` |
| `QueryState` | `query-state.tsx` |
| `ConfirmDialog` | `confirm-dialog.tsx` |
| `StatusBadge` | `status-badge.tsx` |
| `FormSheet` | `form-sheet.tsx` |
| `FormField` | `form-field.tsx` |
| `LoadingButton` | `loading-button.tsx` |
| `SettingRow` | `setting-row.tsx` |

**Не использовать как эталон:** устаревшие `PageHeader` / `SectionCards` / `DataGridCard` / `TableCard` (если удалены или мёртвы).

**Overlay:** Sheet — forms; AlertDialog — destructive confirm.

## Шаг 1 — CLI

```bash
cd apps/web
pnpm dlx shadcn@latest add button field input ...
pnpm dlx shadcn@latest add @reui/frame @reui/data-grid @reui/filters
pnpm dlx shadcn@latest add @reui/stats-12 @reui/card-35 @reui/settings-16 @reui/auth-13
pnpm dlx shadcn@latest apply b2fA --only theme -y
```

## Приоритет композиции

1. `@telemt/ui/components/*` (primitives)
2. ReUI PRO block → adapt (`blocks/` reference + kit)
3. `reui-kit/*` + shared
4. Domain-обёртка

## Запрещено

| ❌ | ✅ |
|----|-----|
| `<table>`, raw select | DataGrid / `Select` |
| `bg-emerald-*` | semantic / ReUI `variant` |
| Card как ops-shell | ReUI `Frame` |
| Hand-roll KPI | `KpiStatGrid` / [stats-12](https://reui.io/preview/base/stats-12) |
| `space-y-*` | `flex` + `gap-*` |
| `@/components/ui/*` | `@telemt/ui/components/*` |

## Эталоны проекта

| Зона | Файл | Preview |
|------|------|---------|
| Shell | `layout/app-shell.tsx` | [app-shell-12](https://reui.io/preview/base/app-shell-12) |
| Login | `routes/login.tsx` | [auth-13](https://reui.io/preview/base/auth-13) |
| Dashboard | `routes/_auth/index.tsx` | [stats-12](https://reui.io/preview/base/stats-12) / dashboard-1 |
| Lists | `ResourcePage` | [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) |
| Settings | `settings/integrations.tsx` | [settings-16](https://reui.io/preview/base/settings-16) |

## Чеклист

- [ ] `user-reui` + preview/docs для зоны
- [ ] Frame surface
- [ ] CLI add при новых items
- [ ] `pnpm --filter web build`

## Язык

Ответы — русский. Commits — [`commit-messages-ru.mdc`](commit-messages-ru.mdc).