KVFIR Forza-Racing-Series .cursorrules file for JavaScript (stars: 1)

Вот несколько лучших практик и правил для создания высококачественного веб-приложения с отличным UI/UX, ориентированного на мобильные устройства, с использованием Tailwind, React и Firebase:

**Дизайн, ориентированный на мобильные устройства:**
- Всегда проектируйте и реализуйте дизайн сначала для мобильных экранов, а затем масштабируйте до больших экранов.
- Используйте префиксы для адаптивности в Tailwind (sm:, md:, lg:, xl:) для настройки макетов для различных размеров экранов.

**Последовательная система дизайна:**
- Создайте систему дизайна с едиными цветами, типографикой, отступами и стилями компонентов.
- Используйте конфигурационный файл Tailwind (tailwind.config.js) для определения ваших пользовательских токенов дизайна.

**Оптимизация производительности:**
- Используйте React.lazy() и Suspense для разделения кода и ленивой загрузки компонентов.
- Реализуйте виртуализацию для длинных списков с помощью библиотек, таких как react-window.
- Оптимизируйте изображения и используйте next/image для автоматической оптимизации изображений в Next.js.

**Адаптивная типографика:**
- Используйте текстовые утилиты Tailwind с префиксами для изменения размеров шрифтов на разных экранах.
- Рассмотрите возможность использования системы плавной типографики для бесшовного масштабирования.

**Доступность:**
- Убедитесь в правильном соотношении контрастности цветов с использованием классов Tailwind text-* и bg-*.
- Используйте семантические HTML-элементы и атрибуты ARIA, где это необходимо.
- Реализуйте поддержку навигации с помощью клавиатуры.

**Удобный интерфейс для сенсорных экранов:**
- Сделайте интерактивные элементы (кнопки, ссылки) не менее 44x44 пикселей для удобного нажатия.
- Реализуйте сенсорные жесты для общих действий (свайп, увеличение с помощью щипка), где это уместно.

**Используйте изображения из папки "Mockups" в качестве примера для стилизации приложения и создания макета.**

**При создании файлов избегайте конфликтов с .TSX и .JSX.**

**Лучшие практики для Firebase:**
- Реализуйте правильные правила безопасности в Firebase.
- Используйте офлайн-кэширование SDK Firebase для повышения производительности и поддержки оффлайн-режима.
- Оптимизируйте запросы, чтобы минимизировать операции чтения/записи.

**Обработка ошибок и обратная связь:**
- Реализуйте корректные границы ошибок в React.
- Предоставляйте четкую обратную связь для действий пользователя (состояния загрузки, сообщения об успехе/ошибке).

**Анимации и переходы:**
- Используйте ненавязчивые анимации для улучшения UX (например, переходы между страницами, микро-взаимодействия).
- Используйте утилиты переходов Tailwind или рассмотрите библиотеки, такие как Framer Motion.

**Обработка форм:**
- Используйте библиотеки, такие как Formik или react-hook-form, для эффективного управления формами.
- Реализуйте корректную валидацию форм с четкими сообщениями об ошибках.

**Организация кода:**
- Следуйте единой структуре папок (например, components, hooks, pages, services).
- Используйте пользовательские хуки для инкапсуляции и повторного использования логики.

**Функции, как в нативных приложениях:**
- Реализуйте обновление контента с помощью "pull-to-refresh".
- Используйте плавную и инерционную прокрутку.
- Рассмотрите использование библиотек, таких как react-spring, для анимаций на основе физики.