# Интерфейс
Версия источника: 613500afd8eca5143b4094f6f5cd48e67844f8ff
Синхронизировано: 2026-11-11T03:48:23.836Z
Источник: https://github.com/sergey-from-riders/vibecoding-base/tree/613500afd8eca5143b4094f6f5cd48e67844f8ff
## Оглавление
- [Табличные представления](#interface-table-layout)
- [Сортировка таблиц](#interface-table-sorting)
- [Настройка столбцов](#interface-table-columns)
- [Серверные превью](#interface-server-thumbnails)
- [Навигация по строке](#interface-row-navigation)
- [Выделение строк](#interface-row-selection)
- [Закреплённый заголовок](#interface-sticky-header)
- [Постепенная загрузка](#interface-incremental-loading)
- [Групповые действия](#interface-bulk-actions)
- [Ручной порядок](#interface-manual-order)
- [Поиск на естественном языке](#interface-natural-search)
- [Сохранённые представления](#interface-saved-views)
- [Отказоустойчивый поиск](#interface-search-fallback)
- [Вкладки и свойства](#interface-editor-layout)
- [Поиск свойств и валидация](#interface-field-validation)
- [Тумблеры важных свойств](#interface-important-switches)
- [Автосохранение черновика](#interface-draft-autosave)
- [Версии и отмена](#interface-draft-history)
- [Предпросмотр и публикация](#interface-preview-publication)
- [Конкурентное редактирование](#interface-editing-locks)
- [Добавление медиа](#interface-media-import)
- [Галерея и описание медиа](#interface-media-gallery)
- [Редактирование медиа](#interface-media-editing)
- [Загрузка и ошибки](#interface-loading-errors)
- [Клавиатура и мобильный экран](#interface-keyboard-mobile)
- [Быстрое открытие формы](#interface-editor-performance)
- [Связанные записи](#interface-related-records)
- [Адрес записи](#interface-record-address)
- [Подготовленные правки агента](#interface-agent-proposals)
- [Контекстная справка](#interface-context-help)
# Табличные представления
## Коротко
Таблица помогает сравнивать однотипные записи и выполнять групповые действия.
## Плохо
```text
Каталог услуг: длинные карточки.
Цена и статус спрятаны внутри каждой карточки.
```
## Хорошо
```text
Каталог услуг: Название | Цена | Статус | Изменено.
Записи можно сравнить, открыть и выделить.
```
## Почему
Одинаковые свойства на одной линии быстрее просматривать. Таблица полезна, когда важны сравнение и обработка списка, а не только изображение.
## Когда применять
Товары, услуги, туры, статьи, заказы, заявки, клиенты, остатки и документы. Для расписания выбирайте календарь, для этапов работы — канбан; визуальную подборку можно показывать карточками.
## Как проверить
- Сравните три записи без открытия карточек.
- Проверьте, что длинное название доступно целиком.
## Человек
Выбирает свойства для сравнения и основную задачу списка.
## Агент
Показывает типовые строки, проверяет узкий экран и клавиатуру.
## Пример применения
В каталоге туров видны название, регион, цена с валютой и статус. На телефоне часть столбцов можно скрыть, сохранив название и основные действия.
## Источники
- [Carbon Design System: Data table](https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines)
- [Index table](https://shopify.dev/docs/api/app-home/latest/patterns/compositions/index-table)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/table-layout.md)
---
# Сортировка таблиц
## Коротко
Сортировка применяется ко всей найденной выборке, а не только к загруженным строкам.
## Плохо
```text
На экране 50 из 2000 товаров.
Цена сортируется как текст: 100, 20, 3.
Остальные страницы остаются в старом порядке.
```
## Хорошо
```text
Сервер сортирует все 2000 товаров: 3, 20, 100.
Пустая цена последняя в обоих направлениях.
При равной цене порядок уточняет id.
```
## Почему
Сортировка одной страницы создаёт ложное впечатление самого дешёвого товара. Стабильный дополнительный ключ предотвращает перестановку равных значений между порциями.
## Когда применять
Все столбцы с определённым смыслом сравнения. Для чекбокса, фото и кнопок сортировка обычно не нужна. Цены разных валют сравниваются только с явным правилом пересчёта или группировки.
## Как проверить
- Проверьте оба направления, пустые значения и одинаковые цены.
- Сопоставьте первую и следующую порции.
## Человек
Определяет смысл сравнения, валюту и обработку пустых значений.
## Агент
Реализует типизированную серверную сортировку и проверяет границы страниц.
## Пример применения
SQL-пример для одного валютного набора: ORDER BY amount_minor ASC NULLS LAST, id ASC. Заголовок показывает направление и передаёт его через aria-sort.
## Источники
- [Carbon Design System: Data table](https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines)
- [Paginate results | OpenSearch Documentation](https://docs.opensearch.org/latest/search-plugins/searching-data/paginate/)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/table-sorting.md)
---
# Настройка столбцов
## Коротко
Пользователь выбирает видимость, ширину, порядок и закрепление столбцов.
## Плохо
```text
Все 80 свойств видны сразу.
Порядок можно изменить только в настройках числом.
```
## Хорошо
```text
Выведено 8 из 80 свойств.
Заголовки перетаскиваются за ручку.
Есть изменение ширины, закрепление и сброс.
```
## Почему
Разным сотрудникам нужны разные свойства. Персональная настройка уменьшает шум и не перестраивает рабочее место коллег.
## Когда применять
Списки с несколькими рабочими сценариями. Настройки привязываются к пользователю и виду списка; общий вид требует отдельного права. Обязательный столбец выбора и доступ к записи должны оставаться понятными.
## Как проверить
- Измените вид и снова откройте список.
- Проверьте сброс и независимость настроек двух пользователей.
## Человек
Задаёт исходный вид и обязательные столбцы.
## Агент
Сохраняет настройки по стабильным ID столбцов и добавляет сброс.
## Пример применения
Менеджер туров оставляет цены и даты, редактор — статус и дату проверки. Скрытие столбца не удаляет поле из записи.
## Источники
- [Carbon Design System: Data table](https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines)
- [Understanding Success Criterion 2.5.7: Dragging Movements | WAI | W3C](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/table-columns.md)
---
# Серверные превью
## Коротко
Для таблицы сервер создаёт уменьшенную копию изображения до 50 px по большей стороне.
## Плохо
```text
В строке скачиваются все 12 оригиналов.
```
## Хорошо
```text
На одном превью: +11.
Оригинал открывается по явному действию.
```
## Почему
CSS-размер не уменьшает переданный файл. Производная копия сокращает трафик, а один кадр сохраняет компактную высоту строки.
## Когда применять
Размер 50 px — соглашение этого справочника для компактной таблицы. В медиаредакторе нужны более крупные превью. Соблюдайте доступ к приватным файлам; ошибка миниатюры не должна автоматически скачивать оригинал.
## Как проверить
- В сети браузера нет оригиналов при просмотре списка.
- Для 1 и 12 фото счётчик равен 0 и 11.
## Человек
Определяет размер и область использования превью.
## Агент
Создаёт производные файлы на сервере, кеширует их по версии оригинала.
## Пример применения
Изображение 6000×4000 превращается в 50×33. Фиксированное место под превью и заглушка при ошибке предотвращают скачок строки.
## Источники
- [ HTML image embed element - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/server-thumbnails.md)
---
# Навигация по строке
## Коротко
Открывайте запись по свободной области строки, сохраняя самостоятельную работу вложенных элементов.
## Плохо
```text
Нажатие «Удалить», чекбокса или ссылки региона
также открывает карточку тура.
```
## Хорошо
```text
Свободная область → карточка тура.
Чекбокс → выбор; регион → список региона.
Выделение текста и перетаскивание не открывают запись.
```
## Почему
Всплытие события не должно запускать два разных действия. Настоящая ссылка в названии сохраняет стандартное поведение браузера.
## Когда применять
Таблицы с переходом к записи. Исключайте интерактивные элементы, contenteditable, перетаскивание и выделение текста. Ctrl/Cmd-клик по ссылке продолжает открывать новую вкладку; Shift-выбор строки не превращается в навигацию.
## Как проверить
- Нажмите каждый вложенный элемент и выделите текст.
- Откройте название клавиатурой и в новой вкладке.
## Человек
Разделяет переход к записи и действия внутри строки.
## Агент
Проверяет всплытие событий и сохраняет семантику ссылок и кнопок.
## Пример применения
В туре ссылка «Камчатка» ведёт к связанному списку; свободная часть строки открывает тур. Не превращайте всю таблицу в набор вложенных ссылок.
## Источники
- [Table Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/table/)
- [Index table](https://shopify.dev/docs/api/app-home/latest/patterns/compositions/index-table)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/row-navigation.md)
---
# Выделение строк
## Коротко
Выбор записей должен быть явным и поддерживать диапазон через Shift.
## Плохо
```text
Клик по строке иногда открывает, иногда выделяет.
«Выбрать всё» молча включает неизвестные записи.
```
## Хорошо
```text
Первый столбец — чекбоксы.
Shift + чекбокс выбирает диапазон в текущем порядке.
«Выбрано 50 загруженных»; отдельно «Все 2000 найденных».
```
## Почему
Разница между видимой частью и всей выборкой критична для массовых действий. Выбор хранится по ID, а не по номеру строки.
## Когда применять
Таблицы с групповыми действиями. Заголовок имеет промежуточное состояние при частичном выборе. При изменении фильтра сбрасывайте выбор с понятным сообщением; подгрузка не выбирает новые строки молча.
## Как проверить
- Проверьте Shift в обоих направлениях и после сортировки.
- Измените запрос и проверьте состав выбранных ID.
## Человек
Определяет допустимый масштаб массовых действий.
## Агент
Разделяет диапазон загруженных строк и явный выбор всей выборки.
## Пример применения
Якорь диапазона — последняя выбранная строка. При смене сортировки старый якорь сбрасывается. Выбор по всей выдаче фиксирует запрос и повторно проверяет права на сервере.
## Источники
- [Carbon Design System: Data table](https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines)
- [Grid (Interactive Tabular Data and Layout Containers) Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/row-selection.md)
---
# Закреплённый заголовок
## Коротко
При прокрутке пользователь продолжает видеть названия столбцов.
## Плохо
```text
Через 20 строк непонятно, где цена и где остаток.
Закреплённая шапка закрывает первую строку.
```
## Хорошо
```text
Шапка остаётся у верхней границы области таблицы.
При горизонтальной прокрутке заголовки движутся со столбцами.
```
## Почему
Контекст столбца нужен при сравнении длинных списков. Несколько независимо прокручиваемых областей усложняют управление.
## Когда применять
Длинные таблицы. Учитывайте высоту общей навигации, фон и порядок наложения. Закрепление должно работать при изменении ширины столбцов и масштаба страницы.
## Как проверить
- Прокрутите в обе стороны и увеличьте масштаб.
- Первая и последняя строки не перекрыты.
## Человек
Определяет основную область прокрутки.
## Агент
Проверяет совпадение ширин и отступ от общей шапки.
## Пример применения
Один scroll-контейнер содержит и таблицу, и sticky-заголовок. При открытой нижней панели остаётся отступ под последней строкой.
## Источники
- [Carbon Design System: Data table](https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/sticky-header.md)
---
# Постепенная загрузка
## Коротко
Загружайте большой список порциями, сохраняя порядок и позицию просмотра.
## Плохо
```text
Все 100000 строк приходят сразу.
Следующая порция дублирует строки.
Ошибка выглядит как конец списка.
```
## Хорошо
```text
Загружено 50 из 100000.
Следующая порция появляется без скачка.
Ошибка → «Повторить»; доступна кнопка «Загрузить ещё».
```
## Почему
Порционная загрузка ограничивает трафик; ограничение отрисованных строк отдельно защищает браузер от роста DOM. Это разные задачи.
## Когда применять
Большие выборки. При смене запроса отменяйте прежнюю загрузку. Для глубокого поиска OpenSearch используйте стабильную сортировку и PIT/search_after; для небольшого списка допустима обычная пагинация.
## Как проверить
- Проверьте быстрый ввод нового запроса во время загрузки.
- Проверьте повторы ID, конец списка и сетевой сбой.
## Человек
Определяет размер порции и необходимость точного общего количества.
## Агент
Не смешивает ответы разных запросов и восстанавливает позицию списка.
## Пример применения
Подгрузка 50 строк не означает необходимость держать 100000 DOM-элементов. При истечении поискового снимка предложите обновить выдачу, сохранив запрос.
## Источники
- [Paginate results | OpenSearch Documentation](https://docs.opensearch.org/latest/search-plugins/searching-data/paginate/)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/incremental-loading.md)
---
# Групповые действия
## Коротко
Показывайте действия над выборкой в плавающей нижней панели с явным количеством записей.
## Плохо
```text
Кнопки группового удаления занимают каждую строку.
После сбоя написано «Готово», хотя обработана половина.
```
## Хорошо
```text
Выбрано 12 · Изменить статус · Удалить · Снять выбор.
Результат: 10 выполнено, 2 ошибки. Повторить 2.
```
## Почему
Одна контекстная панель снижает визуальный шум. Счётчик и частичный результат объясняют масштаб и фактический исход операции.
## Когда применять
Нижнее расположение — соглашение проекта. Проверяйте права на каждую запись на сервере; опасное действие требует подтверждения с количеством и смыслом операции. Панель учитывает экранную клавиатуру и безопасную область телефона.
## Как проверить
- Проверьте частичную ошибку и повтор без повторной обработки успешных.
- Последняя строка и её кнопки доступны.
## Человек
Выбирает массовые действия и условия подтверждения.
## Агент
Показывает фактические результаты и не скрывает отказы доступа.
## Пример применения
После массовой смены статуса строки с ошибками остаются выбранными. Публикация не запускается автоматически от одного выделения.
## Источники
- [Carbon Design System: Data table](https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines)
- [Index table](https://shopify.dev/docs/api/app-home/latest/patterns/compositions/index-table)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/bulk-actions.md)
---
# Ручной порядок
## Коротко
Если порядок задаётся вручную, его можно изменить перетаскиванием мышкой.
## Плохо
```text
Для перестановки фото нужно ввести 100, 200, 300.
После переноса описание остаётся у прежней позиции.
```
## Хорошо
```text
Перетащить фото за ручку к видимому месту вставки.
Фото, подпись и ID перемещаются вместе.
Доступны «Выше», «Ниже» и отмена.
```
## Почему
Пользователь работает с элементами, а не с техническими номерами. Стабильные ID защищают подписи и вложенные значения при перестановке.
## Когда применять
Вкладки, поля, галереи, дни программы и строки с бизнес-порядком. Автоматический порядок по цене или дате не меняется перетаскиванием. Для отфильтрованного или частичного списка сначала определите, между какими соседями сохраняется новая позиция.
## Как проверить
- Переставьте первый и последний элементы, затем откройте запись снова.
- Проверьте мышь, клавиатуру и кнопки без перетаскивания.
## Человек
Определяет, где порядок ручной, а где вычисляемый.
## Агент
Добавляет ручку, место вставки, сохранение и альтернативные действия.
## Пример применения
Настройка порядка вкладок сохраняется в персональном виде. Перестановка дней программы меняет черновик записи и публикуется отдельно.
## Источники
- [Understanding Success Criterion 2.5.7: Dragging Movements | WAI | W3C](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/manual-order.md)
---
# Поиск на естественном языке
## Коротко
Условия поиска задаются понятным текстом и сохраняют точный смысл ограничений.
## Плохо
```text
Запрос: туры на Камчатку до 50000.
После исправления опечатки цена потерялась.
Результаты включают туры за 200000.
```
## Хорошо
```text
Запрос: туры на Камчатку до 50000 ₽.
Условия: направление Камчатка, цена ≤ 50000 RUB.
Все найденные записи удовлетворяют обоим условиям.
```
## Почему
Нечёткое сопоставление текста допустимо для названия, но не для суммы или даты. Поисковый движок сам по себе не определяет смысл человеческой фразы.
## Когда применять
Каталоги с понятными предметными полями. Предпочтителен интерфейс без отдельных фильтров; условия уточняются текстом. При неоднозначной валюте или дате задайте уточнение. OpenSearch полезен для больших каталогов, PostgreSQL допустим для небольших.
## Как проверить
- Проверьте «от», «до», валюту, опечатки и неверную раскладку.
- Неизвестное условие не должно исчезать молча.
## Человек
Задаёт словарь полей, единицы и смысл запросов.
## Агент
Преобразует запрос в проверенные условия; не исполняет произвольный SQL/DSL от модели.
## Пример применения
«Туры на Камчатку от 100000» превращается в текстовое условие направления и числовой диапазон. Ограничения доступа добавляет сервер независимо от распознавания фразы.
## Источники
- [Boolean query | OpenSearch Documentation](https://docs.opensearch.org/latest/query-dsl/compound/bool/)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/natural-search.md)
---
# Сохранённые представления
## Коротко
Возвращайте пользователя в тот список и на ту позицию, с которой он открыл запись.
## Плохо
```text
Открыть тур из 400-й строки → назад.
Поиск пустой, сортировка сброшена, список наверху.
```
## Хорошо
```text
Назад → тот же запрос, столбцы и сортировка.
Восстановлена позиция выбранного тура.
Рабочий вид можно сохранить под названием.
```
## Почему
Потеря контекста заставляет повторять работу. Поисковые параметры в адресе также позволяют передать коллеге воспроизводимый вид списка.
## Когда применять
Каталоги с длительной обработкой записей. Персональные виды отделены от общих. Если запись исчезла или доступ изменился, восстановите запрос и ближайшую доступную позицию без показа закрытых данных.
## Как проверить
- Проверьте переход назад и прямую ссылку на выдачу.
- Настройки одного пользователя не меняют вид другого.
## Человек
Определяет полезные командные виды.
## Агент
Сохраняет запрос в URL, настройки по пользователю, позицию по стабильному ID.
## Пример применения
Вид «Неактивные туры без цены» хранит запрос и набор столбцов. Обновление данных не должно насильно возвращать пользователя к первой строке.
## Источники
- [Index table](https://shopify.dev/docs/api/app-home/latest/patterns/compositions/index-table)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/saved-views.md)
---
# Отказоустойчивый поиск
## Коротко
Недоступность индекса не должна выглядеть как отсутствие записей.
## Плохо
```text
OpenSearch недоступен → «Ничего не найдено».
Резервный запрос забывает ограничения доступа и цены.
```
## Хорошо
```text
OpenSearch недоступен → PostgreSQL с теми же условиями.
Если корректный поиск невозможен: ошибка и повтор.
Пустая выдача показывается только после успешного поиска.
```
## Почему
Ложная пустота скрывает реальные данные. Резервный путь полезен только при сохранении точных ограничений и прав.
## Когда применять
Системы с отдельным поисковым индексом. Полнотекстовое ранжирование резервного пути может отличаться; точные ограничения и доступ ослаблять нельзя. Если условие не поддерживается, объясните ограничение вместо выдачи неверных результатов.
## Как проверить
- Отключите индекс в тестовой среде.
- Сравните цену, связи и доступ в основном и резервном путях.
## Человек
Определяет допустимое снижение возможностей при сбое.
## Агент
Ограничивает ожидание, проверяет резервный путь и различает ошибку с пустотой.
## Пример применения
Каталог Vibe использует PostgreSQL при сбое OpenSearch. Это пример архитектуры, а не гарантия, что произвольный SQL повторит все возможности поискового индекса.
## Источники
- [Boolean query | OpenSearch Documentation](https://docs.opensearch.org/latest/query-dsl/compound/bool/)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/search-fallback.md)
---
# Вкладки и свойства
## Коротко
Пользователь может группировать поля и перемещать их между вкладками.
## Плохо
```text
120 полей в одной форме.
Перенос поля меняет его имя в данных.
```
## Хорошо
```text
Вкладки: Основное, Цены, Медиа.
Поля перетаскиваются или переносятся через меню.
Идентификатор поля не меняется.
```
## Почему
Компоновка рабочего места и модель записи решают разные задачи. Перестановка не должна повреждать API-контракт или создавать правку содержимого.
## Когда применять
Большие редакторы. Персональные настройки отделены от общих; общая настройка требует права. Поиск и «Все свойства» позволяют найти скрытое вкладкой поле.
## Как проверить
- Перенесите поле и проверьте сохранённое значение.
- Сбросьте компоновку без изменения черновика.
## Человек
Задаёт исходные группы и доступ к общей настройке.
## Агент
Хранит компоновку отдельно от данных и обеспечивает перенос без мыши.
## Пример применения
Поле price остаётся тем же полем после переноса из «Основного» в «Цены». Счётчики изменений остаются у фактических полей, а не у старых позиций.
## Источники
- [Understanding Success Criterion 2.5.7: Dragging Movements | WAI | W3C](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/editor-layout.md)
---
# Поиск свойств и валидация
## Коротко
Поиск приводит к нужному полю, а ошибка объясняет, что исправить, не стирая ввод.
## Плохо
```text
Ошибка сохранения.
Нужное поле скрыто на другой вкладке.
После обновления введённый текст исчез.
```
## Хорошо
```text
Цены · 1 ошибка.
«Цена должна быть не меньше 0» рядом с полем.
Переход к полю и сохранение введённого текста.
```
## Почему
Общее сообщение не помогает найти причину. Вкладка должна показывать, где требуется внимание, даже когда поле не видно.
## Когда применять
Формы с несколькими вкладками. Валидация сервера обязательна; клиент помогает раньше обнаружить ошибку. Не сообщайте ошибку пустого поля до подходящего момента взаимодействия.
## Как проверить
- Отправьте неверное значение в скрытой вкладке.
- Перейдите к ошибке клавиатурой и исправьте без потери остальных полей.
## Человек
Определяет ограничения и понятные сообщения.
## Агент
Связывает ошибку с полем и вкладкой, сохраняет пользовательский ввод.
## Пример применения
Поиск «цена» открывает вкладку «Цены» и выделяет найденное поле. Ошибка не публикует частично исправленную запись.
## Источники
- [User Notification | Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/tutorials/forms/notifications/)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/field-validation.md)
---
# Тумблеры важных свойств
## Коротко
Важные логические свойства имеют заметные тумблеры с понятной подписью.
## Плохо
```text
Неподписанный чекбокс среди 40 полей.
Новая запись уже отмечена «Опубликована».
```
## Хорошо
```text
Активен: включено. Показывать на главной: выключено.
Изменения в черновике.
Отдельная кнопка «Опубликовать».
```
## Почему
Визуальный акцент помогает заметить свойство с большим влиянием. Однако форма элемента сама по себе не должна запускать публикацию.
## Когда применять
Ключевые логические свойства записи. Обычные параметры могут оставаться чекбоксами. Подпись объясняет состояние; не используйте один цвет и не называйте неподтверждённый черновик опубликованным.
## Как проверить
- Переключите свойство: публичная запись не меняется до публикации.
- Проверьте подпись, клавиатуру и состояние новой записи.
## Человек
Выделяет свойства с существенными последствиями.
## Агент
Отделяет значение черновика от подтверждённого состояния сайта.
## Пример применения
Тумблер «Показывать на главной» изменяет поле черновика. После публикации отдельно проверяется появление записи на главной странице.
## Источники
- [Content Versioning](https://directus.com/docs/guides/content/content-versioning)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/important-switches.md)
---
# Автосохранение черновика
## Коротко
Любое содержательное изменение автоматически сохраняется в черновик.
## Плохо
```text
Название изменено, но сохраняется только основное описание.
При уходе со страницы всё исчезает.
```
## Хорошо
```text
Название, поля, связи и порядок → черновик.
Сохраняется… → Сохранено.
Ошибка → Не сохранено · Повторить.
```
## Почему
Пользователь не должен угадывать, какие поля сохраняются. Подтверждение сохранения допустимо только после ответа хранилища.
## Когда применять
Редакторы содержимого. Открытие записи не создаёт пустую ревизию; ввод можно объединять после короткой паузы, сохраняя порядок запросов. Автосохранение не равно публикации и не требует версии на каждое нажатие клавиши.
## Как проверить
- Измените название, связь и порядок; откройте черновик повторно.
- Отключите сеть и проверьте сообщение о несохранённых данных.
## Человек
Определяет жизненный цикл и срок хранения черновиков.
## Агент
Сериализует сохранения, показывает ошибки и защищает ввод при уходе.
## Пример применения
При ошибке сохранения редактор сохраняет локальный ввод и предлагает повтор. Кнопка публикации не отправляет устаревший серверный черновик поверх свежих локальных правок.
## Источники
- [Content Versioning](https://directus.com/docs/guides/content/content-versioning)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/draft-autosave.md)
---
# Версии и отмена
## Коротко
Изменённое поле показывает автора, время, прежнее и новое значения до публикации.
## Плохо
```text
После отмены поле прежнее, но рядом всё ещё
«Изменил редактор» и кнопка «Отменить».
```
## Хорошо
```text
Изменённое поле → автор, время, было / стало, отмена.
Значение снова опубликованное → отметка правки исчезает.
История операции сохраняется.
```
## Почему
Отметка должна описывать текущую разницу, а журнал — последовательность действий. Возврат значения не означает уничтожение истории.
## Когда применять
Черновики и версии записей. Поддержите отмену поля и восстановление версии в черновик. Сравнивайте значения с учётом типа: 0, false, null и пустая строка не взаимозаменяемы. Не придумывайте отсутствующего автора.
## Как проверить
- Верните поле вручную к опубликованному значению.
- Отметка и автор возле поля исчезли, журнал сохранился.
## Человек
Определяет видимость и срок хранения истории.
## Агент
Сравнивает канонические значения, сохраняет авторство человека и агента.
## Пример применения
Отмена цены возвращает опубликованную цену в черновик, не публикуя остальные изменения. Восстановление старой версии требует той же проверки, что обычная правка.
## Источники
- [Content Versioning](https://directus.com/docs/guides/content/content-versioning)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/draft-history.md)
---
# Предпросмотр и публикация
## Коротко
Проверяйте черновик в предпросмотре и публикуйте отдельной кнопкой.
## Плохо
```text
Кнопка «Просмотр» открывает старую страницу.
Автосохранение сразу меняет сайт.
При начале задачи показано «Опубликовано».
```
## Хорошо
```text
Предпросмотр показывает текущий черновик.
«Опубликовать» применяет проверенную версию.
«Публикуется» сменяется подтверждённым результатом.
```
## Почему
Сохранение, принятие публикации и появление на сайте — разные состояния. Подмена одного другим создаёт ложное подтверждение.
## Когда применять
Контентные системы с публикацией. Сервер проверяет права, версию и обязательные поля; предпросмотр приватного черновика не должен становиться публичной ссылкой без контроля доступа.
## Как проверить
- Сопоставьте черновик, предпросмотр и публичную страницу.
- Проверьте задержку фоновой публикации и её ошибку.
## Человек
Проверяет содержимое и явно публикует его в рамках полномочий.
## Агент
Показывает подтверждённые состояния и не публикует от изменения тумблера.
## Пример применения
После кнопки можно показать «Сохранено, обновление сайта выполняется». Финальное сообщение «Изменения доступны» требует проверки применённой версии.
## Источники
- [Content Versioning](https://directus.com/docs/guides/content/content-versioning)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/preview-publication.md)
---
# Конкурентное редактирование
## Коротко
Показывайте, кто редактирует запись, и предотвращайте параллельную запись поверх чужих изменений.
## Плохо
```text
Два редактора открыли форму.
Последний запрос молча перезаписал чужой текст.
```
## Хорошо
```text
Запись редактирует Редактор А до 14:30.
Остальным доступен просмотр.
Освободить чужую блокировку может уполномоченный пользователь.
```
## Почему
Блокировка объясняет доступность формы. Проверка версии на сервере остаётся нужна: срок блокировки может истечь или сеть может задержать старый запрос.
## Когда применять
Стандарт редактирования записи или поля в этой админке. Блокировка имеет срок и владельца; сервер проверяет её для человека и агента. Освобождение не публикует и не отменяет черновик.
## Как проверить
- Откройте запись двумя пользователями и дождитесь истечения блокировки.
- Старый запрос не должен перезаписать свежую версию.
## Человек
Определяет права освобождения и область блокировки.
## Агент
Реализует серверную проверку владельца, срока и версии, показывает конфликт.
## Пример применения
При HTTP 412 или прикладном конфликте редактор предлагает сравнить значения. Кнопка «Освободить запись» сначала дожидается сохранения черновика.
## Источники
- [If-Match header - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/If-Match)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/editing-locks.md)
---
# Добавление медиа
## Коротко
Файлы добавляются выбором, перетаскиванием, вставкой из буфера или по прямой ссылке.
## Плохо
```text
Можно выбрать только один файл.
Ошибка десятого файла отменяет всю подборку.
Вставка текста в подпись создаёт лишнее изображение.
```
## Хорошо
```text
Выбрать несколько · Перетащить · Ctrl/Cmd+V · По ссылке.
У каждого файла прогресс, отмена и повтор.
Вставка в описание меняет описание.
```
## Почему
Разные способы добавления соответствуют привычным рабочим действиям. Ошибка одного файла не должна заставлять повторять успешные загрузки.
## Когда применять
Изображения и разрешённые проектом документы. Учитывайте поддержку буфера браузером и сохраняйте кнопку выбора файла. Сервер проверяет содержимое, размер, формат и права; импорт по URL запрещает внутренние адреса и проверяет каждое перенаправление.
## Как проверить
- Загрузите подборку с одним повреждённым файлом.
- Проверьте вставку картинки и обычного текста в разные области.
## Человек
Определяет разрешённые форматы, ограничения и права загрузки.
## Агент
Показывает отдельные состояния файлов и повторяет только неуспешные.
## Пример применения
В учебной галерее можно вставить изображение из буфера в область загрузки. Ссылка на страницу с фото не считается прямой ссылкой на файл; ошибка объясняет различие.
## Источники
- [ClipboardEvent: clipboardData property - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData)
- [File drag and drop - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop)
- [ HTML attribute value - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/media-import.md)
---
# Галерея и описание медиа
## Коротко
Галерея сохраняет связь файла, подписи, описания и порядка при любой перестановке.
## Плохо
```text
Фото перетащили, подпись осталась у соседнего.
Обложка выбирается случайно.
В alt записано IMG_2381.jpg.
```
## Хорошо
```text
Стабильный ID связывает фото и метаданные.
Обложка явно отмечена.
Подпись и альтернативный текст заполняются отдельно.
```
## Почему
Метаданные принадлежат изображению, а не позиции в массиве. Альтернативный текст передаёт смысл изображения, подпись может сообщать дополнительный контекст.
## Когда применять
Галереи и одиночные изображения. Декоративному изображению нужен пустой alt; информативному — содержательное описание. Название файла не заменяет ни описание, ни права на использование.
## Как проверить
- Переставьте и замените изображение: подписи не перепутались.
- Проверьте обложку и краткое превью с +N.
## Человек
Выбирает обложку и пишет подходящие описания.
## Агент
Перемещает объект целиком и не связывает подписи с индексом массива.
## Пример применения
Три фото: «Вулкан», «Палатка», «Тропа». После переноса «Тропы» на первое место её подпись остаётся при ней; отдельно выбранная обложка не меняется без явного правила.
## Источники
- [ HTML image embed element - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)
- [Understanding Success Criterion 2.5.7: Dragging Movements | WAI | W3C](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/media-gallery.md)
---
# Редактирование медиа
## Коротко
Изменения медиа можно проверить и отменить до отдельной публикации.
## Плохо
```text
Кадрирование навсегда перезаписало оригинал.
Удаление из одной галереи сломало другие записи.
```
## Хорошо
```text
Оригинал сохранён, кадрирование создаёт производную версию.
Удаление из галереи убирает связь.
Доступны отмена и история до публикации.
```
## Почему
Файл может использоваться в нескольких местах. Обратимая операция над галереей не должна уничтожать общий ресурс.
## Когда применять
Просмотр крупно, замена, массовое выделение, удаление и восстановление. Кадрирование и поворот нужны там, где редакторы готовят изображения; не превращайте каждую админку в графический редактор. Уничтожение оригинала — отдельная политика хранения.
## Как проверить
- Проверьте отмену замены и сохранность общего файла.
- Порядок, подписи и удаление остаются черновиком до публикации.
## Человек
Определяет необходимость обработки и срок хранения оригиналов.
## Агент
Разделяет файл, производные версии и связи, проверяет восстановление.
## Пример применения
Редактор обрезает обложку для карточки тура, но крупный просмотр использует исходник. При замене предлагает проверить alt и подпись: старое описание может больше не подходить.
## Источники
- [Content Versioning](https://directus.com/docs/guides/content/content-versioning)
- [ HTML image embed element - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/media-editing.md)
---
# Загрузка и ошибки
## Коротко
Показывайте разные состояния для загрузки, пустоты, отказа доступа и сбоя.
## Плохо
```text
Любая ошибка → пустая таблица.
Повтор сохранения очищает форму.
```
## Хорошо
```text
Первый запрос: загрузка. Нет совпадений: изменить запрос.
Сбой: повторить. Нет доступа: объяснение.
Ввод остаётся при повторе.
```
## Почему
Одинаковая пустота скрывает причину и следующий шаг. Сообщение об успехе не должно появляться до подтверждения.
## Когда применять
Списки, редакторы и фоновые операции. При обновлении уже показанные данные можно сохранить с явным состоянием; отменённый старый запрос не должен показывать ошибку нового.
## Как проверить
- Проверьте пустую базу, пустой поиск, 403 и сетевой сбой.
- Повтор не стирает запрос и локальные правки.
## Человек
Определяет понятный следующий шаг для каждого состояния.
## Агент
Моделирует состояния явно и проверяет задержки и повторы.
## Пример применения
Загрузка следующей страницы показывает индикатор под строками. Недоступность сервера не заменяет загруженные строки сообщением «Записей нет».
## Источники
- [User Notification | Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/tutorials/forms/notifications/)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/loading-errors.md)
---
# Клавиатура и мобильный экран
## Коротко
Все основные действия доступны без мыши и на узком экране.
## Плохо
```text
Переставить поле можно только перетаскиванием.
Плавающая панель закрывает кнопку на телефоне.
```
## Хорошо
```text
Есть фокус, подписи и действия «Выше», «Ниже», «Во вкладку».
Панель учитывает экранную клавиатуру.
Широкий код прокручивается внутри своего блока.
```
## Почему
Клавиатура и одиночное нажатие — самостоятельные способы управления. Одна клавиатурная альтернатива не решает требования к альтернативе перетаскиванию указателем.
## Когда применять
Основные сценарии административного интерфейса. Нативная таблица предпочтительна; роль grid требует полноценного управления фокусом. Проверяйте 320 и 390 px, масштаб, светлую и тёмную темы.
## Как проверить
- Пройдите выбор, перестановку и публикацию только клавиатурой.
- Повторите без жеста перетаскивания на узком экране.
## Человек
Определяет критические сценарии для приёмки.
## Агент
Проверяет фокус, семантику и альтернативные способы действия.
## Пример применения
Меню поля содержит «Переместить во вкладку…». После переноса фокус остаётся у того же поля, а не теряется в начале страницы.
## Источники
- [Understanding Success Criterion 2.5.7: Dragging Movements | WAI | W3C](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html)
- [Table Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/table/)
- [Grid (Interactive Tabular Data and Layout Containers) Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/keyboard-mobile.md)
---
# Быстрое открытие формы
## Коротко
Основные поля не должны ждать загрузки всех дополнительных редакторов.
## Плохо
```text
Форма ждёт галерею, карту, историю и редактор программы.
Быстрый API объявлен доказательством быстрого интерфейса.
```
## Хорошо
```text
Основные поля доступны первыми.
Независимые данные запрашиваются параллельно.
Тяжёлый редактор загружается при открытии вкладки.
```
## Почему
Скорость ответа API не включает загрузку JavaScript и подготовку элементов к работе. Измерять нужно реальный пользовательский переход.
## Когда применять
Формы с тяжёлыми вкладками. Не откладывайте проверку доступа и не выдавайте ещё не загруженное поле за пустое. Оптимизация не должна терять черновики и ломать прямые ссылки.
## Как проверить
- Измерьте холодное открытие и повторный переход в браузере.
- Первое изменение основного поля сохраняется до загрузки медиа-вкладки.
## Человек
Определяет, какие поля нужны первыми.
## Агент
Разделяет время документа, API и готовности формы, проверяет живой сценарий.
## Пример применения
В Vibe дополнительные редакторы загружаются динамически, а запись и черновик читаются параллельно. Конкретное время зависит от сети и устройства; универсальные «0 мс» не обещаются.
## Источники
- [How to lazy load Client Components and libraries](https://nextjs.org/docs/app/guides/lazy-loading)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/editor-performance.md)
---
# Связанные записи
## Коротко
Связь ведёт к существующей записи и может открывать точную связанную выборку.
## Плохо
```text
Регион хранится свободным текстом.
Удаление связи удаляет сам регион.
«Найти туры» ищет случайное совпадение названия.
```
## Хорошо
```text
Регион выбирается из справочника по ID.
Связь можно открыть или убрать отдельно.
«Найти туры» передаёт точное условие связи.
```
## Почему
Название может повторяться и изменяться. Стабильный ID сохраняет связь, а точное условие исключает посторонние результаты.
## Когда применять
Справочники, теги, связанные товары и туры. Переходы и поиск учитывают доступ; наличие связи не гарантирует отдельный блок на публичном сайте.
## Как проверить
- Проверьте одинаковые названия и переименование справочника.
- Состав связанного списка совпадает с реальными связями.
## Человек
Определяет смысл и кратность связей.
## Агент
Использует ID и проверяет соседние сценарии перехода и поиска.
## Пример применения
Из региона «Адыгея» открывается список связанных туров. Удаление региона из одного тура убирает только эту связь.
## Источники
- [Boolean query | OpenSearch Documentation](https://docs.opensearch.org/latest/query-dsl/compound/bool/)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/related-records.md)
---
# Адрес записи
## Коротко
Изменение опубликованного адреса сохраняет работоспособность прежних ссылок.
## Плохо
```text
Переименовали статью — старый адрес стал 404.
Новый адрес занят другой статьёй.
```
## Хорошо
```text
Редактор показывает полный будущий адрес и конфликт.
Прежний опубликованный адрес перенаправляет на текущий.
Удаление старого адреса — отдельное действие.
```
## Почему
Опубликованный адрес может быть в закладках и внешних ссылках. Проверка уникальности нужна на сервере, а история помогает понять последствия изменения.
## Когда применять
Записи с публичными адресами. Не создавайте цепочки и циклы перенаправлений. Если материал удалён намеренно, политика удаления может требовать 404 или 410 вместо перенаправления.
## Как проверить
- Откройте прежний адрес после двух переименований.
- Попробуйте занятый адрес и проверьте сообщение о конфликте.
## Человек
Определяет адрес и решение об удалении старых ссылок.
## Агент
Проверяет уникальность и историю, сохраняет прямой переход к текущему адресу.
## Пример применения
При смене /tours/old.html на /tours/new.html старая ссылка ведёт к тому же туру. Автогенерация адреса из названия не переписывает вручную выбранный адрес без согласованного правила.
## Источники
- [301 Moved Permanently - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/301)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/record-address.md)
---
# Подготовленные правки агента
## Коротко
Правки агента представлены как проверяемый черновик конкретной версии.
## Плохо
```text
Агент пишет «Готово» и сразу меняет сайт.
После одобрения он дописал текст, публикация использует новые правки.
```
## Хорошо
```text
Было / стало, автор: агент, список изменений.
Человек может исправить или исключить изменения.
Кнопка публикует именно проверенную версию.
```
## Почему
Пользователь должен понимать масштаб операции. Одобрение старой версии не распространяется на незаметно изменившееся содержимое.
## Когда применять
Интерфейсы подготовки правок AI-агентом. Полномочия задаёт человек; техническая проверка не заменяет редакторскую оценку. Публикация проверяет права и версию на сервере, повтор запроса не дублирует действие.
## Как проверить
- Измените черновик после проверки: старое подтверждение не действует.
- Проверьте повтор публикации и исключение группы изменений.
## Человек
Проверяет существенные изменения и публикует в пределах своих прав.
## Агент
Подготавливает черновик, указывает фактические проверки и ждёт явного действия публикации.
## Пример применения
Редактор снимает группу «Описание», оставляя «Цена». Подтверждение связывается с ревизией и составом оставшихся изменений, а не только с ID записи.
## Источники
- [Tools - Model Context Protocol](https://modelcontextprotocol.io/specification/2025-06-18/server/tools)
- [Content Versioning](https://directus.com/docs/guides/content/content-versioning)
Уровень: Обязательно. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/agent-proposals.md)
---
# Контекстная справка
## Коротко
Сложное поле объясняется рядом с местом работы: назначение, формат и результат.
## Плохо
```text
Поле называется property_43.
Справка описывает кнопку, которой больше нет.
```
## Хорошо
```text
«Цена за участника, ₽».
Подсказка: что вводить, пример и где это появится.
Ограничения соответствуют действующей форме.
```
## Почему
Пользователю важно влияние поля на результат. Внутренние пути и названия полезны разработчику, но не заменяют рабочее объяснение.
## Когда применять
Неочевидные свойства, связи, медиа и публикация. Простым полям не нужна длинная инструкция. Справку обновляют вместе с поведением; скрытие группы не должно описываться как удаление данных.
## Как проверить
- Пройдите шаги подсказки в действующей форме.
- Проверьте пример, ограничения и результат на сайте.
## Человек
Объясняет предметный смысл и типовые ошибки.
## Агент
Связывает справку с полями, проверяет примеры и не придумывает возможности.
## Пример применения
Возле галереи объясняется разница между удалением фото из поля и удалением файла, а возле адреса — последствия изменения опубликованной ссылки.
## Источники
- [User Notification | Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/tutorials/forms/notifications/)
Уровень: Рекомендуется. Опубликовано: 2026-11-11. Проверено: 2026-11-11. Изменено: 2026-11-11.
[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/613500afd8eca5143b4094f6f5cd48e67844f8ff/registry/standards/ui/admin-interface/rules/context-help.md)
В строке скачиваются все 12 оригиналов.
```
## Хорошо
```text
На одном превью: +11.
Оригинал открывается по явному действию.
```
## Почему
CSS-размер не уменьшает переданный файл. Производная копия сокращает трафик, а один кадр сохраняет компактную высоту строки.
## Когда применять
Размер 50 px — соглашение этого справочника для компактной таблицы. В медиаредакторе нужны более крупные превью. Соблюдайте доступ к приватным файлам; ошибка миниатюры не должна автоматически скачивать оригинал.
## Как проверить
- В сети браузера нет оригиналов при просмотре списка.
- Для 1 и 12 фото счётчик равен 0 и 11.
## Человек
Определяет размер и область использования превью.
## Агент
Создаёт производные файлы на сервере, кеширует их по версии оригинала.
## Пример применения
Изображение 6000×4000 превращается в 50×33. Фиксированное место под превью и заглушка при ошибке предотвращают скачок строки.
## Источники
- [