---
name: "ui-guidelines"
description: "Applies project UI rules and UX scripts. Invoke when creating or editing UI screens/components or adjusting layout/theming."
---

# UI‑правила и UX‑скрипты

## Протокол работы (обязательно)
- Сначала дай короткий план (1–3 шага): что поменяешь в UI и где.
- Если есть неоднозначность — задай вопросы (макеты, поведение, приоритеты).
- Перед крупными UI изменениями — получи подтверждение.
- Если в промпте явно просят выполнить команды/проверки — запускай в терминале без дополнительных вопросов.
- Если пользователь просит только план — остановись на плане.

## Назначение
Делает UI правки в стиле существующего приложения, соблюдая структуру, дизайн‑систему и пользовательские сценарии.

## Когда вызывать
- Любые изменения экранов в client/screens.
- Изменения компонентов в client/components.
- Добавление нового UI‑флоу или состояния.

## Правила UI
- Использовать ThemedView/ThemedText как базовые контейнеры.
- Цвета и токены брать из useTheme и constants/theme.
- Отступы и радиусы — через Spacing и BorderRadius.
- Иконки — @tabler/icons-react-native с strokeWidth 1.6–1.8.
- Вертикальные списки через ScrollView/FlatList с contentContainerStyle и учетом safe area.
- UI‑шрифты: системный; чтение: Literata.
- Акцент и бренд: Forest Green #2C5F2D, Sage #97BC62, Warm White #F5F5F0, Deep Black #0D0D0D.
- Три‑модальный переключатель режимов чтения должен оставаться ключевым элементом.

## UX‑скрипты
- Состояния загрузки: ActivityIndicator + понятный текст.
- Ошибки: Alert с короткой причиной и действием пользователя.
- Пустые состояния: текст + объяснение, что делать дальше.
- Кнопки: Pressable с визуальным disabled состоянием.
- Формы: TextInput с placeholderTextColor из theme.textTertiary.
- Floating overlays и под‑попапы — только через Modal, без inline‑раскрытий.

## Структура экранов
- Экран = функциональный компонент + StyleSheet внизу файла.
- Экранная логика в hooks/services, UI в компонентах.
- Переиспользовать CardItem, SectionHeader и общие UI‑блоки.

## Принципы P1–P11
- Обязательно сверять UI‑изменения с design_guidelines.md (P1–P11).
- Вертикальные слайдеры: 150px контейнер, 135px fill, haptics по правилам.
- Панель настроек ReaderMenuPanel: 56% высоты экрана.
- Списки опций — вертикальные строки, не сетка.

## Правила коммуникации
- Использовать простой русский язык.
- Перед крупными UI изменениями получить подтверждение.

## Скрипты запуска UI
- Web: `npm run expo:dev` (по умолчанию `http://localhost:5001`)
- LAN для мобильного: `npx expo start --lan` и выставить `EXPO_PUBLIC_API_URL` в `.env.local`
- При EPERM ~/.expo использовать HOME внутри проекта

## Выход
- Список затронутых экранов/компонентов.
- Краткое описание UI‑поведения и состояний.