Design System v4 · Agents

Theme Skin env: prod

Рабочий вход для ИИ-агентов: сначала определить задачу, затем выбрать компонент, открыть пример и только потом писать Twig. Основные документы: FRONTEND.md, docs/AI_UI_SKILL.md, docs/frontend/task-index.md, docs/frontend/component-map.md, docs/frontend/recipes.md, docs/frontend/ui-kit-catalog.json.

Agent Workflow

Порядок поиска, который должен использовать агент перед изменением UI.

1. Classify

Определить слой: Twig v4 или legacy Smarty/v3. Для новой системы использовать только /ui-kit и templates/components/ui/*.

2. Lookup

Открыть task-index, component-map или JSON-каталог. Найти компонент по задаче, не по внешнему виду.

3. Reuse

Прочитать компонент и страницу примера. Писать <twig:ui:*>, а не raw-копию демо-разметки.

Fast Links

Что открыть в первую очередь.

Task index

Компоненты по типу задачи: форма, список, dashboard, feedback.

docs/frontend/task-index.md

Recipes

Готовые схемы экранов: searchable list, form, dashboard, tournament listing.

docs/frontend/recipes.md

Component map

Компонент → файл → UI Kit page + поисковые слова.

docs/frontend/component-map.md

Catalog JSON

Машиночитаемый каталог для быстрых агентских lookup-ов.

docs/frontend/ui-kit-catalog.json

Components

Реальные Twig-компоненты, которые нужно переиспользовать.

templates/components/ui/

Component CSS

Стили reusable-компонентов.

assets/new/css/components.css

Task To Component

Мини-индекс прямо на странице. Полный список — docs/frontend/task-index.md.

Task	Use	Open
Search/filter toolbar	`Toolbar + SearchInput + Select + Button`	/ui-kit/data + /ui-kit/forms
Compact form	`Fieldset + Input + Select + RadioGroup + Button`	/ui-kit/forms
Danger action / drawer	`ConfirmDialog + Drawer + Button soft-danger`	/ui-kit/modal
Tournament grid	`TournamentCard + Pagination + Drawer filters`	/ui-kit/tournament-cards
Player list	`PlayerCard or Table + Avatar + Rating`	/ui-kit/player-cards
Empty state	`EmptyState + primary Button`	/ui-kit/alerts
Temporary notification	`Toast + ToastContainer`	/ui-kit/feedback
Tooltip or popover	`Tooltip for hints, Popover for rich content`	/ui-kit/tooltips
Dashboard metrics	`Stat + Card/Paper + Table`	/ui-kit/data

Do Not

Ошибки, которые чаще всего делают агенты.

Не копировать demo-only HTML из UI Kit, если есть Twig-компонент.

Не использовать legacy Foundation, col-* и старые icon-* классы в v4.

Не угадывать имена иконок: проверять /ui-kit/icons или heroicons.json.

Не добавлять новую визуальную систему, если задача решается текущими yc-* primitives.

Не писать reusable styles inline на странице: переносить в components.css.

Не оставлять новый компонент без docblock, UI Kit примера и catalog entry.

Verification TODO

Пока оставлено как TODO-блок, по запросу можно автоматизировать отдельно.

Smoke-check всех маршрутов /ui-kit/*.
Playwright screenshots для light/dark desktop/mobile.
Console-error check для UI Kit страниц.
Consistency check: component file + UI Kit page + JSON catalog entry.