feat(web): enhance ReUI components and sidebar navigation

- Updated frontend UI patterns documentation to include new ReUI components and improved navigation instructions.
- Enhanced AppSidebar to utilize active state management for better user experience.
- Refactored layout components in the ReUI kit for improved spacing and alignment.
- Introduced KanbanBoardSkeleton for loading states in Kanban boards.
- Improved OpsDashboard and ResourcePage with consistent header layouts and enhanced accessibility features.

Co-authored-by: Cursor <cursoragent@cursor.com>

.cursor/rules/frontend-ui-patterns.mdc

@@ -6,38 +6,44 @@ alwaysApply: false
 
 # Frontend UI Patterns
 
-См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [Components](https://ui.shadcn.com/docs/components), [Blocks](https://ui.shadcn.com/blocks).
+См. также: [`frontend-shadcn.mdc`](frontend-shadcn.mdc), [`shadcn-mcp.mdc`](shadcn-mcp.mdc), [`reui-mcp.mdc`](reui-mcp.mdc), [Components](https://ui.shadcn.com/docs/components), [ReUI llms.txt](https://reui.io/llms.txt).
 
 ## Docs workflow (обязательно)
 
 0. Codegraph `codegraph_explore` — найти существующие shared/domain-компоненты
-1. Skill [`.agents/skills/shadcn/SKILL.md`](../.agents/skills/shadcn/SKILL.md) — component selection
-2. MCP `plugin-shadcn-shadcn` — search → examples → add command
-3. CLI: `cd apps/web && pnpm dlx shadcn@latest docs <component>` → сверить API с [Components](https://ui.shadcn.com/docs/components)
+1. Skill [`.agents/skills/shadcn/SKILL.md`](../.agents/skills/shadcn/SKILL.md) + ReUI skill — component selection
+2. MCP `plugin-shadcn-shadcn` / `user-reui` — search → examples → add command (`surface: "frame"`)
+3. CLI: `cd apps/web && pnpm dlx shadcn@latest docs <component>` / `add @reui/...` → сверить API
 4. Код по examples + docs API (только после совпадения MCP ↔ docs)
-5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn primitives)
+5. Context7 — **только** TanStack Router/Query, Recharts (не shadcn/ReUI primitives)
 6. MCP `get_audit_checklist` — перед merge
 7. Codegraph `codegraph_status` — Pending sync пустой
 
+## Surface
+
+Проект использует **ReUI Frame** (`surface: frame`), не shadcn Card как оболочку list/ops-экранов. Эталон списка: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2).
+
 ## Иерархия компонентов
 
 ```
-@cfdm/ui/components/*     ← только CLI (packages/ui)
+@cfdm/ui/components/*     ← shadcn CLI (packages/ui)
+@/components/reui/*       ← ReUI CLI @reui/* (apps/web)
 apps/web/src/components/  ← shared + domain + layout
-  page-shell.tsx          ← обёртка страницы
-  page-header.tsx
+  page-shell.tsx
+  reui-kit/
+    resource-page.tsx     ← list: Frame + line Tabs + Filters + DataGrid
+    kanban-board.tsx      ← kanban + KanbanBoardSkeleton
+    detail-panel.tsx      ← detail: Frame header/metrics
+    settings-shell.tsx
+    ops-dashboard.tsx
   empty-state.tsx
   query-state.tsx
   confirm-dialog.tsx
-  data-grid-card.tsx
-  section-cards.tsx
   status-badge.tsx
-  form-sheet.tsx          ← Sheet + RHF FormProvider
-  form-field.tsx          ← Field + Controller + aria-invalid
-  table-card.tsx          ← Card + Table wrapper
-  loading-button.tsx      ← Button + Spinner + label swap
-  skeletons.tsx           ← SectionCardsSkeleton, TableSkeleton
-  layout/                 ← app-shell, site-header
+  form-sheet.tsx
+  form-field.tsx
+  loading-button.tsx
+  layout/                 ← app-shell, site-header, app-sidebar
   domain-*                ← бизнес-компоненты
 ```
 
@@ -46,22 +52,55 @@ apps/web/src/components/  ← shared + domain + layout
 | Элемент | Shared | Primitive |
 |---------|--------|-----------|
 | Page wrapper | `PageShell` | — |
-| Page title | `PageHeader` | — |
-| Stat metrics | `SectionCards` | `Card` |
-| Data list | `DataGridCard` | ReUI `data-grid` |
+| List page | `ResourcePage` | ReUI `Frame` + `data-grid` + `filters` + shadcn `Tabs` |
+| Kanban | `KanbanBoard` / `KanbanBoardSkeleton` | ReUI `kanban` + `Frame` |
+| Detail | `DetailPanel` | ReUI `Frame` |
+| Settings | `SettingsShell` | — |
+| Dashboard | `OpsDashboard` / `KpiStatGrid` | ReUI `Frame` |
 | Empty | `EmptyState` | `Empty` |
-| Loading / Error | `QueryState` | `Skeleton`, `Alert` |
-| Status | `StatusBadge` | `Badge` |
+| Loading / Error | `QueryState` / kit skeletons | `Skeleton`, `Alert` |
+| Status | `StatusBadge` | ReUI `Badge` (`success`/`info`/`warning`) |
 | Create/Edit | `FormSheet` + `*-edit-sheet.tsx` | `Sheet`, `Field` |
 | Form field | `FormField` | `Field`, `Input`, `Select` |
 | Submit button | `LoadingButton` | `Button`, `Spinner` |
-| Table wrapper | `TableCard` | `Table`, `Card` |
 | Delete confirm | `ConfirmDialog` | `AlertDialog` |
-| List row | — | `Item variant="outline" size="sm"` |
-| Nav | `AppSidebar` | `Sidebar` |
+| Nav | `AppSidebar` (`isActive` обязателен) | `Sidebar` |
 | Breadcrumbs | `SiteHeader` | `Breadcrumb` |
 | Dates | `lib/format.ts` | — |
 
+## Header actions
+
+Независимые CTA в header → `flex shrink-0 flex-wrap items-center justify-end gap-2`.
+
+**Не** оборачивать в `ButtonGroup` (он склеивает кнопки). `ButtonGroup` — только для связанных контролок (filter chips и т.п.).
+
+Max 1 primary (`default`) на экран; остальные `outline` / `ghost`.
+
+## Line tabs (ResourcePage)
+
+Эталон: [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2).
+
+```tsx
+<TabsList variant="line" className="h-auto! gap-5 overflow-visible">
+  <TabsTrigger
+    value="…"
+    className="data-active:text-foreground gap-2 px-0 pb-3 text-sm font-medium [&[data-active]>span:last-child]:bg-foreground [&[data-active]>span:last-child]:text-background"
+  >
+    <span>Label</span>
+    <span className="bg-muted text-muted-foreground … tabular-nums">{count}</span>
+  </TabsTrigger>
+</TabsList>
+```
+
+- `h-auto!` снимает клип underline у `TabsList` (`h-8`)
+- Active count — контрастный chip (`bg-foreground` / `text-background`)
+- Active state — Base UI `data-active`, не Radix `data-[state=active]`
+
+## Sidebar
+
+- Каждый `SidebarMenuButton` получает `isActive` от pathname (`useRouterState`)
+- `--sidebar-accent` в `AppShell` — заметный mix primary (~14%), не 5%
+
 ## Overlay selection
 
 | Сценарий | Компонент |
@@ -72,35 +111,38 @@ apps/web/src/components/  ← shared + domain + layout
 
 ## Block registry
 
-| Зона | Block |
-|------|-------|
-| Shell | sidebar-07 |
-| Dashboard | dashboard-01 |
-| Login | login-03 |
+| Зона | Block / эталон |
+|------|----------------|
+| Shell | [app-shell-12](https://reui.io/preview/base/app-shell-12) |
+| List + tabs + filters | [data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2) |
+| Login | auth-13 / login-03 |
 
 ## Spacing
 
 ```
-PageShell:     gap-4 md:gap-6, px-4 lg:px-6 py-4 md:py-6
-Card grid:     gap-4
+AppShell main: gap-4 md:gap-6, px-4 md:px-6, py-4 md:py-5
+PageShell:     gap-4 md:gap-6
+Title/desc:    gap-px
+Card/Frame grid: gap-4
 FieldGroup:    gap-4
 Item list:     gap-2
-Toolbar:       gap-2
+Toolbar / header actions: gap-2
+Tabs list (line): gap-5
 ```
 
-**Запрещено:** `space-y-*`, raw colors (`bg-emerald-*`), custom empty divs, page-level Spinner.
+**Запрещено:** `space-y-*`, raw colors (`bg-emerald-*`), custom empty divs, page-level Spinner / plain «Загрузка…» без Skeleton.
 
-## UX/UI 2026 (состояния данных)
+## UX/UI (состояния данных)
 
 Каждый блок: **default, hover, focus, disabled, empty, loading, error**.
 
-- **Loading** — `Skeleton` с размерами финального контента (`QueryState skeleton={…}`), не Spinner на странице
-- **Empty** — `EmptyState` с CTA (кнопка создания)
-- **Zero-results** — отдельный empty с «Сбросить фильтр» (не «Создать»)
-- **Error** — `QueryState` + `onRetry` + иконка + текст
+- **Loading** — `Skeleton` / `ResourcePage` skeleton / `KanbanBoardSkeleton`, не Spinner на странице
+- **Empty** — `EmptyState` с CTA
+- **Zero-results** — message внутри DataGrid (+ «Сбросить»)
+- **Error** — `QueryState` / `Alert` + `onRetry`
 - **Overflow** — `truncate`, `max-w-*`, `Tooltip`; `tabular-nums` для чисел
-- **Density** — таблицы `h-10 text-sm`; max 1 primary CTA на экран
-- **A11y** — `aria-invalid` на полях, `aria-label`/`sr-only` на icon-only кнопках, цвет не единственный сигнал статуса
+- **Density** — operational (`dense` Frame/DataGrid); max 1 primary CTA
+- **A11y** — `aria-invalid`, `aria-label`/`sr-only` на icon-only, `aria-current="page"` на active nav/settings
 
 ## Button hierarchy (max 1 primary per screen)
 

apps/web/src/components/app-sidebar.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@tanstack/react-router'
+import { Link, useRouterState } from '@tanstack/react-router'
 import {
   LayoutDashboardIcon,
   GlobeIcon,
@@ -31,12 +31,26 @@ const infrastructureNav = [
 const operationsNav = [
   { to: '/services', label: 'Сервисы', icon: ServerIcon, exact: false },
   { to: '/certificates', label: 'Сертификаты', icon: ShieldCheckIcon, exact: false },
-  { to: '/settings/integrations', label: 'Настройки', icon: SettingsIcon, exact: false },
+  { to: '/settings/integrations', label: 'Настройки', icon: SettingsIcon, exact: false, matchPrefix: '/settings' },
 ] as const
 
+function isNavActive(
+  pathname: string,
+  to: string,
+  exact: boolean,
+  matchPrefix?: string,
+) {
+  if (matchPrefix) {
+    return pathname === matchPrefix || pathname.startsWith(`${matchPrefix}/`)
+  }
+  if (exact) return pathname === to
+  return pathname === to || pathname.startsWith(`${to}/`)
+}
+
 function NavSection({
   label,
   items,
+  pathname,
 }: {
   label: string
   items: readonly {
@@ -44,7 +58,9 @@ function NavSection({
     label: string
     icon: typeof GlobeIcon
     exact: boolean
+    matchPrefix?: string
   }[]
+  pathname: string
 }) {
   return (
     <SidebarGroup>
@@ -54,6 +70,12 @@ function NavSection({
           <SidebarMenuItem key={item.to}>
             <SidebarMenuButton
               tooltip={item.label}
+              isActive={isNavActive(
+                pathname,
+                item.to,
+                item.exact,
+                item.matchPrefix,
+              )}
               render={
                 <Link
                   to={item.to}
@@ -72,14 +94,16 @@ function NavSection({
 }
 
 export function AppSidebar() {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader>
         <AppSwitcher />
       </SidebarHeader>
       <SidebarContent>
-        <NavSection label="Инфраструктура" items={infrastructureNav} />
-        <NavSection label="Операции" items={operationsNav} />
+        <NavSection label="Инфраструктура" items={infrastructureNav} pathname={pathname} />
+        <NavSection label="Операции" items={operationsNav} pathname={pathname} />
       </SidebarContent>
       <SidebarFooter>
         <NavUser />

apps/web/src/components/layout/app-shell.tsx

@@ -10,7 +10,7 @@ export function AppShell({ children }: { children: ReactNode }) {
       className={cn(
         '[--sidebar:color-mix(in_oklab,var(--color-sidebar)_60%,transparent)]',
         '[--sidebar-border:transparent]',
-        '[--sidebar-accent:color-mix(in_oklab,var(--color-primary)_5%,transparent)]',
+        '[--sidebar-accent:color-mix(in_oklab,var(--color-primary)_14%,transparent)]',
         '[--sidebar-accent-foreground:var(--color-primary)]',
       )}
       style={

apps/web/src/components/reui-kit/detail-panel.tsx

@@ -41,13 +41,17 @@ function DetailPanelHeader({
   return (
     <Frame dense spacing="sm" className="w-full">
       <FrameHeader className="flex-row items-start justify-between gap-3">
-        <div className="min-w-0 flex-1 flex-col gap-px">
+        <div className="flex min-w-0 flex-1 flex-col gap-px">
           <FrameTitle>{title}</FrameTitle>
           {description ? (
             <FrameDescription>{description}</FrameDescription>
           ) : null}
         </div>
-        {actions ? <div className="shrink-0">{actions}</div> : null}
+        {actions ? (
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+            {actions}
+          </div>
+        ) : null}
       </FrameHeader>
       {children ? <FramePanel className="flex flex-col gap-4">{children}</FramePanel> : null}
     </Frame>

apps/web/src/components/reui-kit/index.ts

@@ -3,6 +3,6 @@ export { CertStatusChart, GroupDomainsChart } from './dashboard-analytics'
 export { ResourcePage, type ResourcePageProps, type ResourcePageTab } from './resource-page'
 export { KpiStatGrid, type KpiStatCard, type OpsKpiCard } from './kpi-stat-grid'
 export { OpsDashboard, OpsDashboardHintLink } from './ops-dashboard'
-export { KanbanBoard, type KanbanBoardProps, type KanbanColumnConfig } from './kanban-board'
+export { KanbanBoard, KanbanBoardSkeleton, type KanbanBoardProps, type KanbanColumnConfig } from './kanban-board'
 export { DetailPanel, type DetailMetricCard } from './detail-panel'
 export { SettingsShell, type SettingsTabConfig } from './settings-shell'

apps/web/src/components/reui-kit/kanban-board.tsx

@@ -19,6 +19,7 @@ import { GripVerticalIcon, PlusIcon } from 'lucide-react'
 
 import { cn } from '@cfdm/ui/lib/utils'
 import { Button } from '@cfdm/ui/components/button'
+import { Skeleton } from '@cfdm/ui/components/skeleton'
 
 export interface KanbanColumnConfig {
   id: string
@@ -207,20 +208,22 @@ export function KanbanBoard<T extends { id: string | number }>({
   )
 
   return (
-    <section className="mx-auto flex w-full flex-col gap-4">
-      <header className="px-1 py-1" aria-label={title}>
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-          <div className="min-w-0">
-            <h2 className="truncate text-lg leading-7 font-semibold">{title}</h2>
+    <section className="mx-auto flex w-full flex-col gap-4 md:gap-6">
+      <header className="px-1" aria-label={title}>
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex min-w-0 flex-col gap-px">
+            <h2 className="truncate text-lg leading-7 font-semibold tracking-tight">
+              {title}
+            </h2>
             {description ? (
-              <p className="text-muted-foreground mt-0.5 line-clamp-2 max-w-[52ch] text-sm leading-5">
+              <p className="text-muted-foreground line-clamp-2 max-w-[52ch] text-sm leading-5">
                 {description}
               </p>
             ) : null}
           </div>
           {toolbarActions ? (
             <div
-              className="flex w-full flex-wrap items-center gap-2 lg:w-auto lg:justify-end"
+              className="flex w-full shrink-0 flex-wrap items-center gap-2 lg:w-auto lg:justify-end"
               role="group"
             >
               {toolbarActions}
@@ -275,3 +278,35 @@ export function KanbanBoard<T extends { id: string | number }>({
     </section>
   )
 }
+
+export function KanbanBoardSkeleton({ columns = 3 }: { columns?: number }) {
+  return (
+    <section className="mx-auto flex w-full flex-col gap-4 md:gap-6" aria-busy="true">
+      <header className="px-1">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex min-w-0 flex-col gap-2">
+            <Skeleton className="h-7 w-48" />
+            <Skeleton className="h-4 w-72 max-w-full" />
+          </div>
+          <Skeleton className="h-9 w-36" />
+        </div>
+      </header>
+      <div className="flex gap-3 overflow-hidden p-1">
+        {Array.from({ length: columns }).map((_, i) => (
+          <Frame key={i} spacing="sm" className="w-[19rem] shrink-0">
+            <FrameHeader className="flex min-h-10 flex-row items-center gap-2 px-2 py-1.5">
+              <Skeleton className="size-2.5 rounded-full" />
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="ms-auto h-4 w-6" />
+            </FrameHeader>
+            <div className="flex flex-col gap-2 p-0.5">
+              <Skeleton className="h-20 w-full rounded-lg" />
+              <Skeleton className="h-20 w-full rounded-lg" />
+              <Skeleton className="h-20 w-full rounded-lg" />
+            </div>
+          </Frame>
+        ))}
+      </div>
+    </section>
+  )
+}

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -50,10 +50,12 @@ export function OpsDashboard({
       className="text-foreground @container mx-auto flex w-full max-w-7xl flex-col gap-4 md:gap-6"
     >
       <header className="px-1">
-        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-        <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
-          {description}
-        </p>
+        <div className="flex flex-col gap-px">
+          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+          <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+            {description}
+          </p>
+        </div>
       </header>
 
       <section aria-label="Ключевые метрики">

apps/web/src/components/reui-kit/resource-page.tsx

@@ -279,7 +279,9 @@ export function ResourcePage<T extends object>({
               ) : null}
             </div>
             {primaryAction ? (
-              <div className="shrink-0">{primaryAction}</div>
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                {primaryAction}
+              </div>
             ) : null}
           </FrameHeader>
         ) : null}
@@ -287,14 +289,17 @@ export function ResourcePage<T extends object>({
         <FramePanel className="p-0 shadow-none!">
           {tabs && tabs.length > 0 ? (
             <>
-              <div className="px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
+              <div className="overflow-visible px-(--frame-panel-header-px) pt-(--frame-panel-header-py)">
                 <Tabs value={activeTab} onValueChange={handleTabChange}>
-                  <TabsList variant="line" className="gap-5">
+                  <TabsList
+                    variant="line"
+                    className="h-auto! gap-5 overflow-visible"
+                  >
                     {tabs.map((tab) => (
                       <TabsTrigger
                         key={tab.id}
                         value={tab.id}
-                        className="gap-2 px-0 pb-3 text-sm"
+                        className="data-active:text-foreground gap-2 px-0 pb-3 text-sm font-medium [&[data-active]>span:last-child]:bg-foreground [&[data-active]>span:last-child]:text-background"
                       >
                         <span>{tab.label}</span>
                         <span className="bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-md px-1.5 py-0.5 text-xs tabular-nums">

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -58,10 +58,12 @@ export function SettingsShell({
     <PageShell>
       <div ref={rootRef} className="mx-auto flex w-full max-w-4xl flex-col gap-6">
         <header className="px-1">
-          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-          <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
-            {description}
-          </p>
+          <div className="flex flex-col gap-px">
+            <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+            <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+              {description}
+            </p>
+          </div>
         </header>
 
         <div
@@ -86,12 +88,13 @@ export function SettingsShell({
                   <Link
                     key={tab.id}
                     to={tab.to}
+                    aria-current={isActive ? 'page' : undefined}
                     className={cn(
                       'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
                       isMobile && 'shrink-0',
                       !isMobile && 'w-full',
                       isActive
-                        ? 'bg-muted text-foreground font-medium'
+                        ? 'bg-muted text-foreground font-medium shadow-sm ring-1 ring-border/60'
                         : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
                     )}
                   >

apps/web/src/routes/_auth/certificates.tsx

@@ -70,7 +70,7 @@ function CertificatesPage() {
   )
 
   return (
-    <PageShell className="gap-6">
+    <PageShell>
       <CertKpiCards
         summary={summary}
         total={certs?.length}

apps/web/src/routes/_auth/domains/$domainId/dns.tsx

@@ -206,11 +206,6 @@ function DnsPage() {
               void refetchDomain()
               void refetchRecords()
             }}
-            primaryAction={
-              <Button variant="outline" onClick={() => setSheetOpen(true)}>
-                Новая запись
-              </Button>
-            }
             emptyState={{
               title: 'DNS-записи не найдены',
               description: 'Синхронизируйте зону или создайте запись вручную',

apps/web/src/routes/_auth/domains/$domainId/index.tsx

@@ -347,7 +347,7 @@ function DomainOverviewPage() {
                 columns={columns}
                 data={subdomainRows}
                 getRowId={(row) => String(row.subdomain.id)}
-                primaryAction={
+                toolbarExtra={
                   <Button type="button" onClick={openCreateSheet}>
                     Добавить поддомен
                   </Button>

apps/web/src/routes/_auth/groups.tsx

@@ -17,7 +17,7 @@ import { PageShell } from '@/components/page-shell'
 import { EmptyState } from '@/components/empty-state'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { DomainGroupEditSheet } from '@/components/domain-group-edit-sheet'
-import { KanbanBoard } from '@/components/reui-kit'
+import { KanbanBoard, KanbanBoardSkeleton } from '@/components/reui-kit'
 import { DomainKanbanCard } from '@/components/kanban/domain-kanban-card'
 import { useDomainGroupsKanban } from '@/hooks/use-domain-groups-kanban'
 import { groupColumnId } from '@/components/board/column-ids'
@@ -150,7 +150,7 @@ function GroupsPage() {
   if (isLoading) {
     return (
       <PageShell>
-        <div className="text-muted-foreground text-sm">Загрузка доски…</div>
+        <KanbanBoardSkeleton columns={3} />
       </PageShell>
     )
   }

apps/web/src/routes/_auth/services.tsx

@@ -28,7 +28,7 @@ import { ServiceGroupEditSheet } from '@/components/service-group-edit-sheet'
 import { ServicesBulkToolbar } from '@/components/services-board/services-bulk-toolbar'
 import { useServicesKanban } from '@/hooks/use-services-kanban'
 import { useServicesSelection } from '@/hooks/use-services-selection'
-import { KanbanBoard } from '@/components/reui-kit'
+import { KanbanBoard, KanbanBoardSkeleton } from '@/components/reui-kit'
 import { ServiceKanbanCard } from '@/components/kanban/service-kanban-card'
 import { Button } from '@cfdm/ui/components/button'
 
@@ -374,7 +374,7 @@ function ServicesPage() {
       />
 
       {isLoading ? (
-        <div className="text-muted-foreground text-sm">Загрузка доски…</div>
+        <KanbanBoardSkeleton columns={3} />
       ) : isError ? (
         <EmptyState
           title="Не удалось загрузить сервисы"
@@ -415,12 +415,12 @@ function ServicesPage() {
           value={kanbanValue}
           onValueChange={dragDisabled ? () => {} : handleKanbanValueChange}
           toolbarActions={
-            <div className="flex flex-wrap gap-2">
+            <>
               <Button variant="outline" onClick={() => setCreateGroupSheetOpen(true)}>
                 Добавить группу
               </Button>
               <Button onClick={() => handleOpenCreateService()}>Добавить сервис</Button>
-            </div>
+            </>
           }
           renderCard={(service, ctx) => (
             <ServiceKanbanCard