front-design

Front Design (Nemo Edition)

Этот навык предназначен для создания эстетичных, производительных и архитектурно правильных интерфейсов для мессенджера Nemo. Дизайн опирается на собственные уникальные концепты без использования чужих ассетов.

Перед работой прочитай корневой AGENTS.md, docs/DESIGN.md и актуальные CSS tokens в коде. docs/DESIGN_SYSTEM_PLAN.md частично исторический: не копируй из него значения без проверки. Privacy, accessibility и работа функции важнее визуального эффекта.

🌟 Основные UX/UI Паттерны

1. Никакого копирайта: Запрещено использовать иконки, SVG и графику из Telegram, WhatsApp и других продуктов. Все иконки должны быть кастомными или из открытых библиотек (Lucide, Radix Icons).
2. Статусы сообщений: Вместо текстовых лейблов ("Delivered", "Read") используем элегантные галочки: ✓ (отправлено/доставлено) и ✓✓ (прочитано).
3. Эталонные макеты:
   • Desktop: Строгий 3-колоночный лейаут с опорой на тему Emerald Luxury.
   • Mobile: Опираемся на плавающую нижнюю навигацию (Bottom Nav Bar) и дизайн карточек из темы Cosmic Neon.
4. Динамичный Input: Кнопка отправки сообщения динамична: если инпут пуст — отображается кнопка аудиосообщения (Микрофон), при вводе текста она моментально меняется на кнопку Отправки (Send).
5. Mobile First: Любой интерфейс сначала проектируется для мобильного экрана. Desktop-версия является адаптивным расширением.
6. Radix UI Base: Используйте кастомные примитивы Radix (<Flex>, <Box>, <Text>).

🎨 Дивижок Оформления (Telegram-like Customization)

Дизайн-система должна быть гибко настраиваемой пользователем через будущую вкладку "Оформление". Для этого:

1. Масштабирование через tokens и rem:
   • Корневой шрифт задается глобально: html { --base-font-size: 16px; font-size: var(--base-font-size); }
   • Отступы, шрифты и скругления используют действующие design tokens; новые размеры не хардкодятся в обход системы.
2. Zustand Theme Store: Глобальные настройки (шрифт, радиус углов, фон чата) управляются стейтом и инжектятся напрямую в document.documentElement.style.
3. Динамический color-mix и OKLCH:
   • Забудьте про HSL/HEX. Используйте цветовое пространство OKLCH для идеального контраста.
   • Избегайте жестко заданных переменных с прозрачностью (например, --bg-alpha-50). Вместо этого вычисляйте состояния "на лету" с помощью color-mix: background: color-mix(in oklch, var(--primary) 20%, transparent);.

💎 Утвержденные Темы

Интерфейс должен поддерживать минимум 3 темы. Кастомные настройки из вкладки "Оформление" ложатся поверх них.

1. Default (По умолчанию)

   • data-theme="default"
   • Стиль: Чисто, знакомо, утилитарно.
   • Light: #f0f2f5 фон, #ffffff панели, #00a884 акцент, #d9fdd3 исходящие
   • Dark: #111b21 фон, #202c33 панели, #00a884 акцент, #005c4b исходящие

2. Emerald Luxury (Эталон для Десктопа)

   • data-theme="emerald"
   • Стиль: VIP, Природа, Золото, Платина.
   • Палитра: Глубокие Лесные/Угольные фоны, Изумрудные/Золотые акценты.
   • Стекло: Чёткие, тонкие границы (Золото/Серебро), слабое размытие.

3. Cosmic Neon (Эталон для Мобильной Навигации)

   • data-theme="neon"
   • Стиль: Киберпанк, Голография (смягченные, не кислотные тона).
   • Палитра: Фиолетовые/Индиго фоны, Неоновые Голубые/Розовые акценты.
   • Стекло: Сильное размытие (20px), матовый эффект, плавающие элементы (floating panels).

📐 Правила CSS Архитектуры

1. CSS Layers (@layer) (ОТМЕНЕНО):
   • Внимание: Использование @layer строго ЗАПРЕЩЕНО.
   • Из-за проблем специфичности (не-слоистый CSS всегда перебивает слоистый), мы отказались от @layer. Используйте плоскую структуру в index.css и стандартную изоляцию через CSS Modules.
2. Native CSS Nesting:
   • Используйте нативный нестинг (& .child { ... }) внутри ваших CSS Modules для чистоты кода.
3. CSS Modules:
   • Никаких инлайн-стилей (style={{ color: 'red' }}).
   • Стилизация выполняется через пропсы компонентов-примитивов (<Flex gap="3">) или через CSS Modules (className={styles.container}).

❌ Чего следует ИЗБЕГАТЬ

• Декор вместо ясности: Градиенты, стекло и тени используются только когда не ухудшают контраст, производительность и читаемость.
• Хардкод: Запрещено писать в модулях 16px, пишите var(--space-md) или рассчитывайте в rem. Запрещено писать HEX-цвета — только var(--color-...).
• div-soup: Использование div там, где подходит Flex или Box.
• Чужие иконки: Никаких иконок ТГ.

Референсы

• Radix UI vs CSS Modules
• См. артефакт design_mockups.md (AI Figma) для визуальной синхронизации.