Мастерство Frontend UI

## Обзор

Frontend UI Mastery объединяет три production-навыка для фронтенда — **frontend-accessibility**, **frontend-components** и **frontend-responsive** — в один плагин. Вместе они охватывают полный жизненный цикл UI: создание композируемых компонентов, обеспечение их доступности для каждого пользователя и бесшовная адаптация под различные устройства. Один автор, единообразные соглашения для React, Vue и Svelte.

## Быстрый старт

1. Установите плагин в вашем рабочем пространстве OpenClaw.
2. При создании нового UI вызовите **frontend-components** для определения переиспользуемых компонентов с единственной ответственностью, чистыми пропсами и минимальным локальным состоянием.
3. Подключите **frontend-accessibility** для семантического HTML, ARIA, клавиатурной навигации, управления фокусом и цветового контраста — затем выполните проверку с помощью скринридера для подтверждения соответствия WCAG.
4. Завершите работу с **frontend-responsive**, применяя mobile-first брейкпоинты, fluid-контейнеры и размеры, удобные для касаний, чтобы те же компоненты адаптировались от телефона до десктопа.

## Основные команды

- `frontend-components` — Проектирование композируемых React/Vue/Svelte компонентов с чёткими интерфейсами и правильной инкапсуляцией.
- `frontend-accessibility` — Аудит и исправление семантического HTML, ARIA, клавиатурной навигации и совместимости со скринридерами для соответствия WCAG.
- `frontend-responsive` — Создание mobile-first адаптивных макетов с медиа-запросами, относительными единицами и стандартными брейкпоинтами.

## Советы

- Сначала создайте каркас компонента (`frontend-components`), затем сразу выполните проверку доступности (`frontend-accessibility`) перед добавлением адаптивных стилей — исправление a11y постфактум обходится гораздо дороже, чем его изначальная закладка.
- Сочетайте `frontend-responsive` с тестированием на реальном устройстве (или эмуляцией устройств в DevTools на `375px`, `768px`, `1280px`), чтобы выявить проблемы с областями касания и перестроением макета, которые упускают desktop-first макеты.
- Комбинируйте с плагином для бэкенда или БД, чтобы получить полный вертикальный срез: UI-плагин целиком отвечает за пользовательский слой.