code-ai-installer 1.3.1 → 1.5.0

package/.agents/system_design_checklist/SKILL.md

@@ -1,207 +0,0 @@
----
-name: system_design_checklist
-description: Чек-лист системного дизайна — функциональные/нефункциональные требования, техдизайн, операции (деплой/мониторинг/backup/rollback), чтобы ничего не забыть.
----
-
-# Skill: System Design Checklist
-
-Самопроверка полноты архитектуры перед передачей в разработку.
-
-**Разделы:**
-1. [Functional Requirements](#1-functional-requirements)
-2. [Non-Functional Requirements](#2-nfr)
-3. [Technical Design](#3-technical-design)
-4. [Data Layer](#4-data-layer)
-5. [Security](#5-security)
-6. [Operations](#6-operations)
-7. [Red Flags](#7-red-flags)
-8. [Output Template](#8-output)
-
----
-
-## 1. Functional Requirements
-
-| # | Check | Guidance | Status |
-|---|-------|---------|--------|
-| 1.1 | User stories документированы | Формат: "As a [user], I want [action], so that [value]". Минимум для MVP scope | ☐ |
-| 1.2 | UI/UX flows промаплены | Каждый screen → actions → outcomes. Включая loading/error/empty states | ☐ |
-| 1.3 | API контракты определены | Endpoints, methods, request/response schemas, status codes. Формат: OpenAPI или markdown table | ☐ |
-| 1.4 | Data models определены | Entities, relationships, constraints. Формат: ER diagram (mermaid) или schema definitions | ☐ |
-| 1.5 | Edge cases покрыты | Что если: пустые данные, concurrent updates, partial failures, expired tokens | ☐ |
-
-### Пример PASS
-
-```
-1.3 API контракты: ✅ PASS
-  POST /api/v1/coupons — CreateCouponRequest → CouponResponse (201)
-  GET /api/v1/coupons/:id — → CouponResponse (200) | ErrorResponse (404)
-  Schemas определены в docs/api-contracts.md
-```
-
-### Пример MISSING
-
-```
-1.5 Edge cases: ❌ MISSING
-  Не определено поведение при:
-  - Concurrent update settings (optimistic locking?)
-  - Expired coupon на storefront (показывать expired или скрывать?)
-  → Рекомендация: добавить acceptance criteria в PRD
-  → Task: ARCH-05
-```
-
----
-
-## 2. Non-Functional Requirements
-
-| # | Check | Guidance | Status |
-|---|-------|---------|--------|
-| 2.1 | Performance targets | p95 latency ≤ X ms, throughput ≥ Y rps. Для каждого критического endpoint | ☐ |
-| 2.2 | Scalability | Ожидаемая нагрузка (users, requests, data volume). Growth plan (x10, x100) | ☐ |
-| 2.3 | Availability | Uptime target (99.9%?). Допустимый downtime. Graceful degradation strategy | ☐ |
-| 2.4 | Security | Auth/authz model, data classification, compliance requirements (GDPR, PCI) | ☐ |
-| 2.5 | Observability | Logging, metrics, alerting, tracing requirements | ☐ |
-
-### Guidance: Performance targets
-
-```markdown
-## Performance Targets
-
-| Endpoint | p50 | p95 | p99 | Max concurrent |
-|----------|-----|-----|-----|----------------|
-| GET /api/v1/widget/:id | 50ms | 100ms | 200ms | 100 |
-| POST /api/v1/settings | 100ms | 200ms | 500ms | 20 |
-| Dashboard page load | 1s | 2s | 3s | 50 |
-
-Измерение: response time от gateway, без network latency.
-```
-
----
-
-## 3. Technical Design
-
-| # | Check | Guidance | Status |
-|---|-------|---------|--------|
-| 3.1 | Architecture diagram | Текстовая (mermaid/ASCII). Показывает: компоненты, потоки данных, границы | ☐ |
-| 3.2 | Component responsibilities | Для каждого: что делает, что НЕ делает, public API, зависимости | ☐ |
-| 3.3 | Data flow | Request path: client → gateway → API → service → repo → DB → response | ☐ |
-| 3.4 | Integration points | Внешние системы (Wix API, payment, email). Retry/timeout/circuit breaker стратегия | ☐ |
-| 3.5 | Error handling | Единый формат ошибок. Mapping: domain errors → HTTP codes → UI messages | ☐ |
-| 3.6 | Testing strategy | Unit/integration/e2e границы. Coverage targets. What to mock | ☐ |
-
-### Пример: Architecture diagram (mermaid)
-
-```mermaid
-graph LR
-    A[Browser] -->|HTTPS| B[Caddy Gateway :5173]
-    B -->|/dashboard| C[React SPA :3001]
-    B -->|/api| D[Express API :3000]
-    B -->|/widget| E[Static Files]
-    D --> F[(MongoDB :27017)]
-    D -->|OAuth| G[Wix API]
-    E -->|fetch config| D
-```
-
-### Пример: Error handling table
-
-| Domain Error | HTTP Code | UI Message | Log Level |
-|-------------|-----------|-----------|-----------|
-| ValidationError | 400 | "Check your input" + field details | warn |
-| NotFoundError | 404 | "Not found" | info |
-| DuplicateError | 409 | "Already exists" | warn |
-| AuthError | 401 | "Please log in" | warn |
-| InternalError | 500 | "Something went wrong" | error |
-
----
-
-## 4. Data Layer
-
-| # | Check | Guidance | Status |
-|---|-------|---------|--------|
-| 4.1 | Schema definitions | Mongoose schemas с validators, defaults, timestamps | ☐ |
-| 4.2 | Embed vs Reference | Осознанный выбор, задокументирован в ADR | ☐ |
-| 4.3 | Indexes | Compound indexes под ключевые query patterns. Проверено через explain() | ☐ |
-| 4.4 | Pagination | Cursor для больших коллекций, skip для маленьких | ☐ |
-| 4.5 | Migrations | migrate-mongo или аналог. Backfill strategy для schema changes | ☐ |
-
----
-
-## 5. Security
-
-| # | Check | Guidance | Status |
-|---|-------|---------|--------|
-| 5.1 | Input validation | Zod schemas на каждый endpoint. Whitelist approach | ☐ |
-| 5.2 | Auth/Authz | JWT/session strategy. Authorization before data access | ☐ |
-| 5.3 | Secrets management | Env vars only. .env.example без значений. gitignore | ☐ |
-| 5.4 | Secure headers | Helmet, CORS whitelist, CSP | ☐ |
-| 5.5 | Dependency audit | `npm audit`, lockfile committed, no known vulnerabilities | ☐ |
-
----
-
-## 6. Operations
-
-| # | Check | Guidance | Status |
-|---|-------|---------|--------|
-| 6.1 | Deployment | Docker Compose / K8s. Build → test → deploy pipeline | ☐ |
-| 6.2 | Health checks | `/health/live` + `/health/ready` endpoints | ☐ |
-| 6.3 | Monitoring | Structured logs (pino). Key metrics: latency, error rate, throughput | ☐ |
-| 6.4 | Alerting | Error rate > X% → alert. p95 latency > Yms → alert | ☐ |
-| 6.5 | Backup/Recovery | DB backup strategy. RPO/RTO определены | ☐ |
-| 6.6 | Rollback plan | Как откатить: previous Docker image, DB migration down, feature flag | ☐ |
-
----
-
-## 7. Red Flags
-
-| # | Flag | Что это | Как обнаружить |
-|---|------|---------|---------------|
-| 7.1 | Big Ball of Mud | Нет чёткой архитектуры, всё связано со всем | Нет слоёв, circular deps |
-| 7.2 | God Object | Один файл/класс делает всё | Файл > 500 строк, > 10 methods |
-| 7.3 | Tight Coupling | Изменение одного модуля ломает другие | Нет interfaces/contracts между слоями |
-| 7.4 | Magic | Неочевидное поведение без документации | Mongoose hooks с бизнес-логикой, implicit globals |
-| 7.5 | Analysis Paralysis | Бесконечное планирование | Нет MVP пути, 3+ альтернативы без решения |
-| 7.6 | Premature Optimization | Оптимизация без данных | Cache/sharding до первого пользователя |
-| 7.7 | Not Invented Here | Отказ от готовых решений | Custom auth, custom ORM, custom logger |
-
----
-
-## 8. Output
-
-```markdown
-# System Design Checklist: <feature/project>
-
-**Date:** YYYY-MM-DD
-**Reviewer:** Architect Agent
-
-## Results
-
-| Section | Pass | Missing | Total |
-|---------|------|---------|-------|
-| Functional | 4 | 1 | 5 |
-| NFR | 3 | 2 | 5 |
-| Technical | 5 | 1 | 6 |
-| Data | 4 | 1 | 5 |
-| Security | 5 | 0 | 5 |
-| Operations | 4 | 2 | 6 |
-| Red Flags | 6 | 1 | 7 |
-| **Total** | **31** | **8** | **39** |
-
-## Missing Items
-
-| # | Check | Severity | Recommendation | Task |
-|---|-------|----------|----------------|------|
-| 2.1 | Performance targets | 🟠 P1 | Define p95 targets for critical endpoints | ARCH-12 |
-| 6.4 | Alerting | 🟡 P2 | Set up basic alerts after MVP | ARCH-15 |
-
-## Verdict
-✅ READY for development (with noted ARCH-xx items tracked)
-⚠️ CONDITIONAL — must address P0/P1 items before dev
-❌ NOT READY — significant gaps in <section>
-```
-
----
-
-## См. также
-- `$current_state_analysis` — аудит текущего состояния (перед этим checklist)
-- `$architecture_doc` — полный Architecture Document (после checklist)
-- `$adr_log` — фиксация решений
-- `$security_baseline_dev` — детальная security проверка

package/.agents/tanstack_beast_practices/SKILL.md

@@ -1,473 +0,0 @@
----
-name: tanstack_beast_practices
-description: TanStack (Query v5, Table v8, Virtual v3): кэширование, инвалидация, пагинация, infinite scroll, серверные фильтры/сортировка, виртуализация больших списков. Используй этот скилл при любой работе с TanStack Query, TanStack Table или TanStack Virtual — при написании fetcher-слоя, настройке кэша, построении таблиц с серверной пагинацией, виртуальных списков и при вопросах «как правильно сделать X с TanStack».
----
-
-# Skill: TanStack Beast Practices
-
-Копипаст-паттерны для предсказуемой работы с данными, таблицами и виртуализацией.
-
-**Разделы:**
-1. [Query: архитектура fetcher/adapter](#1-query-архитектура)
-2. [Query: кэширование и staleTime](#2-query-кэш)
-3. [Query: мутации и инвалидация](#3-query-мутации)
-4. [Query: пагинация и infinite scroll](#4-query-пагинация)
-5. [Table: серверная пагинация/сортировка/фильтры](#5-table)
-6. [Virtual: большие списки](#6-virtual)
-
----
-
-## 1. Query: Архитектура
-
-### ✅ DO: отдельные слои fetcher → adapter → hook
-```ts
-// ─── 1. fetcher: чистый HTTP, без бизнес-логики ───────────────────
-// src/api/users.api.ts
-export async function fetchUsersApi(params: UsersQueryParams): Promise<UsersApiResponse> {
-  const qs = new URLSearchParams(params as any).toString();
-  const res = await fetch(`/api/users?${qs}`);
-  if (!res.ok) throw new Error(`HTTP ${res.status}`);
-  return res.json();
-}
-
-// ─── 2. adapter: маппинг API-модели → доменную ────────────────────
-// src/api/users.adapter.ts
-export function adaptUser(raw: UserApiModel): User {
-  return {
-    id:        raw.user_id,          // snake_case → camelCase
-    fullName:  `${raw.first_name} ${raw.last_name}`,
-    createdAt: new Date(raw.created_at),
-  };
-}
-
-// ─── 3. hook: queryKey + queryFn + transform ──────────────────────
-// src/hooks/useUsers.ts
-export function useUsers(params: UsersQueryParams) {
-  return useQuery({
-    queryKey: ["users", params],          // ключ включает параметры
-    queryFn:  () => fetchUsersApi(params),
-    select:   data => data.items.map(adaptUser), // transform здесь, не в компоненте
-  });
-}
-```
-
-### ✅ DO: queryKey factory — один источник правды для ключей
-```ts
-// src/api/users.keys.ts
-export const userKeys = {
-  all:     ()          => ["users"]                    as const,
-  lists:   ()          => [...userKeys.all(), "list"]  as const,
-  list:    (p: Params) => [...userKeys.lists(), p]     as const,
-  details: ()          => [...userKeys.all(), "detail"] as const,
-  detail:  (id: string)=> [...userKeys.details(), id]  as const,
-};
-
-// Использование:
-useQuery({ queryKey: userKeys.list(params), queryFn: ... });
-
-// Инвалидация всех списков разом:
-qc.invalidateQueries({ queryKey: userKeys.lists() });
-
-// ❌ Плохо: магические строки разбросаны по компонентам
-useQuery({ queryKey: ["users", "list", page], ... }); // дублирование и опечатки
-```
-
----
-
-## 2. Query: Кэш
-
-### ✅ DO: осознанно выставлять staleTime и gcTime
-```ts
-// src/lib/queryClient.ts
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 60 * 1000,   // данные свежие 1 минуту — нет лишних фетчей при навигации
-      gcTime:    5 * 60 * 1000, // мусор собирается через 5 минут
-      retry: 2,
-      refetchOnWindowFocus: false, // отключи если данные не real-time
-    },
-  },
-});
-
-// ✅ Переопределение для конкретного хука
-export function useUserProfile(id: string) {
-  return useQuery({
-    queryKey: userKeys.detail(id),
-    queryFn:  () => fetchUserProfile(id),
-    staleTime: 5 * 60 * 1000, // профиль меняется редко — кэш 5 минут
-  });
-}
-
-// ✅ Real-time данные — без кэша
-export function useLiveStats() {
-  return useQuery({
-    queryKey: ["live-stats"],
-    queryFn:  fetchLiveStats,
-    staleTime: 0,               // всегда stale
-    refetchInterval: 5000,      // поллинг каждые 5 секунд
-  });
-}
-```
-
-### ✅ DO: prefetch для предзагрузки при ховере
-```ts
-function UserLink({ userId }: { userId: string }) {
-  const qc = useQueryClient();
-
-  return (
-    <a
-      href={`/users/${userId}`}
-      onMouseEnter={() => {
-        // ✅ Предзагружаем данные до клика — переход кажется мгновенным
-        qc.prefetchQuery({
-          queryKey: userKeys.detail(userId),
-          queryFn:  () => fetchUserProfile(userId),
-          staleTime: 60 * 1000,
-        });
-      }}
-    >
-      View Profile
-    </a>
-  );
-}
-```
-
----
-
-## 3. Query: Мутации и Инвалидация
-
-### ✅ DO: оптимистичное обновление + rollback
-```ts
-export function useUpdateUser() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data: UpdateUserDto) =>
-      fetch(`/api/users/${data.id}`, {
-        method: "PATCH",
-        body: JSON.stringify(data),
-        headers: { "Content-Type": "application/json" },
-      }).then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); }),
-
-    // ✅ Оптимистично обновляем кэш ДО ответа сервера
-    onMutate: async (data) => {
-      await qc.cancelQueries({ queryKey: userKeys.detail(data.id) });
-
-      const previous = qc.getQueryData<User>(userKeys.detail(data.id));
-      qc.setQueryData(userKeys.detail(data.id), (old: User) => ({ ...old, ...data }));
-
-      return { previous }; // контекст для rollback
-    },
-
-    // ✅ Откат при ошибке
-    onError: (_err, data, ctx) => {
-      if (ctx?.previous) {
-        qc.setQueryData(userKeys.detail(data.id), ctx.previous);
-      }
-    },
-
-    // ✅ Синхронизация с сервером в любом случае
-    onSettled: (_data, _err, data) => {
-      qc.invalidateQueries({ queryKey: userKeys.detail(data.id) });
-    },
-  });
-}
-```
-
-### ✅ DO: инвалидация нескольких ключей после мутации
-```ts
-export function useDeleteUser() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: (id: string) =>
-      fetch(`/api/users/${id}`, { method: "DELETE" }).then(r => {
-        if (!r.ok) throw new Error(`HTTP ${r.status}`);
-      }),
-
-    onSuccess: (_data, id) => {
-      // ✅ Инвалидируем список И детальную страницу
-      qc.invalidateQueries({ queryKey: userKeys.lists() });
-      qc.removeQueries({ queryKey: userKeys.detail(id) }); // удаляем из кэша совсем
-    },
-  });
-}
-```
-
----
-
-## 4. Query: Пагинация и Infinite Scroll
-
-### ✅ DO: серверная пагинация через keepPreviousData
-```ts
-export function useUsersList(page: number, pageSize = 20) {
-  return useQuery({
-    queryKey: userKeys.list({ page, pageSize }),
-    queryFn:  () => fetchUsersApi({ page, pageSize }),
-    placeholderData: keepPreviousData, // ✅ нет "мигания" при смене страницы
-    staleTime: 30 * 1000,
-  });
-}
-
-// Использование в компоненте
-function UsersTable() {
-  const [page, setPage] = useState(1);
-  const { data, isFetching } = useUsersList(page);
-
-  return (
-    <>
-      {isFetching && <Spinner size="sm" />} {/* индикатор без блокировки UI */}
-      <Table rows={data?.items ?? []} />
-      <Pagination
-        current={page}
-        total={data?.meta.total ?? 0}
-        onChange={setPage}
-      />
-    </>
-  );
-}
-```
-
-### ✅ DO: infinite scroll через useInfiniteQuery
-```ts
-export function useInfiniteUsers(search: string) {
-  return useInfiniteQuery({
-    queryKey:     userKeys.list({ search }),
-    queryFn:      ({ pageParam }) => fetchUsersApi({ search, cursor: pageParam }),
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: last => last.meta.nextCursor ?? undefined,
-    staleTime: 60 * 1000,
-  });
-}
-
-function InfiniteUsersList() {
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteUsers("");
-  const ref = useRef<HTMLDivElement>(null);
-
-  // ✅ IntersectionObserver — грузим следующую страницу при достижении конца
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const obs = new IntersectionObserver(
-      ([entry]) => { if (entry.isIntersecting && hasNextPage) fetchNextPage(); },
-      { threshold: 0.1 }
-    );
-    obs.observe(el);
-    return () => obs.disconnect();
-  }, [fetchNextPage, hasNextPage]);
-
-  const users = data?.pages.flatMap(p => p.items) ?? [];
-
-  return (
-    <ul>
-      {users.map(u => <li key={u.id}>{u.fullName}</li>)}
-      <div ref={ref}>
-        {isFetchingNextPage && <Spinner />}
-      </div>
-    </ul>
-  );
-}
-```
-
----
-
-## 5. Table
-
-### ✅ DO: серверная пагинация + сортировка + фильтры
-```ts
-// ─── State: URL как источник правды для фильтров/пагинации ─────────
-function useTableState() {
-  const [sorting,    setSorting]    = useState<SortingState>([]);
-  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-
-  return { sorting, setSorting, pagination, setPagination, columnFilters, setColumnFilters };
-}
-
-// ─── Параметры запроса из состояния таблицы ────────────────────────
-function tableStateToQueryParams(
-  sorting: SortingState,
-  pagination: PaginationState,
-  columnFilters: ColumnFiltersState
-): UsersQueryParams {
-  return {
-    page:     pagination.pageIndex + 1,
-    pageSize: pagination.pageSize,
-    sortBy:   sorting[0]?.id,
-    sortDir:  sorting[0]?.desc ? "desc" : "asc",
-    ...Object.fromEntries(columnFilters.map(f => [f.id, f.value])),
-  };
-}
-
-// ─── Таблица ───────────────────────────────────────────────────────
-const columns: ColumnDef<User>[] = [
-  { accessorKey: "fullName", header: "Name", enableSorting: true },
-  { accessorKey: "email",    header: "Email", enableColumnFilter: true },
-  {
-    accessorKey: "createdAt",
-    header: "Created",
-    cell: ({ getValue }) => getValue<Date>().toLocaleDateString("ru-RU"),
-  },
-];
-
-function UsersDataTable() {
-  const ts = useTableState();
-  const params = tableStateToQueryParams(ts.sorting, ts.pagination, ts.columnFilters);
-  const { data, isFetching } = useUsersList(params);
-
-  const table = useReactTable({
-    data:        data?.items ?? [],
-    columns,
-    rowCount:    data?.meta.total ?? 0,
-    state:       { sorting: ts.sorting, pagination: ts.pagination, columnFilters: ts.columnFilters },
-    manualSorting:    true, // ✅ серверная сортировка
-    manualPagination: true, // ✅ серверная пагинация
-    manualFiltering:  true, // ✅ серверная фильтрация
-    onSortingChange:       ts.setSorting,
-    onPaginationChange:    ts.setPagination,
-    onColumnFiltersChange: ts.setColumnFilters,
-    getCoreRowModel:       getCoreRowModel(),
-  });
-
-  return (
-    <div>
-      {isFetching && <div className="loading-bar" />}
-      <table>
-        <thead>
-          {table.getHeaderGroups().map(hg => (
-            <tr key={hg.id}>
-              {hg.headers.map(h => (
-                <th key={h.id} onClick={h.column.getToggleSortingHandler()}>
-                  {flexRender(h.column.columnDef.header, h.getContext())}
-                  {h.column.getIsSorted() === "asc" ? " ↑" : h.column.getIsSorted() === "desc" ? " ↓" : ""}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map(row => (
-            <tr key={row.id}>
-              {row.getVisibleCells().map(cell => (
-                <td key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div>
-        <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>←</button>
-        <span>Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}</span>
-        <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>→</button>
-      </div>
-    </div>
-  );
-}
-```
-
-### ❌ DON'T: клиентская сортировка/пагинация на больших данных
-```ts
-// ❌ Плохо: грузим всё, потом сортируем в браузере
-useQuery({ queryFn: () => fetchAllUsers() }); // 10к+ записей в памяти браузера
-// ✅ manualSorting + manualPagination + серверный запрос с параметрами
-```
-
----
-
-## 6. Virtual
-
-### ✅ DO: useVirtualizer для длинных списков
-```tsx
-import { useVirtualizer } from "@tanstack/react-virtual";
-
-function VirtualUsersList({ users }: { users: User[] }) {
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const virtualizer = useVirtualizer({
-    count:            users.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize:     () => 56,   // примерная высота строки в px
-    overscan:         5,          // рендерим 5 строк за экраном (плавность)
-  });
-
-  return (
-    <div ref={parentRef} style={{ height: "600px", overflowY: "auto" }}>
-      {/* контейнер полной высоты — браузер рисует правильный scrollbar */}
-      <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
-        {virtualizer.getVirtualItems().map(vRow => (
-          <div
-            key={vRow.index}
-            style={{
-              position:  "absolute",
-              top:       vRow.start,
-              width:     "100%",
-              height:    vRow.size,
-            }}
-          >
-            <UserRow user={users[vRow.index]} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-```
-
-### ✅ DO: динамические высоты строк через measureElement
-```tsx
-const virtualizer = useVirtualizer({
-  count:            items.length,
-  getScrollElement: () => parentRef.current,
-  estimateSize:     () => 80,
-  measureElement:   el => el.getBoundingClientRect().height, // ✅ реальная высота
-});
-
-// В рендере строки:
-<div ref={virtualizer.measureElement} data-index={vRow.index}>
-  <VariableHeightRow item={items[vRow.index]} />
-</div>
-```
-
-### ✅ DO: виртуализация таблицы (комбо Table + Virtual)
-```tsx
-// ✅ Получаем строки из TanStack Table, виртуализируем через Virtual
-const rows = table.getRowModel().rows;
-
-const rowVirtualizer = useVirtualizer({
-  count:            rows.length,
-  getScrollElement: () => tableContainerRef.current,
-  estimateSize:     () => 40,
-  overscan:         10,
-});
-
-// Рендерим только видимые строки:
-{rowVirtualizer.getVirtualItems().map(vRow => {
-  const row = rows[vRow.index];
-  return (
-    <tr key={row.id} style={{ height: vRow.size, transform: `translateY(${vRow.start}px)` }}>
-      {row.getVisibleCells().map(cell => (
-        <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
-      ))}
-    </tr>
-  );
-})}
-```
-
-### Правило выбора: пагинация vs виртуализация
-| Сценарий | Решение |
-|---|---|
-| Таблица с навигацией, SEO, закладками на страницу | Серверная пагинация |
-| Лента/список без чёткого понятия "страница" | Infinite scroll |
-| Dropdown с поиском, 1000+ опций | Виртуализация |
-| Таблица с 10k+ строк без пагинации | Виртуализация |
-| Смешанный UX: таблица + докрутка до конца | Table + Virtual |
-
----
-
-## См. также
-- `react_beast_practices` → виртуализация (базовый пример)
-- `typescript_beast_practices` → типизация generic запросов
-- `dev_reference_snippets` → раздел 6 (базовые примеры useQuery/useMutation)