eslint --fix

2026-06-08 15:09:53 +03:00
parent 10d696f4ca
commit b98387ea58
64 changed files with 6070 additions and 2467 deletions
--- a/promts/meetme-penpot-prompt.md
+++ b/promts/meetme-penpot-prompt.md
@@ -3,6 +3,7 @@
 ## Предисловие

 Перед началом работы прочитай и усвой полностью:
+
 - `.claude/skills/impeccable/SKILL.md` и все 7 файлов из `reference/`
 - `.claude/skills/taste-skill/SKILL.md`

@@ -17,6 +18,7 @@
 Весь дизайн — **на русском языке**: лейблы, плейсхолдеры, заголовки, подписи, пустые состояния, сообщения об ошибках, CTA-кнопки.

 Два брейкпоинта:
+
 - **Mobile** — 390 × 844 px (iPhone 14 Pro как эталон)
 - **Desktop** — 1440 × 900 px

@@ -59,6 +61,7 @@ MeetMe/
 ## 1. ЦВЕТОВАЯ ПАЛИТРА

 ### Принципы (из impeccable color-and-contrast)
+
 - Все цвета определяй в **OKLCH** — предсказуемый контраст при изменении яркости
 - Нейтралы должны быть **тёплыми** (чуть красный/жёлтый подтон), не холодно-серыми
 - Избегай: синих оттенков по умолчанию, generic «brand purple», чистого чёрного/белого
@@ -67,6 +70,7 @@ MeetMe/

 **Brand (основной акцент):**
 Тёплый терракотово-коралловый — не стандартный розовый Tinder, не красный. Живой, зрелый.
+
 ```
 --color-brand-50:  oklch(97% 0.012 22)   /* почти белый с теплом */
 --color-brand-100: oklch(93% 0.030 22)
@@ -81,6 +85,7 @@ MeetMe/
 ```

 **Neutral (тёплые серые):**
+
 ```
 --color-neutral-0:   oklch(100% 0 0)
 --color-neutral-50:  oklch(97% 0.004 60)
@@ -96,6 +101,7 @@ MeetMe/
 ```

 **Semantic:**
+
 ```
 --color-success: oklch(62% 0.155 145)   /* зелёный — матч состоялся */
 --color-warning: oklch(78% 0.140 72)    /* янтарный — встреча pending */
@@ -104,6 +110,7 @@ MeetMe/
 ```

 **Поверхности (Light mode):**
+
 ```
 --surface-page:      --color-neutral-50
 --surface-card:      --color-neutral-0
@@ -118,6 +125,7 @@ MeetMe/
 ## 2. ТИПОГРАФИКА

 ### Принципы (из impeccable typography)
+
 - Не Inter. Никогда Inter как единственный шрифт.
 - Пара: выразительный дисплейный + читаемый текстовый
 - Модульная шкала, не произвольные размеры
@@ -133,20 +141,20 @@ MeetMe/

 ### Типографическая шкала (модульная, ratio 1.25)

-| Токен | Шрифт | Size | Weight | Line-height | Tracking | Применение |
-|-------|-------|------|--------|-------------|----------|------------|
-| `display-2xl` | Playfair Display | 48px | 700 | 1.1 | -0.02em | Экран матча, hero |
-| `display-xl` | Playfair Display | 38px | 700 | 1.15 | -0.015em | Заголовки онбординга |
-| `display-lg` | Playfair Display | 30px | 600 | 1.2 | -0.01em | Имя в профиле |
-| `display-md` | Playfair Display | 24px | 600 | 1.25 | -0.005em | Заголовки секций |
-| `heading-lg` | Manrope | 20px | 700 | 1.3 | -0.01em | Навбар, диалоги |
-| `heading-md` | Manrope | 17px | 600 | 1.35 | -0.005em | Карточки, подзаголовки |
-| `heading-sm` | Manrope | 15px | 600 | 1.4 | 0 | Лейблы полей |
-| `body-lg` | Manrope | 16px | 400 | 1.6 | 0 | Основной текст |
-| `body-md` | Manrope | 14px | 400 | 1.6 | 0 | Описание профиля |
-| `body-sm` | Manrope | 12px | 400 | 1.5 | 0.01em | Мета, временные метки |
-| `label-lg` | Manrope | 14px | 500 | 1 | 0.04em | Кнопки, таббар |
-| `label-sm` | Manrope | 11px | 500 | 1 | 0.06em | Бейджи, чипы |
+| Токен         | Шрифт            | Size | Weight | Line-height | Tracking | Применение             |
+| ------------- | ---------------- | ---- | ------ | ----------- | -------- | ---------------------- |
+| `display-2xl` | Playfair Display | 48px | 700    | 1.1         | -0.02em  | Экран матча, hero      |
+| `display-xl`  | Playfair Display | 38px | 700    | 1.15        | -0.015em | Заголовки онбординга   |
+| `display-lg`  | Playfair Display | 30px | 600    | 1.2         | -0.01em  | Имя в профиле          |
+| `display-md`  | Playfair Display | 24px | 600    | 1.25        | -0.005em | Заголовки секций       |
+| `heading-lg`  | Manrope          | 20px | 700    | 1.3         | -0.01em  | Навбар, диалоги        |
+| `heading-md`  | Manrope          | 17px | 600    | 1.35        | -0.005em | Карточки, подзаголовки |
+| `heading-sm`  | Manrope          | 15px | 600    | 1.4         | 0        | Лейблы полей           |
+| `body-lg`     | Manrope          | 16px | 400    | 1.6         | 0        | Основной текст         |
+| `body-md`     | Manrope          | 14px | 400    | 1.6         | 0        | Описание профиля       |
+| `body-sm`     | Manrope          | 12px | 400    | 1.5         | 0.01em   | Мета, временные метки  |
+| `label-lg`    | Manrope          | 14px | 500    | 1           | 0.04em   | Кнопки, таббар         |
+| `label-sm`    | Manrope          | 11px | 500    | 1           | 0.06em   | Бейджи, чипы           |

 **Все токены фиксируй в Penpot как Text Styles.**

@@ -155,6 +163,7 @@ MeetMe/
 ## 3. SPACING & GRID

 ### Шкала отступов (4px база)
+
 ```
 --space-1:  4px
 --space-2:  8px
@@ -170,6 +179,7 @@ MeetMe/
 ```

 ### Радиусы скругления
+
 ```
 --radius-sm:   6px    /* чипы, теги */
 --radius-md:   12px   /* карточки, поля ввода */
@@ -179,11 +189,13 @@ MeetMe/
 ```

 ### Грид Mobile (390px)
+
 - Колонки: 4
 - Гаттер: 16px
 - Отступы: 20px

 ### Грид Desktop (1440px)
+
 - Колонки: 12
 - Гаттер: 24px
 - Отступы: 80px
@@ -211,6 +223,7 @@ MeetMe/
 ## 5. БИБЛИОТЕКА ИКОНОК

 Создай коллекцию **48 иконок** в едином стиле:
+
 - Стиль: **Outlined с rounded endpoints**, stroke 1.5–2px, 24×24 viewport
 - Никакого filled + outlined микса в одном экране
 - Все иконки — компоненты Penpot с именованием `icon/[category]/[name]`
@@ -218,6 +231,7 @@ MeetMe/
 ### Список иконок (сгруппируй в Penpot по категориям):

 **Navigation (8)**
+
 - `nav/feed` — сетка карточек или стопка
 - `nav/matches` — сердце с двойным контуром или звёзды
 - `nav/chat` — облако диалога
@@ -228,6 +242,7 @@ MeetMe/
 - `nav/close` — крест

 **Actions (12)**
+
 - `action/like` — сердце
 - `action/dislike` — крест в круге или большой X
 - `action/superlike` — звезда
@@ -242,6 +257,7 @@ MeetMe/
 - `action/more` — три точки (горизонтальные)

 **Profile (8)**
+
 - `profile/age` — торт или число
 - `profile/location` — пин геолокации
 - `profile/height` — линейка роста
@@ -252,6 +268,7 @@ MeetMe/
 - `profile/tag` — тег/лейбл

 **Chat (8)**
+
 - `chat/read` — двойная галочка
 - `chat/delivered` — одна галочка
 - `chat/typing` — три точки анимированные
@@ -262,6 +279,7 @@ MeetMe/
 - `chat/report` — флажок

 **Status (6)**
+
 - `status/online` — зелёная точка
 - `status/pending` — часы
 - `status/confirmed` — галочка
@@ -270,6 +288,7 @@ MeetMe/
 - `status/limit` — замок или стоп-сигнал

 **Misc (6)**
+
 - `misc/filter` — воронка
 - `misc/search` — лупа
 - `misc/notification` — колокол
@@ -286,17 +305,20 @@ MeetMe/
 #### Button

 **Варианты (Property: variant)**
+
 - `primary` — brand-500 фон, белый текст
 - `secondary` — brand-100 фон, brand-700 текст
 - `ghost` — прозрачный фон, brand-600 текст
 - `destructive` — error фон, белый текст

 **Размеры (Property: size)**
+
 - `lg` — height 52px, padding 24px, radius-full, label-lg
 - `md` — height 44px, padding 20px, radius-full, label-lg
 - `sm` — height 36px, padding 16px, radius-md, label-sm

 **Состояния (Property: state)**
+
 - `default`, `hover`, `pressed`, `disabled`, `loading`

 **Иконка (Property: icon):** leading / trailing / icon-only
@@ -327,6 +349,7 @@ MeetMe/
 - Используется в профиле для отображения тегов интересов

 #### Divider
+
 - Горизонтальный, с опциональным текстом по центру («или»)

 ---
@@ -338,6 +361,7 @@ MeetMe/
 Основной компонент приложения. Полноэкранная карточка на мобиле.

 **Структура:**
+
 ```
 ┌─────────────────────────────┐
 │                             │
@@ -361,11 +385,13 @@ MeetMe/
 - Тени под текстом нет — только градиент

 **Действия (кнопки поверх карточки):**
+
 - Дизлайк — круглая кнопка 64px, нейтральный фон, иконка `action/dislike` в neutral-600
 - Лайк — круглая кнопка 64px, brand-500 фон, иконка `action/like` белый
 - Суперлайк (опционально) — 52px, янтарный, звезда

 **Свайп-оверлеи:**
+
 - Свайп вправо: зелёный бейдж «НРАВИТСЯ» в левом верхнем углу, наклон текста
 - Свайп влево: красный бейдж «ПРОПУСТИТЬ» в правом верхнем углу

@@ -417,6 +443,7 @@ MeetMe/
 #### FilterSheet (панель фильтров)

 Bottom sheet на мобиле, sidebar на десктопе.
+
 - Возраст: range slider (ageMin–ageMax)
 - Город: dropdown select
 - Район: dropdown select (зависимый)
@@ -430,6 +457,7 @@ Bottom sheet на мобиле, sidebar на десктопе.
 #### BottomNav (Mobile)

 Высота 83px (+ safe area). 5 вкладок:
+
 - Лента (`nav/feed`)
 - Матчи (`nav/matches`) — с бейджем
 - Чат (`nav/chat`) — с бейджем
@@ -445,6 +473,7 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 #### ProfileHeader

 Используется на экране публичного профиля.
+
 - Фото-галерея (swiper, точки-индикаторы)
 - Кнопка назад
 - Кнопка «Пожаловаться» (три точки → меню)
@@ -457,6 +486,7 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 #### MatchModal (bottom sheet / центральный модал)

 Появляется при взаимном лайке.
+
 - Анимированный фон (конфетти? мягкие частицы)
 - Два аватара с перекрытием
 - Заголовок: `display-xl` «Это матч!»
@@ -473,6 +503,7 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ### Авторизация

 **LoginView**
+
 - Логотип MeetMe (wordmark Playfair Display + иконка) по центру верхней трети
 - `display-xl`: «Рады видеть тебя»
 - Поля: телефон (+7), пароль
@@ -480,6 +511,7 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 - Ссылка: «Нет аккаунта? Зарегистрироваться»

 **RegisterView**
+
 - «Создай аккаунт»
 - Поля: телефон, пароль, подтверждение пароля
 - Кнопка: «Зарегистрироваться»
@@ -488,22 +520,26 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ### Онбординг

 **CreateProfileView — Шаг 1 (Основное)**
+
 - Прогресс-бар (3 шага)
 - «Расскажи о себе»
 - Поля: Имя, Дата рождения, Пол (radio-кнопки с иконками ♂ ♀)
 - CTA: «Далее»

 **CreateProfileView — Шаг 2 (Детали)**
+
 - Поля: Город (select), Район (select), Рост, Вес, Национальность
 - Описание (textarea, 300 символов)
 - CTA: «Далее»

 **CreateProfileView — Шаг 3 (Интересы)**
+
 - «Выбери до 10 интересов»
 - Chip grid из тегов (GET /tags)
 - CTA: «Готово»

 **MediaUploadView**
+
 - «Добавь фото»
 - 6 слотов в сетке 2×3, первый — обязательный (основное фото)
 - Плейсхолдер слота: `+` иконка, пунктирная рамка
@@ -513,18 +549,21 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ### Лента

 **FeedView**
+
 - Карточка профиля на весь экран (за вычетом статус-бара и BottomNav)
 - Вверху: логотип MeetMe (compact) + иконка фильтра + иконка уведомлений
 - Кнопки действий снизу карточки
 - Индикатор позиции (точки или счётчик «3 из 20»)

 **FeedView — Empty State**
+
 - Иллюстрация (простая, монолинейная, brand-200 цвет)
 - «Ты просмотрел всех»
 - «Попробуй позже или измени фильтры»
 - CTA: «Изменить фильтры»

 **FeedView — Limit Reached**
+
 - «У тебя 10 матчей»
 - «Пообщайся с ними, чтобы продолжить поиск»
 - CTA: «Перейти к матчам»
@@ -532,6 +571,7 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ### Матчи

 **MatchesView**
+
 - Заголовок «Матчи»
 - Horizontal scroll «Новые» — аватары в кружках (как в Instagram Stories)
 - Список MatchCard ниже — все матчи в хронологии
@@ -539,12 +579,14 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ### Чат

 **ChatsListView**
+
 - Заголовок «Сообщения»
 - Поиск по чатам
 - Список ChatListItem
 - Empty state: «Пока нет чатов. Напиши кому-нибудь из матчей!»

 **ChatView**
+
 - ChatHeader
 - Сообщения (с группировкой по датам — «Сегодня», «Вчера», дата)
 - Быстрые приветствия (горизонтальный скролл чипов, появляется при первом сообщении)
@@ -554,12 +596,14 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ### Встречи

 **DatesView**
+
 - Заголовок «Встречи»
 - Фильтр по статусу (таббар: Все / Ожидают / Подтверждены)
 - Список DateCard
 - Empty state: «Пока нет встреч. Договорись в чате!»

 **DateProposalSheet (bottom sheet)**
+
 - «Назначить встречу»
 - Поле: дата и время (date-time picker)
 - Карта или поле координат
@@ -568,17 +612,20 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ### Профиль

 **MyProfilesView**
+
 - «Мои профили»
 - Список профилей (аватар, имя, возраст)
 - Кнопка «Добавить профиль» (+ иконка)
 - Active badge на текущем профиле

 **ProfileEditView**
+
 - Редактирование с теми же полями что в создании
 - Секция «Медиа» — галерея с drag-to-reorder
 - Кнопка «Удалить профиль» (destructive, внизу)

 **ProfilePublicView**
+
 - ProfileHeader (фото-галерея)
 - Имя, возраст, геолокация
 - Описание
@@ -589,6 +636,7 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ### Настройки

 **SettingsView**
+
 - Аватар + имя аккаунта
 - Секции: Аккаунт, Уведомления, Безопасность, О приложении
 - Кнопка «Выйти» (destructive)
@@ -600,24 +648,29 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 Каждый фрейм 1440×900.

 **Общий Layout:**
+
 - Левая колонка: SideNav (240px, фиксированная)
 - Основная область: 1200px
 - Для чата: split-view — список (320px) + сообщения

 **FeedView Desktop**
+
 - SideNav слева
 - Центр: карточка профиля 420×560px (не во весь экран!)
 - Справа от карточки: детали профиля (имя, теги, описание) — 320px колонка
 - Кнопки под карточкой или справа

 **ChatsView Desktop**
+
 - SideNav | ChatList 320px | ChatMessages | (опционально ProfilePanel 280px)
 - Нет bottom sheet — поле ввода снизу в колонке сообщений

 **MatchesView Desktop**
+
 - Сетка 3 колонки из MatchCard

 **ProfileEditView Desktop**
+
 - Двухколоночный layout: форма | превью профиля

 ---
@@ -637,16 +690,19 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 Для каждого ключевого экрана создай:

 **Loading (Skeleton):**
+
 - ProfileCard skeleton: прямоугольник с animated shimmer
 - ChatListItem skeleton: аватар-круг + две строки

 **Empty States (с иллюстрацией):**
+
 - Лента пуста
 - Нет матчей
 - Нет чатов
 - Нет встреч

 **Error State:**
+
 - Что-то пошло не так + кнопка «Повторить»

 ---
@@ -654,6 +710,7 @@ Active state: иконка brand-500, лейбл brand-600, точка под и
 ## 11. ЛОГОТИП MEETME

 Создай wordmark:
+
 - Текст «MeetMe» шрифтом Playfair Display, 700 weight
 - «Meet» — neutral-900
 - «Me» — brand-500
@@ -694,6 +751,7 @@ Page 7: 🖥 Desktop Screens
 ```

 ### Именование в Penpot:
+
 - Компоненты: `ComponentName/variant/size/state`
 - Цвета: `brand/500`, `neutral/200`, `semantic/success`
 - Текстовые стили: `display/2xl`, `body/md`, `label/lg`
@@ -739,6 +797,7 @@ Page 7: 🖥 Desktop Screens
 ## Финальная проверка

 После завершения прогони аудит по impeccable:
+
 - Типографический контраст (все текстовые пары ≥ 4.5:1)
 - Touch targets на мобиле (≥ 44×44px)
 - Длина строк (45–75 символов для body text)