Фронт-архитектура

Три зоны с разными задачами и разным рендером. Граница между ними проходит по авторизации. Ядро (модели, сервисы, права) — общее для всех трёх. Точные версии всех слоёв — в каноническом стеке; здесь — почему такое зонирование.

Три зоны системы

Зона	Кто пользователь	Рендер (стек)	Почему так
Публичный сайт	Посетитель, поисковый робот	Blade + Tailwind 4 (токены) + Alpine 3 + React 19-острова точечно; сборка Vite 8	SEO критичен → сервер отдаёт готовый HTML, page-cache работает
Админка	Студия, контент-менеджер клиента	Filament v5.6.6+ (Livewire 4/Blade)	Вид из коробки, нулевая вёрстка, весь опыт студии
Кабинеты/конфигураторы	Авторизованный клиент/посетитель	Inertia 2 + React 19 SSR (Node 22 LTS, отдельное приложение рядом)	Богатый интерактив, точный дизайн; SEO не важен после логина

Граница — по auth. Всё до логина — сайт (Blade, кеш, SEO). Всё после — приложение (Inertia или Filament-панель). Это не три технологии на выбор «что нравится», а три инструмента под три класса задач.

Зона 1: публичный сайт — Blade + токены + острова

Почему не React-темы

SEO — основа бизнеса студийных сайтов (мультигород, тысячи лендингов под ключевые слова). React-приложение (Inertia SSR) на публичной части ломает механизм, на котором стоит это SEO — кеширование готовых HTML-страниц:

• каждую страницу надо рендерить Node-процессом на лету (медленнее, дороже сервер);
• page-cache фактически теряется;
• Node.js появляется в проде на каждом сервере клиента — второй язык, ещё одна точка отказа;
• Filament (Livewire) и Inertia-React на одной странице не смешиваются.

Когда SEO — основа бизнеса, платить за React-темы эту цену невыгодно.

Как достигается «100% точность» дизайна без React-рантайма

Дизайн из claude.ai/design — это React + Tailwind. Точность и переключаемость тем достигаются без React на фронте:

1. Точность. Механическая конвертация JSX → Blade сохраняет ту же разметку и те же Tailwind-классы 1:1 — вид определяется классами, а не тем, React это рендерит или Blade. Конвертация — рутинная задача для Claude Code. Финальная сверка — через галерею блоков (/_gallery): каждый блок на демо-данных, скриншот-сверка с макетом.
2. Переключение тем. Достигается архитектурой тем как слоя (тема = пакет с Blade-переопределениями + theme.json токены), а не тем, что фронт на React. Сменил пакет темы → сайт выглядит иначе, контент тот же.

Дисциплина островов

React-остров разрешён только блоку, которому нужно состояние: калькулятор, конфигуратор, живой фильтр, чат. Анимации, табы, аккордеоны — CSS/Alpine. Правило из React: острова vs Inertia: 3+ острова на странице, желающих знать друг о друге, = сигнал, что это уже Inertia-приложение.

Зона 2: админка — Filament

Админка контент-менеджера и студии — штатный Filament. Ключевое:

• вид даёт сам Filament — единообразный, адаптивный, с тёмной темой из коробки;
• дизайн из claude.ai/design в админку почти не переносят — админка не витрина, а рабочий инструмент (таблицы, формы, фильтры). Экономия: админку не рисуют и не верстают;
• модуль привозит свой Filament-плагин (ресурсы/страницы/виджеты в общую панель).

Filament построен на Livewire (Blade + PHP), а не на React/Inertia — это разные, несмешиваемые миры. «Filament на Inertia SSR» невозможен — это будет уже не Filament.

Зона 3: клиентские кабинеты — Inertia + React SSR

Там, где React действительно оправдан — личный кабинет, конфигуратор, B2B-портал (после логина, богатый интерактив, SEO не нужен) — подключается отдельное Inertia + React SSR приложение на том же ядре:

• дизайн из claude.ai/design садится 1:1 без конвертации;
• сквозное состояние между экранами (корзина, черновики, фильтры) — родная стихия React;
• использует модули ядра (формы, настройки, домен) через их PHP-API.

Правило: не «CMS на Inertia», а отдельное Inertia-приложение рядом с ядром.

Конвейер посадки дизайна из claude.ai/design

Выход дизайна — React-компоненты на Tailwind. Дальше два конвейера в зависимости от зоны:

	Публичный сайт (Blade)	Кабинет (Inertia)
Статические блоки	JSX → Blade-компоненты (механически, разметка и классы 1:1)	Используются как есть
Интерактивные блоки	Корень React-острова без переделки	Используются как есть
Tailwind-токены	Общий theme.json → Tailwind-пресет	Тот же конфиг

Практические правила:

• Конвертацию JSX → Blade делать сразу при посадке, не «временно оставим React для статики» — иначе статический блок тащит гидрацию без причины.
• Просить дизайн у claude.ai/design поблочно (hero, карточка, форма), а не страницей — блоки чище ложатся и в Blade-компоненты, и в острова.
• Иконки — в blade-icons/SVG-компоненты, не инлайн-копипаста по шаблонам.

Красные флаги (выбор сделан неверно)

Симптом	Диагноз
React-темы на публичной части, а SEO критичен	Потерян page-cache, SSR ради SEO — переплата; должен быть Blade
На публичной странице 3+ острова, знающих друг о друге	Это приложение — выносить в Inertia-кабинет
Кабинет на Inertia повторяет CRUD-таблицы «как в админке»	Дешевле было второй Filament-панелью
Один UI-блок существует в Blade и React в двух копиях	Не проведена граница сайт/приложение
Остров ради табов/аккордеона/анимации	Нарушение дисциплины — это CSS/Alpine

Чеклист выбора зоны

1. Страница индексируется/кешируется? → Blade (публичный сайт), без вариантов.
2. Это рабочий инструмент управления (CRUD)? → Filament.
3. Кабинет с дизайн-требованиями и сквозным состоянием после логина? → Inertia рядом.
4. Кабинет функциональный, без дизайн-требований? → вторая Filament-панель (дешевле).

Выбор зафиксировать в README проекта одной строкой, чтобы следующий разработчик и Claude Code не переизобретали границу.