eslint --fix

promts/start-promt.md

@@ -1,4 +1,5 @@
 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
 
@@ -8,6 +9,7 @@ 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.
@@ -21,11 +23,13 @@ You are a Figma design expert. Create a complete component library and UI screen
 - 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
@@ -40,6 +44,7 @@ Mobile-first dating app (iOS/Android via Tauri). Users register by phone, create
 - 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
@@ -48,15 +53,19 @@ Mobile-first dating app (iOS/Android via Tauri). Users register by phone, create
 - 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
@@ -66,8 +75,10 @@ Mobile-first dating app (iOS/Android via Tauri). Users register by phone, create
 ## 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
@@ -76,8 +87,10 @@ Variants — size: [Large, Medium, Small] × style: [Primary, Secondary, Ghost,
 - 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)
@@ -85,9 +98,11 @@ Variants — state: [Default, Focused, Filled, Error]
 - 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:
@@ -100,13 +115,16 @@ Structure:
 - 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
@@ -114,11 +132,13 @@ 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)
@@ -126,7 +146,9 @@ Right: timestamp (Caption, text-muted) + unread count badge (accent circle, whit
 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
@@ -135,8 +157,10 @@ Variants — sender: [Me, Them] × type: [Text, Photo, Voice, Video]
 - 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
@@ -145,27 +169,32 @@ Center:
 - 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
@@ -180,6 +209,7 @@ 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
@@ -188,6 +218,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - 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)
@@ -197,12 +228,14 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - "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")
@@ -212,6 +245,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - "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
@@ -221,6 +255,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - "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
@@ -232,6 +267,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 ## 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)
@@ -239,11 +275,13 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - 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)
@@ -252,6 +290,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - BottomNav: Matches active
 
 **2.4 — Chats List**
+
 - "Chats" Title
 - 4 MatchChip items:
   - Sofia — "That place sounds perfect" — 14:32 — online dot
@@ -261,6 +300,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - 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
@@ -275,6 +315,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - 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
@@ -285,6 +326,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - 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)
@@ -294,6 +336,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - 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)
@@ -307,6 +350,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 ## 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:
@@ -321,6 +365,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - 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:
@@ -336,6 +381,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - "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:
@@ -345,6 +391,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - "Sign Out" Secondary Large button full-width bottom
 
 **3.4 — Feed Filters (bottom sheet)**
+
 - Handle bar
 - "Search Filters" Title
 - City dropdown (Moscow)
@@ -355,6 +402,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - "Apply Filters" Primary Large + "Reset" Ghost
 
 **3.5 — Report User (bottom sheet)**
+
 - Handle bar
 - "Report" Title
 - "Reporting Sofia, 24" Caption text-muted centered
@@ -364,7 +412,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
   · Inappropriate content
   · Harassment
   · Other
-- Description textarea "Add details (optional)..." 
+- Description textarea "Add details (optional)..."
 - "Submit Report" Danger Primary button
 - "Cancel" Ghost
 
@@ -373,6 +421,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 ## 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.
@@ -381,6 +430,7 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 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
@@ -390,4 +440,4 @@ Asymmetric compositions where mobile constraints allow. Every screen complete, p
 - 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.
+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.