DenozordecandCursor
55014105f5
Docker / build (push) Failing after 22s
Унифицировать оболочку ops-экранов, IconTile, skip-link и контракт UI. Co-authored-by: Cursor <cursoragent@cursor.com>
102 lines
4.1 KiB
Plaintext
102 lines
4.1 KiB
Plaintext
---
|
|
description: Frontend — shadcn primitives + ReUI PRO blocks; CLI-first; kit patterns
|
|
globs: apps/web/**/*,packages/ui/**/*
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Frontend — shadcn/ui + ReUI PRO
|
|
|
|
**Источник истины:** MCP **`user-reui`** (pages/blocks/KPI/settings) + MCP `plugin-shadcn-shadcn` (primitives) + docs. Не выдумывать UI.
|
|
|
|
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` |
|
|
| `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. `@cfdm/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/*` | `@cfdm/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).
|