Рабочий вход для ИИ-агентов: сначала определить задачу, затем выбрать компонент, открыть пример и только потом писать 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
Ошибки, которые чаще всего делают агенты.
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.