Фронтенд: подход студии

Стек, конвейер дизайна и правила публичного фронта. Обязательные Blade-правила — в спецификации Blade; выбор архитектуры интерактива — в React: острова vs Inertia.

Стек по умолчанию

Слой	Инструмент	Примечание
Шаблоны	Blade + компоненты	Сервер рендерит сайт; layout + <x-*> компоненты
Стили	Tailwind CSS	Конфиг с токенами дизайна — единая точка правды
Лёгкий интерактив	Alpine.js	Табы, аккордеоны, модалки, меню — без React
Сложный интерактив	React-острова	Только блокам с состоянием → стандарт
Приложения (ЛК, дашборды)	Inertia + React	Отдельным приложением рядом с ядром
Сборка	Vite	@vite() в layout, ассеты с хешем
Иконки	SVG через blade-icons	Emoji в UI запрещены (спецификация Blade)
Админка	Filament	Livewire-стек, с публичным фронтом не смешивается

Конвейер дизайна: Claude.ai/design → продакшен

Дизайн всегда делается в Claude.ai/design (выход — React + Tailwind). Посадка:

1. Просить дизайн поблочно (hero, карточка услуги, форма, футер) — не страницей. Блоки чище ложатся и в Blade-компоненты, и в острова.
2. Токены (цвета, шрифты, радиусы, тени) — сразу в tailwind.config; компоненты не должны нести хардкод-цвета.
3. Статические блоки — конвертация JSX → Blade-компонент 1:1 (разметка и классы сохраняются; механическая задача для Claude Code). Конвертировать при посадке, не «оставим React временно».
4. Интерактивные блоки — корень React-острова без переделки, либо Alpine-версия, если состояние тривиально (открыт/закрыт, счётчик).
5. Иконки из дизайна — в SVG-компоненты (blade-icons), не инлайн-копипаста.

Правила публичного фронта (сводка)

• Семантика и SEO: один H1, иерархия заголовков, canonical, OG-теги — по спецификации SEO. Скелет страницы обязан рендериться сервером.
• Изображения: конверсии medialibrary под размер вывода, WebP, loading="lazy" ниже фолда, ширина/высота заданы (нет CLS).
• Производительность: JS — только там, где интерактив; ленивая гидрация островов; критичный CSS не блокируется — см. быстрые победы.
• Доступность-минимум: формы с label, фокус видим, контраст текста, alt у смысловых изображений — дёшево сразу, дорого потом.
• Запрещено: автопрокрутка/marquee (спецификация Blade), эмодзи вместо иконок, инлайн-стили из дизайна вместо Tailwind-классов, {!! !!} с недоверенным вводом.

Куда смотреть дальше

Вопрос	Документ
Blade-правила (обязательные)	specs/blade
Острова или Inertia?	React: острова vs Inertia
SEO-разметка	specs/seo
Ускорение фронта	Производительность