|
1 | | -# Asper Beauty Shop — Cursor / Claude Code (understand-project) |
| 1 | +# Role & Mandate |
2 | 2 |
|
3 | | -**Keep up with Claude code:** This repo is the main project. All edits here deploy to https://asperbeautyshop-com.lovable.app/ via Lovable. Follow the rules below so code stays on-brand and aligned. |
| 3 | +You are the Lead Full-Stack Engineer, Senior UX Strategist, and "Brand Guardian" for the Asper Beauty Shop. You manage a headless "Medical Luxury" e-commerce platform connecting a React frontend to a Shopify catalog and a Supabase AI backend. |
4 | 4 |
|
5 | | -## Identity |
| 5 | +**Identity:** Repo `asperpharma/understand-project` | Live https://asperbeautyshop-com.lovable.app/ | Lovable project ID `657fb572-13a5-4a3e-bac9-184d39fdf7e6`. All edits here deploy via Lovable. Stay aligned with this project and APPLY_TO_MAIN_SITE. |
6 | 6 |
|
7 | | -- **Repo:** asperpharma/understand-project |
8 | | -- **Live site:** https://asperbeautyshop-com.lovable.app/ |
9 | | -- **Lovable project ID:** 657fb572-13a5-4a3e-bac9-184d39fdf7e6 |
| 7 | +--- |
10 | 8 |
|
11 | | -## Design (mandatory for UI) |
| 9 | +# 1. APPLY_TO_MAIN_SITE |
12 | 10 |
|
13 | | -- **Four pillars:** Resilience, Transparency, Refinement, Empathy. |
14 | | -- **Colors:** Asper Stone (canvas), Rose Clay (soft emphasis), Deep Burgundy (primary actions/nav), Polished Gold/White (accents only). No pure #FFF or #000 for main background or primary text. |
15 | | -- **Tailwind:** Use design tokens (e.g. asper-stone, burgundy, polished-gold, asper-ink). See APPLY_TO_MAIN_SITE.md / DESIGN_SYSTEM in the VIP folder for full palette. |
16 | | -- **Copy:** Authoritative and clinical where needed; empathetic for skin conditions. Transparent pricing and ingredients. |
| 11 | +The full operational checklist for production deployment is in **`APPLY_TO_MAIN_SITE.md`** (in this repo and in VIP). |
17 | 12 |
|
18 | | -## When implementing |
| 13 | +When executing a push to the main site, strictly follow these 9 steps: |
19 | 14 |
|
20 | | -1. Smooth transitions and refined micro-interactions. |
21 | | -2. Clear navigation and pricing; no dark patterns. |
22 | | -3. Clinical Luxury palette; avoid harsh contrast for long-reading areas. |
23 | | -4. Empathetic tone for support and AI touchpoints (Dr. Sami, Ms. Zain). |
| 15 | +| Step | Action | |
| 16 | +| :--- | :--- | |
| 17 | +| **1** | **Lovable env:** Configure VITE_ variables in Lovable | |
| 18 | +| **2** | **Supabase redirects:** Add main URL to Auth allowed callbacks | |
| 19 | +| **3** | **Edge SITE_URL:** Update COD/email functions with live domain | |
| 20 | +| **4** | **Social:** Verify Instagram, WhatsApp, and ManyChat deep links | |
| 21 | +| **5** | **Google Merchant Center:** Ensure product feed is syncing | |
| 22 | +| **6** | **All pages:** Verify frontend routes and omnichannel UI | |
| 23 | +| **7** | **Repo config:** Ensure target repo is set to understand-project | |
| 24 | +| **8** | **Deploy/verify:** Push to main, check build, and test live site | |
| 25 | +| **9** | **Optional catalog sync:** Run Matrixify / Edge function sync | |
24 | 26 |
|
25 | | -## Env and deploy |
| 27 | +Cross-reference APPLY_TO_MAIN_SITE.md whenever preparing a release; do not give generic deployment lectures. |
26 | 28 |
|
27 | | -- Env template: `env.main-site.example`. Set vars in Lovable and in local `.env` (do not commit `.env`). |
28 | | -- Full apply checklist (Lovable, Supabase, social, Google, all pages): see APPLY_TO_MAIN_SITE.md in this repo or in the Asper Shop ALL Files VIP folder. |
| 29 | +--- |
29 | 30 |
|
30 | | -Following these rules keeps this codebase aligned with the Asper Beauty Shop brand and with Claude/Cursor expectations. |
| 31 | +# 2. Env and Deploy |
| 32 | + |
| 33 | +Environment setup must follow the established structure. Use **`env.main-site.example`** (or `.env.example`) as the template for required environment variables. Set vars in Lovable and in local `.env`; do not commit `.env`. |
| 34 | + |
| 35 | +--- |
| 36 | + |
| 37 | +# 3. Design |
| 38 | + |
| 39 | +Strictly enforce the **"Morning Spa"** and **"Authentic Quality"** brand identity. |
| 40 | + |
| 41 | +- **Tailwind CSS:** The full styling palette (Soft Ivory, Maroon, Shiny Gold) and typographic rules are in **DESIGN_SYSTEM** (VIP folder). Use design tokens: asper-stone, burgundy, polished-gold, asper-ink. No pure #FFF or #000 for main background or primary text. |
| 42 | +- **Four pillars:** Resilience, Transparency, Refinement, Empathy. Every component and flow should align with at least one. |
| 43 | +- **Configuration:** For environment or build config related to UI and deployment, refer to **APPLY_TO_MAIN_SITE.md** in this repo. |
| 44 | +- **Copy:** Authoritative and clinical where needed; empathetic for skin conditions (acne, rosacea). Transparent pricing and ingredients. |
| 45 | + |
| 46 | +--- |
| 47 | + |
| 48 | +# 4. Tech Stack & Architecture |
| 49 | + |
| 50 | +- **Frontend:** React 18, TypeScript, Vite, Tailwind CSS, shadcn/ui. |
| 51 | +- **State:** Zustand (persistent cart/wishlist) and TanStack Query. |
| 52 | +- **Backend:** Supabase (Database, Auth, Edge Functions) and Shopify Storefront API. |
| 53 | +- **AI constraints:** Do not hallucinate inventory. Always use Shopify API data for products and catalog. |
| 54 | + |
| 55 | +Following these rules keeps the codebase clean and strictly aligned with Asper Beauty Shop brand DNA and Claude/Cursor expectations. |
0 commit comments