init

promts/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "penpot": {
+      "type": "http",
+      "url": "https://design.penpot.app/mcp/stream?userToken=eyJhbGciOiJBMjU2S1ciLCJlbmMiOiJBMjU2R0NNIn0.arEHE-Own_FRgRBlrv50DTgwt-8o0YE3guZD_9yuF_JCnys0aoZvtg.t06FeAkZTEGW-e-B.8z6Kz3Sk0X_eTtoZYWaA6BTV6F2-fuRkWo3jF3sKbmAPSDet7IyCY3-j4CUY6ZfGbuxgQ4RxODtbAPLlKEyLXruiW7GeI35Pj7hwMy2FZZrcwh2vLwfYcQZ4vvuz1uhWM_iEkzmzrWgfS9dO9SaANiitFwQT6ohiH4nf9s2eglcc8SfZg3_jn1d6bTvNWAV7A5ZtEqLSXYHx.qKEFnODJKD4usLguWcv6gg"
+    }
+  }
+}

promts/meetme-penpot-prompt.md

@@ -0,0 +1,748 @@
+# MeetMe — Дизайн-система в Penpot (Claude Code + MCP)
+
+## Предисловие
+
+Перед началом работы прочитай и усвой полностью:
+- `.claude/skills/impeccable/SKILL.md` и все 7 файлов из `reference/`
+- `.claude/skills/taste-skill/SKILL.md`
+
+Эти скиллы — не опциональные. Без них выйдет типичный AI-слоп: Inter везде, фиолетово-синие градиенты, карточки внутри карточек, серый текст на цветном фоне. Читай. Потом работай.
+
+---
+
+## Контекст проекта
+
+**MeetMe** — мобильное дейтинг-приложение (Vue 3 + Tauri 2). Пользователи регистрируются по телефону, создают несколько профилей, листают ленту, ставят лайки, получают матчи, переписываются в чате, договариваются о реальных встречах.
+
+Весь дизайн — **на русском языке**: лейблы, плейсхолдеры, заголовки, подписи, пустые состояния, сообщения об ошибках, CTA-кнопки.
+
+Два брейкпоинта:
+- **Mobile** — 390 × 844 px (iPhone 14 Pro как эталон)
+- **Desktop** — 1440 × 900 px
+
+---
+
+## Задача
+
+Создать в Penpot полноценный дизайн-проект **MeetMe** со следующей структурой:
+
+```
+MeetMe/
+├── 🎨 Foundations
+│   ├── Color Palette
+│   ├── Typography
+│   ├── Spacing & Grid
+│   ├── Elevation & Shadows
+│   └── Motion Tokens
+├── 🔷 Icons
+│   └── Icon Library (48+ иконок)
+├── 🧱 Components
+│   ├── Atoms
+│   ├── Molecules
+│   └── Organisms
+└── 📱 Screens
+    ├── Mobile (390px)
+    └── Desktop (1440px)
+```
+
+---
+
+## Айдентика и тон
+
+**Название:** MeetMe  
+**Характер:** тёплый, живой, немного дерзкий — не корпоративный. Как хорошее свидание: интересно, немного волнительно, красиво.  
+**Аудитория:** 22–35 лет, городские жители, ценят эстетику.  
+**Тон:** уверенный, человечный, без заигрывания. Не «найди любовь», а «встреть своего человека».
+
+---
+
+## 1. ЦВЕТОВАЯ ПАЛИТРА
+
+### Принципы (из impeccable color-and-contrast)
+- Все цвета определяй в **OKLCH** — предсказуемый контраст при изменении яркости
+- Нейтралы должны быть **тёплыми** (чуть красный/жёлтый подтон), не холодно-серыми
+- Избегай: синих оттенков по умолчанию, generic «brand purple», чистого чёрного/белого
+
+### Палитра MeetMe
+
+**Brand (основной акцент):**
+Тёплый терракотово-коралловый — не стандартный розовый Tinder, не красный. Живой, зрелый.
+```
+--color-brand-50:  oklch(97% 0.012 22)   /* почти белый с теплом */
+--color-brand-100: oklch(93% 0.030 22)
+--color-brand-200: oklch(86% 0.065 22)
+--color-brand-300: oklch(76% 0.110 22)
+--color-brand-400: oklch(66% 0.148 22)
+--color-brand-500: oklch(58% 0.172 22)   /* основной — #D4614A approx */
+--color-brand-600: oklch(50% 0.160 22)
+--color-brand-700: oklch(42% 0.140 22)
+--color-brand-800: oklch(32% 0.110 22)
+--color-brand-900: oklch(22% 0.075 22)
+```
+
+**Neutral (тёплые серые):**
+```
+--color-neutral-0:   oklch(100% 0 0)
+--color-neutral-50:  oklch(97% 0.004 60)
+--color-neutral-100: oklch(94% 0.008 60)
+--color-neutral-200: oklch(88% 0.012 60)
+--color-neutral-300: oklch(78% 0.016 60)
+--color-neutral-400: oklch(64% 0.014 60)
+--color-neutral-500: oklch(52% 0.012 60)
+--color-neutral-600: oklch(40% 0.010 60)
+--color-neutral-700: oklch(30% 0.008 60)
+--color-neutral-800: oklch(20% 0.006 60)
+--color-neutral-900: oklch(12% 0.004 60)
+```
+
+**Semantic:**
+```
+--color-success: oklch(62% 0.155 145)   /* зелёный — матч состоялся */
+--color-warning: oklch(78% 0.140 72)    /* янтарный — встреча pending */
+--color-error:   oklch(58% 0.180 15)    /* красный — ошибка */
+--color-info:    oklch(60% 0.130 240)   /* синий — уведомление */
+```
+
+**Поверхности (Light mode):**
+```
+--surface-page:      --color-neutral-50
+--surface-card:      --color-neutral-0
+--surface-elevated:  --color-neutral-0
+--surface-overlay:   oklch(12% 0.004 60 / 60%)
+```
+
+**Все токены фиксируй в Penpot как Color Styles**, организованные в группы: `brand/`, `neutral/`, `semantic/`, `surface/`.
+
+---
+
+## 2. ТИПОГРАФИКА
+
+### Принципы (из impeccable typography)
+- Не Inter. Никогда Inter как единственный шрифт.
+- Пара: выразительный дисплейный + читаемый текстовый
+- Модульная шкала, не произвольные размеры
+- Следи за tracking (letter-spacing) — по умолчанию он слишком тесный у большинства шрифтов
+
+### Выбор для MeetMe
+
+**Display / Headings:** `Playfair Display` (Google Fonts)  
+Причина: серифный, тёплый, немного романтичный. Хорошо работает в заголовках карточек профилей и экране матча. Контрастирует с современным гротеском основного текста.
+
+**Body / UI:** `Manrope` (Google Fonts)  
+Причина: геометрический гротеск с тёплым характером, отличная читаемость на маленьких размерах, хорошие кириллические глифы.
+
+### Типографическая шкала (модульная, 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 | Бейджи, чипы |
+
+**Все токены фиксируй в Penpot как Text Styles.**
+
+---
+
+## 3. SPACING & GRID
+
+### Шкала отступов (4px база)
+```
+--space-1:  4px
+--space-2:  8px
+--space-3:  12px
+--space-4:  16px
+--space-5:  20px
+--space-6:  24px
+--space-8:  32px
+--space-10: 40px
+--space-12: 48px
+--space-16: 64px
+--space-20: 80px
+```
+
+### Радиусы скругления
+```
+--radius-sm:   6px    /* чипы, теги */
+--radius-md:   12px   /* карточки, поля ввода */
+--radius-lg:   20px   /* карточки профиля */
+--radius-xl:   28px   /* модальные окна */
+--radius-full: 9999px /* кнопки, аватары */
+```
+
+### Грид Mobile (390px)
+- Колонки: 4
+- Гаттер: 16px
+- Отступы: 20px
+
+### Грид Desktop (1440px)
+- Колонки: 12
+- Гаттер: 24px
+- Отступы: 80px
+- Max content width: 1280px
+
+---
+
+## 4. ELEVATION & ТЕНИ
+
+Не используй `box-shadow: 0 4px 20px rgba(0,0,0,0.25)` — это AI-слоп.  
+Тени должны быть тёплыми и слоистыми.
+
+```
+--shadow-xs: 0 1px 2px oklch(12% 0.004 60 / 8%)
+--shadow-sm: 0 1px 3px oklch(12% 0.004 60 / 10%), 0 1px 2px oklch(12% 0.004 60 / 6%)
+--shadow-md: 0 4px 6px oklch(12% 0.004 60 / 7%), 0 2px 4px oklch(12% 0.004 60 / 6%)
+--shadow-lg: 0 10px 15px oklch(12% 0.004 60 / 8%), 0 4px 6px oklch(12% 0.004 60 / 5%)
+--shadow-xl: 0 20px 25px oklch(12% 0.004 60 / 8%), 0 8px 10px oklch(12% 0.004 60 / 4%)
+```
+
+**Карточка профиля** использует `--shadow-lg` + небольшой warm tint.
+
+---
+
+## 5. БИБЛИОТЕКА ИКОНОК
+
+Создай коллекцию **48 иконок** в едином стиле:
+- Стиль: **Outlined с rounded endpoints**, stroke 1.5–2px, 24×24 viewport
+- Никакого filled + outlined микса в одном экране
+- Все иконки — компоненты Penpot с именованием `icon/[category]/[name]`
+
+### Список иконок (сгруппируй в Penpot по категориям):
+
+**Navigation (8)**
+- `nav/feed` — сетка карточек или стопка
+- `nav/matches` — сердце с двойным контуром или звёзды
+- `nav/chat` — облако диалога
+- `nav/dates` — календарь с точкой
+- `nav/profile` — силуэт человека
+- `nav/settings` — шестерёнка или слайдеры
+- `nav/back` — стрелка влево
+- `nav/close` — крест
+
+**Actions (12)**
+- `action/like` — сердце
+- `action/dislike` — крест в круге или большой X
+- `action/superlike` — звезда
+- `action/send` — стрелка отправки
+- `action/attach` — скрепка
+- `action/camera` — камера
+- `action/microphone` — микрофон
+- `action/photo` — рамка изображения
+- `action/video` — видеокамера
+- `action/delete` — корзина
+- `action/edit` — карандаш
+- `action/more` — три точки (горизонтальные)
+
+**Profile (8)**
+- `profile/age` — торт или число
+- `profile/location` — пин геолокации
+- `profile/height` — линейка роста
+- `profile/weight` — весы
+- `profile/verified` — галочка в круге
+- `profile/add` — плюс в круге
+- `profile/switch` — стрелки обмена (смена профиля)
+- `profile/tag` — тег/лейбл
+
+**Chat (8)**
+- `chat/read` — двойная галочка
+- `chat/delivered` — одна галочка
+- `chat/typing` — три точки анимированные
+- `chat/audio` — волна аудио
+- `chat/emoji` — смайлик
+- `chat/date-proposal` — календарь с сердцем
+- `chat/greetings` — рука с приветствием
+- `chat/report` — флажок
+
+**Status (6)**
+- `status/online` — зелёная точка
+- `status/pending` — часы
+- `status/confirmed` — галочка
+- `status/cancelled` — крест
+- `status/match` — конфетти или двойное сердце
+- `status/limit` — замок или стоп-сигнал
+
+**Misc (6)**
+- `misc/filter` — воронка
+- `misc/search` — лупа
+- `misc/notification` — колокол
+- `misc/map-pin` — булавка карты
+- `misc/link` — цепочка
+- `misc/info` — буква i в круге
+
+---
+
+## 6. КОМПОНЕНТНАЯ БИБЛИОТЕКА
+
+### ATOMS
+
+#### 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
+
+#### Input
+
+- height 52px, radius-md, border 1.5px neutral-200
+- Лейбл над полем (floating label — анимируется при фокусе)
+- Состояния: `default`, `focused` (brand-500 border), `error` (error border + helper text), `disabled`, `filled`
+- Варианты: `text`, `password` (с кнопкой показа), `phone` (с префиксом +7), `search`
+
+#### Avatar
+
+- Размеры: 32px, 40px, 48px, 64px, 80px, 120px
+- Форма: круг
+- Состояния: с фото, инициалы (brand-100 фон), загрузка, онлайн-индикатор
+- Бейдж: счётчик уведомлений (правый верхний угол)
+
+#### Badge / Chip
+
+- `badge` — небольшой счётчик (число), brand или error
+- `chip` — тег с текстом, варианты: outline, filled; с иконкой или без; dismissible
+
+#### Tag (интересы)
+
+- Компактный чип с иконкой-эмодзи и текстом
+- `selected` / `unselected` состояния
+- Используется в профиле для отображения тегов интересов
+
+#### Divider
+- Горизонтальный, с опциональным текстом по центру («или»)
+
+---
+
+### MOLECULES
+
+#### ProfileCard (карточка в ленте)
+
+Основной компонент приложения. Полноэкранная карточка на мобиле.
+
+**Структура:**
+```
+┌─────────────────────────────┐
+│                             │
+│   [Фото профиля — bg]       │
+│                             │
+│                             │
+│  ╔═══════════════════════╗  │
+│  ║  Анна, 26             ║  │
+│  ║  📍 Москва, Арбат     ║  │
+│  ║  🏷 Путешествия  Йога ║  │
+│  ╚═══════════════════════╝  │
+└─────────────────────────────┘
+```
+
+- Фоновое фото занимает всю карточку
+- Снизу градиент `oklch(12% 0 0 / 0%)` → `oklch(12% 0 0 / 80%)` — 40% высоты
+- Имя: `display-lg` белый
+- Возраст: рядом с именем, `display-lg` `oklch(100% 0 0 / 75%)`
+- Геолокация: `body-md` белый, иконка `profile/location`
+- Теги: горизонтальный скролл чипов
+- Тени под текстом нет — только градиент
+
+**Действия (кнопки поверх карточки):**
+- Дизлайк — круглая кнопка 64px, нейтральный фон, иконка `action/dislike` в neutral-600
+- Лайк — круглая кнопка 64px, brand-500 фон, иконка `action/like` белый
+- Суперлайк (опционально) — 52px, янтарный, звезда
+
+**Свайп-оверлеи:**
+- Свайп вправо: зелёный бейдж «НРАВИТСЯ» в левом верхнем углу, наклон текста
+- Свайп влево: красный бейдж «ПРОПУСТИТЬ» в правом верхнем углу
+
+#### MessageBubble
+
+- Чужое сообщение: нейтральный фон, скругление `0 radius-lg radius-lg radius-lg`
+- Моё сообщение: brand-500 фон, белый текст, скругление `radius-lg 0 radius-lg radius-lg`
+- Время: `body-sm` neutral-400
+- Статус доставки: иконки `chat/delivered`, `chat/read`
+- Медиа-сообщение: превью фото/видео с rounded corners
+- Голосовое: волна + длительность + кнопка воспроизведения
+
+#### MatchCard (в списке матчей)
+
+```
+┌──────────────────────────────┐
+│ [Avatar 64px]  Анна, 26      │
+│                Москва        │
+│                ──────────    │
+│                Написать →    │
+└──────────────────────────────┘
+```
+
+- Горизонтальный layout
+- Левая часть: аватар с онлайн-индикатором
+- Правая: имя `heading-md`, город `body-sm` neutral-500, CTA `label-lg` brand-600
+- Правый край: время матча `body-sm` neutral-400
+
+#### ChatListItem
+
+```
+┌──────────────────────────────────────┐
+│ [Avatar 48px]  Анна            14:32 │
+│                Привет! Как дела?  [2]│
+└──────────────────────────────────────┘
+```
+
+- Аватар, имя, последнее сообщение (truncated), время, счётчик непрочитанных
+- Active state: brand-50 фон
+
+#### DateCard (встреча)
+
+- Иконка `nav/dates` brand-500
+- Имя партнёра, дата и время
+- Адрес/координаты
+- Status badge: `pending` (янтарный), `confirmed` (зелёный), `cancelled` (красный)
+- Действия: «Подтвердить» / «Отменить» / «Перенести»
+
+#### FilterSheet (панель фильтров)
+
+Bottom sheet на мобиле, sidebar на десктопе.
+- Возраст: range slider (ageMin–ageMax)
+- Город: dropdown select
+- Район: dropdown select (зависимый)
+- Теги: chip multi-select
+- CTA: «Применить фильтры», «Сбросить»
+
+---
+
+### ORGANISMS
+
+#### BottomNav (Mobile)
+
+Высота 83px (+ safe area). 5 вкладок:
+- Лента (`nav/feed`)
+- Матчи (`nav/matches`) — с бейджем
+- Чат (`nav/chat`) — с бейджем
+- Встречи (`nav/dates`)
+- Профиль (`nav/profile`)
+
+Active state: иконка brand-500, лейбл brand-600, точка под иконкой.
+
+#### SideNav (Desktop)
+
+Ширина 240px, фиксированная. Logo MeetMe сверху. Те же 5 пунктов + «Настройки». Имя и аватар активного профиля снизу с кнопкой смены.
+
+#### ProfileHeader
+
+Используется на экране публичного профиля.
+- Фото-галерея (swiper, точки-индикаторы)
+- Кнопка назад
+- Кнопка «Пожаловаться» (три точки → меню)
+- Информация профиля снизу
+
+#### ChatHeader
+
+- Назад, аватар + имя + онлайн-статус, три точки (закрыть чат / встреча / жалоба)
+
+#### MatchModal (bottom sheet / центральный модал)
+
+Появляется при взаимном лайке.
+- Анимированный фон (конфетти? мягкие частицы)
+- Два аватара с перекрытием
+- Заголовок: `display-xl` «Это матч!»
+- Подзаголовок: «Ты и Анна понравились друг другу»
+- CTA primary: «Написать Анне»
+- CTA ghost: «Продолжить поиск»
+
+---
+
+## 7. ЭКРАНЫ — MOBILE (390px)
+
+Создай фреймы для всех экранов в Penpot. Каждый экран — отдельный фрейм 390×844.
+
+### Авторизация
+
+**LoginView**
+- Логотип MeetMe (wordmark Playfair Display + иконка) по центру верхней трети
+- `display-xl`: «Рады видеть тебя»
+- Поля: телефон (+7), пароль
+- Кнопка primary `lg`: «Войти»
+- Ссылка: «Нет аккаунта? Зарегистрироваться»
+
+**RegisterView**
+- «Создай аккаунт»
+- Поля: телефон, пароль, подтверждение пароля
+- Кнопка: «Зарегистрироваться»
+- Ссылка: «Уже есть аккаунт? Войти»
+
+### Онбординг
+
+**CreateProfileView — Шаг 1 (Основное)**
+- Прогресс-бар (3 шага)
+- «Расскажи о себе»
+- Поля: Имя, Дата рождения, Пол (radio-кнопки с иконками ♂ ♀)
+- CTA: «Далее»
+
+**CreateProfileView — Шаг 2 (Детали)**
+- Поля: Город (select), Район (select), Рост, Вес, Национальность
+- Описание (textarea, 300 символов)
+- CTA: «Далее»
+
+**CreateProfileView — Шаг 3 (Интересы)**
+- «Выбери до 10 интересов»
+- Chip grid из тегов (GET /tags)
+- CTA: «Готово»
+
+**MediaUploadView**
+- «Добавь фото»
+- 6 слотов в сетке 2×3, первый — обязательный (основное фото)
+- Плейсхолдер слота: `+` иконка, пунктирная рамка
+- Подсказка: «Первое фото увидят все»
+- CTA: «Начать знакомства»
+
+### Лента
+
+**FeedView**
+- Карточка профиля на весь экран (за вычетом статус-бара и BottomNav)
+- Вверху: логотип MeetMe (compact) + иконка фильтра + иконка уведомлений
+- Кнопки действий снизу карточки
+- Индикатор позиции (точки или счётчик «3 из 20»)
+
+**FeedView — Empty State**
+- Иллюстрация (простая, монолинейная, brand-200 цвет)
+- «Ты просмотрел всех»
+- «Попробуй позже или измени фильтры»
+- CTA: «Изменить фильтры»
+
+**FeedView — Limit Reached**
+- «У тебя 10 матчей»
+- «Пообщайся с ними, чтобы продолжить поиск»
+- CTA: «Перейти к матчам»
+
+### Матчи
+
+**MatchesView**
+- Заголовок «Матчи»
+- Horizontal scroll «Новые» — аватары в кружках (как в Instagram Stories)
+- Список MatchCard ниже — все матчи в хронологии
+
+### Чат
+
+**ChatsListView**
+- Заголовок «Сообщения»
+- Поиск по чатам
+- Список ChatListItem
+- Empty state: «Пока нет чатов. Напиши кому-нибудь из матчей!»
+
+**ChatView**
+- ChatHeader
+- Сообщения (с группировкой по датам — «Сегодня», «Вчера», дата)
+- Быстрые приветствия (горизонтальный скролл чипов, появляется при первом сообщении)
+- Input bar: поле ввода + иконки: фото, голосовое, отправить
+- Кнопка «Назначить встречу» — плавающая или в меню чата
+
+### Встречи
+
+**DatesView**
+- Заголовок «Встречи»
+- Фильтр по статусу (таббар: Все / Ожидают / Подтверждены)
+- Список DateCard
+- Empty state: «Пока нет встреч. Договорись в чате!»
+
+**DateProposalSheet (bottom sheet)**
+- «Назначить встречу»
+- Поле: дата и время (date-time picker)
+- Карта или поле координат
+- CTA: «Отправить предложение»
+
+### Профиль
+
+**MyProfilesView**
+- «Мои профили»
+- Список профилей (аватар, имя, возраст)
+- Кнопка «Добавить профиль» (+ иконка)
+- Active badge на текущем профиле
+
+**ProfileEditView**
+- Редактирование с теми же полями что в создании
+- Секция «Медиа» — галерея с drag-to-reorder
+- Кнопка «Удалить профиль» (destructive, внизу)
+
+**ProfilePublicView**
+- ProfileHeader (фото-галерея)
+- Имя, возраст, геолокация
+- Описание
+- Теги (chips)
+- Рост, вес, национальность (иконки + значения)
+- Кнопки Лайк/Дизлайк (если это лента) или «Написать» (если это матч)
+
+### Настройки
+
+**SettingsView**
+- Аватар + имя аккаунта
+- Секции: Аккаунт, Уведомления, Безопасность, О приложении
+- Кнопка «Выйти» (destructive)
+
+---
+
+## 8. ЭКРАНЫ — DESKTOP (1440px)
+
+Каждый фрейм 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: форма | превью профиля
+
+---
+
+## 9. МОДАЛЬНЫЕ ОКНА И ОВЕРЛЕИ
+
+- **MatchModal** — центральный модал на десктопе, bottom sheet на мобиле
+- **FilterSheet** — right sidebar на десктопе, bottom sheet на мобиле
+- **DateProposalSheet** — аналогично
+- **ReportSheet** — «Пожаловаться»: тип жалобы (chips) + текстовое поле + «Отправить»
+- **ConfirmDialog** — удаление профиля, закрытие чата
+
+---
+
+## 10. ПУСТЫЕ СОСТОЯНИЯ И СОСТОЯНИЯ ЗАГРУЗКИ
+
+Для каждого ключевого экрана создай:
+
+**Loading (Skeleton):**
+- ProfileCard skeleton: прямоугольник с animated shimmer
+- ChatListItem skeleton: аватар-круг + две строки
+
+**Empty States (с иллюстрацией):**
+- Лента пуста
+- Нет матчей
+- Нет чатов
+- Нет встреч
+
+**Error State:**
+- Что-то пошло не так + кнопка «Повторить»
+
+---
+
+## 11. ЛОГОТИП MEETME
+
+Создай wordmark:
+- Текст «MeetMe» шрифтом Playfair Display, 700 weight
+- «Meet» — neutral-900
+- «Me» — brand-500
+- Опционально: небольшой знак — стилизованное «M» из двух сердец или двух силуэтов
+- Compact версия: только знак (для BottomNav, favicon)
+- Размеры: Full (для онбординга), Medium (для NavBar), Small / Icon-only
+
+---
+
+## 12. ОРГАНИЗАЦИЯ В PENPOT
+
+### Структура страниц:
+
+```
+Page 1: 🎨 Foundations
+  Frames: Color Palette | Typography Scale | Spacing | Shadows | Motion
+
+Page 2: 🔷 Icons
+  Frame: Icon Library (сетка 8×6, все 48 иконок с лейблами)
+
+Page 3: 🧱 Components — Atoms
+  Frames: Button | Input | Avatar | Badge | Chip | Tag | Divider
+
+Page 4: 🧱 Components — Molecules
+  Frames: ProfileCard | MessageBubble | MatchCard | ChatListItem | DateCard | FilterSheet
+
+Page 5: 🧱 Components — Organisms
+  Frames: BottomNav | SideNav | ProfileHeader | ChatHeader | MatchModal
+
+Page 6: 📱 Mobile Screens
+  390×844: Login | Register | CreateProfile (×3) | MediaUpload |
+           Feed | Feed Empty | Feed Limit | Matches | ChatsList |
+           Chat | Dates | DateProposal | MyProfiles | ProfileEdit |
+           ProfilePublic | Settings
+
+Page 7: 🖥 Desktop Screens
+  1440×900: Feed | Chat | Matches | ProfileEdit
+```
+
+### Именование в Penpot:
+- Компоненты: `ComponentName/variant/size/state`
+- Цвета: `brand/500`, `neutral/200`, `semantic/success`
+- Текстовые стили: `display/2xl`, `body/md`, `label/lg`
+- Иконки: `icon/nav/feed`, `icon/action/like`
+
+---
+
+## 13. ANTI-PATTERNS (не делай этого)
+
+Из impeccable — то, что категорически запрещено:
+
+- ❌ `font-family: Inter` как единственный шрифт
+- ❌ Градиент `purple → blue` в качестве акцента
+- ❌ `box-shadow: 0 4px 20px rgba(0,0,0,0.25)` — тёмная жирная тень
+- ❌ Карточки внутри карточек внутри карточек
+- ❌ `border-radius: 24px` на всём подряд
+- ❌ Серый текст на цветном фоне (проверяй контраст WCAG AA)
+- ❌ Bounce easing (cubic-bezier с выходом за 1)
+- ❌ «Плавающие» заголовки с декоративными линиями и иконками над каждым
+- ❌ Полупрозрачные карточки с `backdrop-filter: blur` везде
+- ❌ Все кнопки одинаковые, round, pill-shaped — нужна иерархия
+- ❌ Пустые состояния без иллюстрации и без конкретного CTA
+- ❌ Текст `color: #666` на белом фоне — не пройдёт WCAG
+
+---
+
+## 14. ПОРЯДОК РАБОТЫ
+
+1. **Foundations** — создай все токены как Penpot Styles (цвет, текст)
+2. **Icons** — нарисуй все 48 иконок, сохрани как компоненты
+3. **Логотип** — создай 3 версии
+4. **Atoms** — Button, Input, Avatar, Badge, Chip
+5. **Molecules** — ProfileCard, MessageBubble, MatchCard, ChatListItem, DateCard
+6. **Organisms** — BottomNav, SideNav, ProfileHeader, ChatHeader, MatchModal
+7. **Mobile screens** — собери все 17 экранов из компонентов
+8. **Desktop screens** — 4 ключевых экрана
+9. **States & Edge cases** — loading, empty, error для каждого экрана
+
+Не спрашивай подтверждения на каждый шаг — работай последовательно до полной готовности проекта.
+
+---
+
+## Финальная проверка
+
+После завершения прогони аудит по impeccable:
+- Типографический контраст (все текстовые пары ≥ 4.5:1)
+- Touch targets на мобиле (≥ 44×44px)
+- Длина строк (45–75 символов для body text)
+- Консистентность радиусов (не более 3 уровней на один экран)
+- Отступы кратны шкале (никаких «13px»)
+- Все состояния компонентов реализованы
+- Все иконки используются минимум на одном экране

promts/start-promt.md

@@ -0,0 +1,393 @@
+Before starting, read and internalize these two skills in full:
+- .claude/skills/impeccable/SKILL.md (and all 7 reference files in reference/)
+- .claude/skills/taste-skill/SKILL.md
+
+Apply Impeccable's design principles throughout. Apply Taste-skill's directives:
+DESIGN_VARIANCE: 8, MOTION_INTENSITY: 6, VISUAL_DENSITY: 4
+
+You are a Figma design expert. Create a complete component library and UI screens for a mobile dating app called "Tandem". Use the Figma MCP tools to build everything directly in Figma.
+
+## Anti-slop directives (from skills — enforce strictly)
+- NO Inter font anywhere. DM Sans is explicitly specified below and is the exception (brand choice).
+- NO centered hero layouts — use asymmetric, left-weighted compositions where possible within mobile constraints.
+- NO generic 3-equal-card rows. Use asymmetric grids, varied sizes, hierarchy through scale.
+- NO pure black (#000000). Use bg-primary: #0D0D0F as specified.
+- NO outer neon glows — use inner borders and tinted shadows only.
+- NO "John Doe" / "Jane Smith" names. Use: Sofia, Artem, Lena, Daniil, Masha, Igor, Alina, Max.
+- NO fake round numbers (50%, 99%). Use organic data: 47 matches, 12 meetups, etc.
+- NO emoji in UI text or button labels — use Phosphor or Radix icons instead.
+- NO Lorem Ipsum — all copy must be contextual and concrete.
+- NO generic card overuse — use elevation only where hierarchy demands it.
+- Image placeholders: use picsum.photos/seed/{name}/800/600 format (never Unsplash links).
+
+## Project overview
+Mobile-first dating app (iOS/Android via Tauri). Users register by phone, create profiles, swipe a feed, match, chat in real-time (text/photo/voice/video), schedule meetups, report users.
+
+## Design system — establish FIRST before any screens
+
+### Color tokens (create as Figma variables)
+- bg-primary: #0D0D0F
+- bg-surface: #1A1A1F
+- bg-elevated: #242429
+- accent: #FF4D6D
+- accent-soft: #FF4D6D1A
+- gold: #F5A623
+- text-primary: #F5F5F7
+- text-secondary: #8E8E9A
+- text-muted: #4A4A55
+- success: #30D158
+- error: #FF453A
+- border: #2C2C35
+
+### Typography
+- Display/Hero: Playfair Display Italic, 32–48px (editorial moments only — match celebrations, onboarding headers)
+- Title: DM Sans SemiBold, 20–24px, tracking-tight
+- Body: DM Sans Regular, 15–16px, leading-relaxed
+- Caption: DM Sans Regular, 12–13px, text-secondary
+- Button: DM Sans Medium, 15px
+- Mono data (stats, counts, timestamps): DM Mono or DM Sans Tabular Numbers
+
+### Taste-skill typography enforcement:
+- Headlines use tracking-tighter. No oversized H1s that scream.
+- Control hierarchy through weight and color, not scale alone.
+- Playfair Display is brand-intentional (editorial register) — use sparingly.
+
+### Spacing scale: 4, 8, 12, 16, 20, 24, 32, 48px
+### Border radius: sm=8, md=16, lg=24, full=999px
+### Safe areas: top=44px, bottom=34px (iPhone)
+
+### Shadow / elevation (taste-skill materiality rules):
+- Shadows are ALWAYS tinted to the background hue, never pure black
+- No outer glows. Use inner border (1px border-white/10) + inner shadow for glass surfaces
+- Cards appear only where elevation communicates hierarchy
+
+---
+
+## Component library (create as Figma components with variants)
+
+### 1. Buttons
+Component: Button
+Variants — size: [Large, Medium, Small] × style: [Primary, Secondary, Ghost, Danger]
+- Large: full-width, height 56px, border-radius 16px
+- Primary: bg=accent, text=white. Active state: scale(0.98) — physical press feel
+- Secondary: bg=bg-elevated, border=1px border-color, text=text-primary
+- Ghost: transparent bg, text=accent
+- Danger: bg=error
+- ALL buttons: no outer glow. Primary shadow = tinted coral shadow beneath
+
+### 2. Input field
+Component: InputField
+Variants — state: [Default, Focused, Filled, Error]
+- Height 56px, bg=bg-elevated, border-radius=12px, 1px border=border-color
+- Focused: 1.5px border=accent, subtle inner shadow accent-soft
+- Label sits above input (never placeholder-only)
+- Error: border=error + inline error text below (never toast for form errors)
+- Optional: left icon, right icon/clear
+
+### 3. Profile Card (hero swipe card)
+Component: ProfileCard
+Size: 340×480px
+Structure:
+- Full-bleed photo background. Gradient overlay: bottom 50%, black 0%→75%
+- Photo: picsum.photos/seed/sofia/400/600 style
+- Bottom section over gradient:
+  - Name + age: Playfair Display Italic 28px, white (e.g. "Sofia, 24")
+  - City + distance: pill, bg=rgba(255,255,255,0.15), blur backdrop
+  - 3 tag pills: bg=rgba(255,255,255,0.10), border rgba(255,255,255,0.20)
+  - Bio: 2 lines max, text-secondary, DM Sans Regular 14px
+- Top-right: report icon button (ghost, small, icon only — no emoji)
+- Variants: [Default, Liked (green tinted overlay + heart stamp), Disliked (red overlay + ✕), Superlike (gold glow)]
+- Card stack illusion: 2 cards partially peeking behind, scale-down + slight translate
+
+### 4. SwipeActions
+Three buttons row, centered:
+- Dislike: 64px circle, bg=bg-elevated, X icon (accent red), tinted shadow below
+- SuperLike: 52px circle, bg=gold 10% opacity, star icon (gold), smaller
+- Like: 64px circle, accent gradient, heart icon white, shadow tinted coral
+- No labels — icons only, phosphor style
+
+### 5. BottomNav
+Height 83px (inc 34px safe area), bg=bg-surface, 1px top border=border-color
+5 tabs: Feed (flame), Matches (heart), Chats (message-circle), Dates (calendar), Profile (user)
+Active: icon+label=accent, 2px accent indicator dot above icon
+Inactive: text-muted
+Labels: DM Sans Regular 11px
+
+### 6. Avatar
+Variants — size: [XL=80px, L=56px, M=40px, S=32px] × state: [Default, Online, Verified]
+Online: 10px green dot (#30D158) bottom-right, 2px white border around dot
+Verified: small accent checkmark badge bottom-right instead
+
+### 7. MatchChip
+Height 72px, full-width, bg=bg-surface, subtle 1px border bottom=border-color
+Left: Avatar M + Online indicator
+Center: Name (DM Sans SemiBold 15px) + last message preview (text-muted, 1 line, 13px)
+Right: timestamp (Caption, text-muted) + unread count badge (accent circle, white number)
+Pressed state: bg=bg-elevated
+
+### 8. MessageBubble
+Variants — sender: [Me, Them] × type: [Text, Photo, Voice, Video]
+- Me: right-aligned, bg=accent, text=white, radius 18 18 4 18
+- Them: left-aligned, bg=bg-elevated, text=text-primary, radius 18 18 18 4
+- Voice: horizontal bar waveform (10–12 bars, varying heights) + duration + play circle icon
+- Photo: 200×150 rounded image, tap icon overlay
+- Timestamp + read checkmarks (icon, not emoji) below, text-muted 11px
+- Max width: 72% of screen
+
+### 9. MatchModal
+Full-screen, bg=rgba(0,0,0,0.85), backdrop blur
+Center:
+- "It's a Match!" Playfair Display Italic 40px, white (no emoji — use decorative SVG spark icon)
+- Two Avatar XL overlapping, gold border 2px, inner glow tinted gold
+- Subtitle: "You and Sofia both liked each other" — text-secondary, DM Sans Regular
+- Primary: "Say Hello" button
+- Ghost: "Keep Swiping"
+- Static confetti: geometric shapes (circles, triangles, small rectangles) in accent/gold/white scattered around, no emoji stars
+
+### 10. TagPill
+Variants — selected: [true, false]
+Default: bg=bg-elevated, border=border, text=text-secondary, h=32px, px=12px, radius=full
+Selected: bg=accent-soft, border=accent, text=accent
+
+### 11. SectionHeader
+Left: Title + optional Caption subtitle
+Right: optional "See all" in accent (DM Sans Medium 13px)
+
+### 12. GreetingCard
+bg=bg-elevated, border-radius=16px, p=16px
+Top-left: decorative quote mark in accent (SVG, not emoji)
+Body text: italicized, text-primary
+Pressed: 1px accent border appears
+
+### 13. DateCard
+Full-width, bg=bg-elevated, radius=16px, p=16px
+Left: 48px accent circle with calendar icon (phosphor)
+Right: Partner name (SemiBold 15px), date+time (Caption), location (text-muted Caption)
+Bottom-right: status pill — Pending=gold bg+text, Confirmed=success, Cancelled=error, Rescheduled=text-secondary
+
+### 14. Toast
+Variants: [Success, Error, Info, Warning]
+Bottom of screen, mx=16px, bg=bg-elevated, 3px left border in status color
+Left: status icon (phosphor) in status color
+Right: message text DM Sans Regular 14px
+Bottom: auto-dismiss progress line
+
+---
+
+## PAGE 1 — "01 · Auth & Onboarding" (390×844px frames, 40px gap)
+
+Apply /impeccable craft principles: shape UX first, then build.
+Asymmetric compositions where mobile constraints allow. Every screen complete, production-ready.
+
+**1.1 — Splash / Welcome**
+- Full bg-primary background
+- Bottom-left: large abstract soft gradient blob in accent (#FF4D6D), heavily blurred (no hard edges)
+- Center: geometric logo mark (abstract spark/connection shape, SVG — no emoji) + "Tandem" Playfair Display Italic 48px
+- Tagline: "Meet someone real." text-secondary (concrete verb, not "Elevate your connections")
+- Bottom: "Get Started" Primary Large + "Sign In" Ghost button
+- Subtle grain texture on background (fixed pseudo-element concept)
+
+**1.2 — Register**
+- Back arrow (phosphor) + "Create account" Title
+- Subtitle: "Your number stays private." (concrete reassurance, not generic)
+- Phone input with country code selector (+7 flag)
+- Password input with show/hide toggle icon
+- Confirm password input
+- "Create Account" Primary Large
+- "Already registered? Sign in" text-secondary centered bottom
+
+**1.3 — Login**
+- Back arrow + "Welcome back" Title
+- Phone + password inputs
+- "Sign In" Primary Large
+- "Forgot password?" ghost link centered, text-secondary
+
+**1.4 — Profile Setup Step 1/3**
+- 3-segment progress bar, segment 1 active (accent), others text-muted
+- "Tell us about you" Playfair Display Italic Title (editorial register)
+- Name input (filled: "Alina")
+- Birth date field (filled: "June 15, 1995")
+- Gender selector: two large toggle cards side by side with phosphor icons (person/person)
+- City dropdown (filled: "Moscow")
+- "Continue" Primary Large
+
+**1.5 — Profile Setup Step 2/3**
+- Segment 2 active
+- "What moves you?" (concrete, not "What are you into?")
+- "Pick up to 5" Caption subtitle
+- 4-column wrapping tag grid, 12 tags, 4 selected:
+  Selected: Hiking, Jazz, Travel, Books
+  Unselected: Coffee, Cooking, Cinema, Yoga, Photography, Surfing, Art, Running
+- "Continue" Primary Large
+
+**1.6 — Profile Setup Step 3/3**
+- Segment 3 active
+- "Show yourself" Playfair Display Italic Title
+- Upload zone 340×260: dashed 1.5px accent border, camera phosphor icon, "Tap to add a photo" Caption
+- Grid: 1 large slot (filled with placeholder) + 4 small slots (2 empty, styled with dashed accent mini-borders)
+- "Finish" Primary Large
+
+---
+
+## PAGE 2 — "02 · Main App" (390×844px frames, 40px gap)
+
+**2.1 — Feed**
+- Status bar 44px
+- Top bar: small "Tandem" wordmark left (Playfair Display Italic 18px), sliders/filter icon right + Avatar M right
+- ProfileCard centered, card stack visible (2 cards peeking: scale 0.95 and 0.90, translate-y)
+- SwipeActions below card
+- BottomNav: Feed active
+
+**2.2 — Feed + Match Modal**
+- Same feed, blurred/dimmed beneath
+- MatchModal overlay. Avatars: Sofia + current user. Gold border glow (inner, not outer).
+- Static confetti in corners (geometric, not emoji)
+
+**2.3 — Matches List**
+- "Matches" Title top bar + filter icon
+- Horizontal scroll: 5 Avatar L circles with name below. First: gold ring border + "New" pill (gold). Use names: Lena, Sofia, Masha, Alina, Katya
+- Divider line (1px border-color)
+- "Conversations" SectionHeader
+- 4 MatchChip items. One with 3 unread badge. Names: Artem, Daniil, Max, Igor
+- BottomNav: Matches active
+
+**2.4 — Chats List**
+- "Chats" Title
+- 4 MatchChip items:
+  - Sofia — "That place sounds perfect" — 14:32 — online dot
+  - Lena — "typing..." italic text-secondary — 14:28
+  - Masha — "haha definitely" — Yesterday
+  - Alina — "Thanks for the recommendation" — Mon — 2 unread
+- BottomNav: Chats active
+
+**2.5 — Chat View (with Sofia)**
+- Top: back arrow + Avatar M (Sofia, online) + "Sofia" Title + "Online" Caption green + video-call icon + report icon
+- Messages:
+  - Date divider: "Today" centered Caption text-muted
+  - GreetingCard bubble: "What's your favorite hidden spot in the city?" (dashed accent border)
+  - Them (Sofia): "Oh I love this question! There's this tiny jazz bar on Arbat..."
+  - Me: "I had no idea that place existed, we should go"
+  - Them: "Yes! Saturday works for me 🎷" — wait, no emoji in UI — show as text
+  - Photo bubble (Them): picsum placeholder 200×150
+  - Voice bubble (Me): waveform bars + "0:23" + play icon
+  - Typing indicator: 3 animated dots (static in Figma)
+- Bottom input bar: bg=bg-surface, attach icon + "Message Sofia..." field + mic icon + send button (accent circle + arrow icon)
+- BottomNav: Chats active
+
+**2.6 — Public Profile (Sofia)**
+- Photo area top: full-width, 380px height, 2-photo carousel with dots + "2/4" pill top-right
+- Back arrow top-left (on photo) + report icon top-right (both on photo, ghost style)
+- Below photo: "Sofia, 24" Title + "Moscow · 2.3 km" Caption + verified badge
+- Bio: "Architect by day, jazz fan by night. Looking for someone to explore the city with."
+- Tags row horizontal scroll: Hiking, Jazz, Travel, Books, Cinema
+- Stats row: 3 small info cards — Height: 168 cm, Nation: Russian, Sign: Libra
+- Photo grid 2-col: 2 additional picsum photos
+- Sticky bottom: Dislike (Secondary) + "Like" (Primary accent) side by side
+
+**2.7 — Dates/Meetups**
+- "Meetups" Title + "+" phosphor icon
+- SectionHeader "Upcoming"
+- DateCard 1: Daniil · Sat, Jun 14 · 19:00 · Blue Goose Bar, Kamergersky · Confirmed (green)
+- DateCard 2: Sofia · Sun, Jun 15 · 14:00 · Gorky Park, Main entrance · Pending (gold)
+- SectionHeader "Past"
+- DateCard 3: Max · May 28 · Coffee Bean · Cancelled (error, dimmed 60% opacity)
+- BottomNav: Dates active
+
+**2.8 — Propose Meetup (bottom sheet)**
+- Handle bar 4px, 36px wide, centered, text-muted
+- "Propose a Meetup" Title
+- Sofia Avatar M + "Sofia" centered below (Caption)
+- Location input with map-pin phosphor icon (placeholder: "Coffee shop, park, gallery...")
+- Date+time field (filled: "Sat, Jun 14 · 19:00")
+- "Send Proposal" Primary Large
+- "Cancel" Ghost button
+
+---
+
+## PAGE 3 — "03 · Profile & Settings" (390×844px frames, 40px gap)
+
+**3.1 — My Profile**
+- "My Profile" Title + settings gear icon right
+- Profile selector: horizontal scroll of compact cards 80×100, first (Alina) has accent border, others dimmed. Last: dashed border + "+" add
+- Active profile:
+  - Cover photo full-width 200px, rounded corners (picsum placeholder)
+  - Avatar XL overlapping bottom of cover, centered, white ring border
+  - "Alina, 26" Title centered
+  - "Edit Profile" Secondary button
+  - Stats row: Likes / 47 | Matches / 12 | Meetups / 3 (numbers in accent, labels Caption — tabular numbers, organic values)
+  - Tags: horizontal scroll
+  - About: "Architect by day, jazz fan by night. Looking for someone genuine." DM Sans Regular 15px
+  - Media: 2-col grid, first item has play icon overlay (video)
+- BottomNav: Profile active
+
+**3.2 — Edit Profile**
+- Back arrow + "Edit Profile" Title + "Save" accent text button right
+- Avatar XL with camera icon overlay circle (bg-elevated)
+- Scrollable form:
+  - Name (filled: "Alina")
+  - Birth date (filled: "Jun 15, 1995")
+  - Gender toggle
+  - City / District dropdowns (filled: "Moscow / Arbat")
+  - Description textarea "Architect by day, jazz fan by night. Looking for someone genuine to explore the city with." + "143/300" counter Caption text-muted
+  - Height / Weight in a row (168 cm / 54 kg)
+  - Nation input (filled: "Russian")
+  - Tags grid (same as onboarding step 2, some selected)
+  - "Add Media" section: 1 large + 4 small slots
+- "Delete Profile" Danger Ghost button (bottom, error color, no icon)
+
+**3.3 — Settings**
+- "Settings" Title
+- User row: Avatar M + "+7 (916) 847-2391" + "Edit account" accent link
+- Setting groups with 1px dividers:
+  "Account": Change Password · Notifications (toggle ON) · Language (Russian)
+  "Privacy": Who can see me (Everyone) · Block list
+  "Danger zone": "Delete account" error-colored text row
+- "Sign Out" Secondary Large button full-width bottom
+
+**3.4 — Feed Filters (bottom sheet)**
+- Handle bar
+- "Search Filters" Title
+- City dropdown (Moscow)
+- District dropdown (dimmed, placeholder "Select district")
+- Age range: dual-handle slider "21 — 34" (organic range)
+- Keywords input with search icon
+- Interests TagPill grid (same tags, 3 selected: Jazz, Travel, Hiking)
+- "Apply Filters" Primary Large + "Reset" Ghost
+
+**3.5 — Report User (bottom sheet)**
+- Handle bar
+- "Report" Title
+- "Reporting Sofia, 24" Caption text-muted centered
+- Radio list (styled rows with custom radio circles in accent):
+  · Fake profile
+  · Spam or self-promotion
+  · Inappropriate content
+  · Harassment
+  · Other
+- Description textarea "Add details (optional)..." 
+- "Submit Report" Danger Primary button
+- "Cancel" Ghost
+
+---
+
+## Final instructions (Impeccable + Taste-skill enforcement)
+
+**Sequence:**
+1. Create all color variables and text styles.
+2. Run `/impeccable teach` mentally — establish DESIGN.md context (dark luxury premium dating, not hookup app).
+3. Create every component as a Figma component with all variants.
+4. Build the three pages with all screens.
+5. After first pass, run `/impeccable audit` mentally — check: a11y contrast ratios, spacing consistency, touch target sizes (min 44×44px).
+6. Run `/impeccable polish` — final pass: alignment, shadow consistency, border-radius uniformity.
+
+**Quality gates (Taste-skill Pre-flight):**
+- Every interactive element has Default + Pressed states at minimum
+- No card where spacing would suffice
+- Shadows tinted to bg hue
+- No pure black anywhere
+- Touch targets ≥ 44×44px
+- All placeholder content: organic names, organic numbers, real-feeling copy
+- Photo placeholders: picsum.photos/seed/{name}/400/600 (sofia, lena, masha, daniil, artem)
+
+**Aesthetic directive:**
+Dark luxury. Warm coral accent. The refinement of a premium product — not a hookup app, not a social network. Think: the design confidence of Locket or BeReal's intentionality, the premium feel of a high-end financial app, applied to human connection.

promts/start2.md

@@ -0,0 +1,121 @@
+Read and apply these skills before starting:
+- .claude/skills/impeccable/SKILL.md
+- .claude/skills/taste-skill/SKILL.md
+
+DESIGN_VARIANCE: 8, MOTION_INTENSITY: 6, VISUAL_DENSITY: 4
+
+You are a Penpot design expert building a mobile dating app "Tandem".
+Work in a single Penpot page. Layout everything horizontally in one continuous canvas. Use penpot mcp.
+
+## EFFICIENCY RULES (critical — minimize MCP calls)
+- Create ALL color variables in one batch operation
+- Create ALL text styles in one batch operation  
+- Create components in logical groups, not one-by-one
+- Screens go into one frame row, left to right, 40px gaps
+- Do NOT switch pages — one page only
+- If you hit a rate limit, pause and report what's done vs pending
+
+## PRIORITY ORDER — stop if rate-limited, complete in order:
+
+### PHASE 1 — Design tokens (do first, everything depends on this)
+Color variables:
+bg-primary #0D0D0F, bg-surface #1A1A1F, bg-elevated #242429,
+accent #FF4D6D, accent-soft #FF4D6D1A, gold #F5A623,
+text-primary #F5F5F7, text-secondary #8E8E9A, text-muted #4A4A55,
+success #30D158, error #FF453A, border #2C2C35
+
+Text styles:
+- Display: Playfair Display Italic 40px (editorial moments only)
+- Title: DM Sans SemiBold 22px tracking-tight
+- Body: DM Sans Regular 15px
+- Caption: DM Sans Regular 12px, text-secondary
+- Button: DM Sans Medium 15px
+
+### PHASE 2 — Core components (minimum viable set, batch-create)
+Build these 6 first — screens depend on them:
+
+1. Button/Primary — 56px height, radius 16, bg=accent, DM Sans Medium 15px white. Variants: Large/Medium
+2. InputField — 56px height, radius 12, bg=bg-elevated, border 1px border-color. Variants: Default/Focused/Error
+3. ProfileCard — 340×480px. Full-bleed photo bg (picsum.photos/seed/sofia/340/480), bottom gradient overlay, Name+age in Playfair Display Italic 28px white, city pill, 3 tag pills, bio 2 lines. Top-right report icon.
+4. SwipeActions — 3 circles in a row: Dislike 64px (bg-elevated, X icon), SuperLike 52px (gold tint, star icon), Like 64px (accent gradient, heart icon)
+5. BottomNav — 390×83px, bg=bg-surface, top border 1px, 5 tabs: Feed/Matches/Chats/Dates/Profile. Active=accent
+6. Avatar — Circle crop. Variants: XL 80px / L 56px / M 40px, with Online green dot state
+
+### PHASE 3 — Secondary components (if quota allows)
+7. MatchChip — 72px height, Avatar M + name + last message + timestamp + unread badge
+8. MessageBubble — Me: right, bg=accent. Them: left, bg=bg-elevated. Variants: Text/Voice
+9. TagPill — h=32px, radius=full. Variants: Default (bg-elevated) / Selected (accent-soft + accent border)
+10. Toast — bg=bg-elevated, left border 3px, icon + message. Variants: Success/Error/Info
+11. MatchModal — full-screen overlay, "It's a Match!" Playfair 40px, two XL avatars gold border, 2 buttons
+12. DateCard — bg-elevated, radius 16, calendar icon circle, partner name+date+location, status pill
+
+### PHASE 4 — Screens (one frame per screen, 390×844px, horizontal row, 40px gap)
+Label each frame. Use components from Phase 2–3.
+
+**Auth group (screens A1–A6):**
+
+A1 · Splash — bg-primary full, accent blob bottom-left (blurred ellipse), "Tandem" Playfair Italic 48px center, tagline "Meet someone real." text-secondary, Get Started (Primary) + Sign In (Ghost) buttons bottom
+
+A2 · Register — Back arrow, "Create account" Title, phone input (+7 prefix), password input, confirm password, "Create Account" Primary button, "Sign in" ghost link bottom
+
+A3 · Login — Back arrow, "Welcome back" Title, phone input, password input, "Sign In" Primary, "Forgot password?" ghost centered
+
+A4 · Profile Step 1/3 — 3-segment progress (1 active), "Tell us about you" Display, Name/Birthday/Gender toggle/City inputs, Continue button
+
+A5 · Profile Step 2/3 — Segment 2 active, "What moves you?" Title, 4-col tag grid (12 tags, 4 selected: Hiking/Jazz/Travel/Books), Continue
+
+A6 · Profile Step 3/3 — Segment 3 active, "Show yourself" Display, upload zone 340×260 dashed accent border, 1 large + 4 small photo slots, Finish button
+
+**Main app group (screens B1–B8):**
+
+B1 · Feed — Status bar, top bar (Tandem wordmark + filter icon + Avatar M), ProfileCard centered with card stack behind, SwipeActions below, BottomNav Feed active
+
+B2 · Feed + Match — Same as B1 dimmed, MatchModal overlay: "It's a Match!" Playfair 40px, Sofia+user avatars gold border, "Say Hello" + "Keep Swiping" buttons
+
+B3 · Matches — "Matches" Title, horizontal avatar row (5 avatars L, first gold ring "New"), divider, 4 MatchChip rows (Artem/Daniil/Max/Igor), BottomNav Matches active
+
+B4 · Chats — "Chats" Title, 4 MatchChip rows: Sofia (online, "That place sounds perfect"), Lena (typing…), Masha ("haha definitely"), Alina (2 unread badge), BottomNav Chats active
+
+B5 · Chat View — Top: back + Sofia Avatar M + "Online" + video icon. Messages: date divider, greeting card bubble, 4 alternating bubbles, voice bubble (Me), typing dots. Bottom input bar. BottomNav Chats active
+
+B6 · Public Profile — Photo 390×380 carousel top, back+report icons on photo, "Sofia, 24" + city + verified, bio, tags row, stats row (168cm/Russian/Libra), 2-col photo grid, sticky bottom Dislike+Like buttons
+
+B7 · Meetups — "Meetups" Title + "+" icon, 2 DateCards upcoming (Confirmed+Pending), 1 DateCard past (Cancelled dimmed), BottomNav Dates active
+
+B8 · Propose Meetup (bottom sheet) — Handle bar, "Propose a Meetup" Title, Sofia avatar+name, location input, date+time field, Send Proposal Primary, Cancel Ghost
+
+**Profile group (screens C1–C5):**
+
+C1 · My Profile — "My Profile" Title, profile selector scroll (Alina active), cover photo, Avatar XL overlapping, "Alina, 26", Edit button, stats row (47 Likes / 12 Matches / 3 Meetups), tags, bio, media grid, BottomNav Profile active
+
+C2 · Edit Profile — Back + "Edit Profile" + Save. Avatar with camera overlay. Form: Name/Birthday/Gender/City/Bio textarea (143/300 counter)/Height+Weight row/Nation/Tags/Media grid/Delete Profile danger button
+
+C3 · Settings — "Settings" Title, user row (Avatar M + phone number + edit link), grouped list rows with dividers (Account/Privacy/Danger zone sections), Sign Out Secondary button
+
+C4 · Feed Filters (bottom sheet) — Handle, "Search Filters" Title, City/District dropdowns, age range slider (21–34), keywords input, tags grid (3 selected), Apply Filters Primary + Reset Ghost
+
+C5 · Report (bottom sheet) — Handle, "Report" Title, "Reporting Sofia, 24" caption, 5 radio reasons (Fake/Spam/Inappropriate/Harassment/Other), details textarea, Submit Report Danger Primary, Cancel Ghost
+
+---
+
+## Design principles (enforced throughout)
+
+**Visual language — dark luxury:**
+- Shadows always tinted to bg hue, never pure black drop shadows
+- No outer glows — inner borders (1px rgba(255,255,255,0.08)) on elevated surfaces
+- Cards only where elevation communicates hierarchy
+- Spacing > cards where possible
+
+**Anti-slop rules:**
+- No pure #000000 anywhere
+- No Inter font
+- No centered hero on non-splash screens
+- No generic 3-equal-card rows
+- Placeholder images: picsum.photos/seed/{name}/W/H (sofia, lena, masha, artem, daniil)
+- Organic numbers: 47 matches, 12 meetups, 143/300, +7 (916) 847-2391
+- No emoji in UI — phosphor-style icons only
+- Real copy: "Meet someone real." not "Elevate your connections."
+
+**Touch targets:** All interactive elements minimum 44×44px
+
+**Aesthetic:** Premium dating app. The design confidence of a high-end product — refined, warm, intentional.