feat: scaffold frontend app structure

agent-frontend-ui-instructions.md

@@ -0,0 +1,336 @@
+Ниже — инструкция для дизайн-агента, которая задаёт стиль, структуру и принципы интерфейса для твоего SPA. Она ориентирована на **минимализм, читаемость данных и удовольствие от использования**, а не на “перегруженный фитнес-дэшборд”.
+
+# 🎯 Общая задача
+
+Создать **чистый, современный, минималистичный интерфейс** для SPA-приложения бегуна, где пользователь:
+
+- отслеживает свои старты (прошлые и будущие),
+- видит прогресс и личные рекорды,
+- сравнивает результаты,
+- получает ощущение “контроля над своей беговой историей”.
+
+---
+
+# 🧭 Общая философия дизайна
+
+### 1. “Спокойная сила”, а не “спортивная агрессия”
+
+Не:
+
+- кислотные цвета,
+- перегруженные графики,
+- “фитнес-клуб стиль 2015”.
+
+Да:
+
+- чистый интерфейс,
+- воздух,
+- акцент на данных,
+- ощущение премиальности.
+
+---
+
+### 2. Минимум визуального шума
+
+Каждый экран должен отвечать на вопрос:
+
+> “Что здесь главное?”
+
+Если не ясно — убрать лишнее.
+
+---
+
+### 3. Данные — главный герой
+
+Интерфейс не про “украшения”, а про:
+
+- результаты,
+- прогресс,
+- сравнение,
+- числа.
+
+---
+
+# 🎨 Визуальный стиль
+
+## Цвета
+
+### Основа:
+
+- фон: светлый (#F7F8FA или близко)
+- карточки: белые
+- текст:
+  - основной: почти чёрный (#111)
+  - вторичный: серый (#666)
+
+### Акцент:
+
+- 1 основной цвет:
+  - глубокий синий или изумрудный (например #2F6BFF или #1FA37A)
+
+### Дополнительно:
+
+- PR / успех: мягкий зелёный
+- предупреждения: нейтральный жёлтый
+- ошибки: мягкий красный
+
+❗ Никаких “радуг”.
+
+---
+
+## Типографика
+
+- современный sans-serif (Inter / SF Pro / аналог)
+- крупные числа:
+  - результаты (время) — большие, жирные
+- иерархия:
+  - H1 — экран
+  - H2 — блок
+  - body — данные
+  - caption — мета
+
+---
+
+## Отступы и сетка
+
+- много воздуха
+- карточки с padding 16–24px
+- равномерная вертикальная ритмика
+- закругления: 12–16px
+
+---
+
+# 🧱 Основные экраны
+
+## 1. Главный экран (Dashboard)
+
+### Цель:
+
+дать быстрый ответ:
+
+- что впереди
+- где я сейчас
+- какой прогресс
+
+### Блоки:
+
+#### 🔹 Ближайший старт
+
+- название
+- дата
+- дистанция
+- countdown (“через 12 дней”)
+
+#### 🔹 Последний результат
+
+- время
+- дистанция
+- место
+- дата
+
+#### 🔹 Личный рекорд
+
+- по ключевой дистанции
+- выделен визуально
+
+#### 🔹 Сезон
+
+- количество стартов
+- лучший результат
+- краткая статистика
+
+---
+
+## 2. Календарь стартов
+
+### Два раздела:
+
+- будущие
+- прошедшие
+
+### Карточка старта:
+
+- название
+- дата
+- дистанция
+- статус:
+  - планирую
+  - зарегистрирован
+  - пробежал
+
+Минимум кликов.
+
+---
+
+## 3. Карточка старта
+
+- название
+- дата
+- дистанция
+- время
+- темп
+- место (если есть)
+- заметки (опционально)
+
+---
+
+## 4. Личные рекорды (PR)
+
+- список дистанций:
+  - 5K
+  - 10K
+  - 21.1
+  - 42.2
+
+Для каждой:
+
+- лучшее время
+- дата
+- старт
+
+---
+
+## 5. Сравнение стартов (ВАЖНО)
+
+Это ключевая фича.
+
+### UI:
+
+таблица или карточки:
+
+
+| Год | Время | Темп | Место |
+| --- | ----- | ---- | ----- |
+
+
+Можно добавить:
+
+- стрелки (лучше/хуже)
+- визуальный прогресс
+
+---
+
+# 📊 Графики
+
+Минимально и аккуратно:
+
+- линия прогресса по дистанции
+- без перегруза
+- без 10 линий сразу
+
+---
+
+# 🧩 Компоненты
+
+- карточки
+- таблицы (очень аккуратно)
+- фильтры
+- переключатели (tabs)
+- кнопки (primary / secondary)
+
+---
+
+# 🧠 UX принципы
+
+### 1. Минимум кликов
+
+Любая частая задача:  
+→ максимум 2–3 клика
+
+---
+
+### 2. Быстрое считывание
+
+Пользователь должен за 2 секунды понять:
+
+- что это
+- где он
+- что делать
+
+---
+
+### 3. Консистентность
+
+- одинаковые карточки
+- одинаковые статусы
+- одинаковые действия
+
+---
+
+# 🧪 Для аналитики (важно)
+
+Заложить:
+
+- зоны кликов
+- понятные CTA
+- отсутствие “пустых зон”
+
+---
+
+# 🖼️ Использование изображений
+
+## Когда использовать:
+
+- пустые состояния
+- onboarding
+- вдохновение
+
+## Когда НЕ использовать:
+
+- в данных
+- в списках стартов
+- в результатах
+
+---
+
+## Если генерировать изображения
+
+Стиль:
+
+- минимализм
+- спорт без пафоса
+- одиночный бегун
+- город / парк
+- мягкий свет
+- утро / вечер
+
+### Пример prompt:
+
+> “minimalist photo of a runner jogging alone in a city park at sunrise, soft light, calm mood, no crowd, modern aesthetic”
+
+---
+
+# 🚫 Чего избегать
+
+- перегруженных дашбордов
+- 100 метрик сразу
+- ярких кислотных цветов
+- сложных графиков
+- таблиц как в Excel
+- лишних иконок
+- “геймификации ради геймификации”
+
+---
+
+# 💡 Вдохновение (по духу)
+
+Если бы нужно было описать стиль:
+
+- как Notion, но для бегунов
+- как Apple Fitness, но менее ярко
+- как Strava, но более спокойно и чисто
+
+---
+
+# 🧭 Финальный ориентир
+
+Интерфейс должен вызывать ощущение:
+
+> “Я контролирую свою беговую историю и прогресс”
+
+а не:
+
+> “Я заполняю таблицу результатов”
+
+---
+