Skip to content

Commit 2b62b5d

Browse files
asperpharmaclaude
andcommitted
chore: design system tokens, workflows, updated cursorrules
- tailwind.config.ts: Add DESIGN_SYSTEM.md Clinical Luxury palette (asper-stone, rose-clay, burgundy, polished-gold, polished-white, asper-ink, asper-ink-muted) per DESIGN_SYSTEM.md spec - .cursorrules: Upgrade to full Brand Guardian mandate with 9-step APPLY_TO_MAIN_SITE table, design pillars, tech stack reference - .github/workflows/: Add deploy-health-check, sync-file-changes-to-lovable, sync-issues-prs-to-lovable from VIP folder (Step 7C) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 0d98af9 commit 2b62b5d

5 files changed

Lines changed: 208 additions & 20 deletions

File tree

.cursorrules

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,55 @@
1-
# Asper Beauty Shop — Cursor / Claude Code (understand-project)
1+
# Role & Mandate
22

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.
44

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.
66

7-
- **Repo:** asperpharma/understand-project
8-
- **Live site:** https://asperbeautyshop-com.lovable.app/
9-
- **Lovable project ID:** 657fb572-13a5-4a3e-bac9-184d39fdf7e6
7+
---
108

11-
## Design (mandatory for UI)
9+
# 1. APPLY_TO_MAIN_SITE
1210

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).
1712

18-
## When implementing
13+
When executing a push to the main site, strictly follow these 9 steps:
1914

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 |
2426

25-
## Env and deploy
27+
Cross-reference APPLY_TO_MAIN_SITE.md whenever preparing a release; do not give generic deployment lectures.
2628

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+
---
2930

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.
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Post-deploy health check for Asper Beauty Shop (main project)
2+
# Repo: asperpharma/understand-project
3+
# Live: https://asperbeautyshop-com.lovable.app/
4+
#
5+
# Runs on every push to main. Waits for Lovable to deploy, then pings the
6+
# frontend health URL. Optional: post result to Discord.
7+
#
8+
# SETUP: Copy this file into your understand-project repo at
9+
# .github/workflows/deploy-health-check.yml
10+
# Optional: Add Discord webhook in GitHub repo Settings → Secrets → Actions:
11+
# DISCORD_WEBHOOK_URL = https://discord.com/api/webhooks/...
12+
#
13+
name: Deploy health check
14+
15+
on:
16+
push:
17+
branches: [main]
18+
19+
jobs:
20+
health-check:
21+
runs-on: ubuntu-latest
22+
steps:
23+
- name: Wait for Lovable deploy
24+
run: |
25+
echo "Lovable will deploy from this push. Waiting 120s for build to complete..."
26+
sleep 120
27+
28+
- name: Check frontend health
29+
run: |
30+
SITE_URL="${SITE_URL:-https://asperbeautyshop-com.lovable.app}"
31+
HEALTH_URL="${SITE_URL%/}/health"
32+
echo "Checking $HEALTH_URL"
33+
HTTP_CODE=$(curl -s -o /dev/null -w '%{http_code}' --connect-timeout 10 "$HEALTH_URL" || true)
34+
if [ "$HTTP_CODE" = "200" ]; then
35+
echo "Health check OK (200)"
36+
echo "HEALTH_OK=true" >> $GITHUB_OUTPUT
37+
else
38+
echo "Health check returned HTTP $HTTP_CODE"
39+
echo "HEALTH_OK=false" >> $GITHUB_OUTPUT
40+
fi
41+
id: health
42+
env:
43+
SITE_URL: https://asperbeautyshop-com.lovable.app
44+
45+
- name: Notify Discord (optional)
46+
if: always() && secrets.DISCORD_WEBHOOK_URL != ''
47+
env:
48+
DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
49+
run: |
50+
if [ -n "$DISCORD_WEBHOOK_URL" ]; then
51+
STATUS="${{ steps.health.outputs.HEALTH_OK == 'true' && 'OK' || 'Check dashboard' }}"
52+
COMMIT="${{ github.sha }}"
53+
SHORT="${COMMIT:0:7}"
54+
curl -s -X POST "$DISCORD_WEBHOOK_URL" \
55+
-H "Content-Type: application/json" \
56+
-d "{\"content\": \"Deploy health: **$STATUS** | Commit \`$SHORT\` | https://asperbeautyshop-com.lovable.app\"}"
57+
fi
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Sync File Changes to Lovable (main project)
2+
# Repo: asperpharma/understand-project
3+
# Lovable: https://lovable.dev/projects/657fb572-13a5-4a3e-bac9-184d39fdf7e6
4+
#
5+
# On every push, sends lists of added/modified/removed files to Lovable via webhook.
6+
# SETUP: In GitHub repo → Settings → Secrets and variables → Actions, add:
7+
# LOVABLE_WEBHOOK_URL = (webhook URL from Lovable for file sync)
8+
#
9+
name: Sync File Changes to Lovable
10+
11+
on:
12+
push:
13+
branches:
14+
- '**' # triggers on all branches
15+
16+
jobs:
17+
sync_files_to_lovable:
18+
runs-on: ubuntu-latest
19+
steps:
20+
- name: Filter commit file changes and send to Lovable
21+
env:
22+
LOVABLE_WEBHOOK_URL: ${{ secrets.LOVABLE_WEBHOOK_URL }}
23+
run: |
24+
echo "Gathering lists of changed files..."
25+
ADDED=$(jq -r '.commits[].added[]?' "$GITHUB_EVENT_PATH" | sort | uniq | jq -R . | jq -s .)
26+
MODIFIED=$(jq -r '.commits[].modified[]?' "$GITHUB_EVENT_PATH" | sort | uniq | jq -R . | jq -s .)
27+
REMOVED=$(jq -r '.commits[].removed[]?' "$GITHUB_EVENT_PATH" | sort | uniq | jq -R . | jq -s .)
28+
PAYLOAD=$(jq -n \
29+
--arg repo "${{ github.repository }}" \
30+
--arg commit "${{ github.sha }}" \
31+
--arg sender "${{ github.actor }}" \
32+
--arg url "${{ github.event.compare }}" \
33+
--argjson added "$ADDED" \
34+
--argjson modified "$MODIFIED" \
35+
--argjson removed "$REMOVED" \
36+
'{repo: $repo, commit: $commit, sender: $sender, compare_url: $url, added: $added, modified: $modified, removed: $removed}')
37+
echo "Sending file changes to Lovable..."
38+
curl -X POST "$LOVABLE_WEBHOOK_URL" \
39+
-H "Content-Type: application/json" \
40+
-d "$PAYLOAD"
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Sync GitHub Issues and PRs to Lovable (main project)
2+
# Repo: asperpharma/understand-project
3+
# Lovable: https://lovable.dev/projects/657fb572-13a5-4a3e-bac9-184d39fdf7e6
4+
#
5+
# Sends issue/PR open, edit, reopen, close events to Lovable via webhook.
6+
# SETUP: In GitHub repo → Settings → Secrets and variables → Actions, add:
7+
# LOVABLE_WEBHOOK_URL = (webhook URL from Lovable, if provided)
8+
#
9+
name: Sync Issues and PRs to Lovable
10+
11+
on:
12+
issues:
13+
types: [opened, edited, closed, reopened]
14+
pull_request:
15+
types: [opened, edited, reopened, closed]
16+
17+
jobs:
18+
sync_to_lovable:
19+
runs-on: ubuntu-latest
20+
if: secrets.LOVABLE_WEBHOOK_URL != ''
21+
steps:
22+
- name: Send event data to Lovable
23+
env:
24+
LOVABLE_WEBHOOK_URL: ${{ secrets.LOVABLE_WEBHOOK_URL }}
25+
run: |
26+
echo "Sending event to Lovable..."
27+
PAYLOAD=$(jq -n \
28+
--arg event_name "${{ github.event_name }}" \
29+
--arg action "${{ github.event.action }}" \
30+
--arg repo "${{ github.repository }}" \
31+
--arg sender "${{ github.actor }}" \
32+
--arg url "${{ github.event.issue.html_url || github.event.pull_request.html_url }}" \
33+
--arg title "${{ github.event.issue.title || github.event.pull_request.title }}" \
34+
--arg body "${{ github.event.issue.body || github.event.pull_request.body }}" \
35+
'{event_name: $event_name, action: $action, repo: $repo, sender: $sender, url: $url, title: $title, body: $body}'
36+
)
37+
curl -s -X POST "$LOVABLE_WEBHOOK_URL" \
38+
-H "Content-Type: application/json" \
39+
-d "$PAYLOAD"
40+
echo "Done."

tailwind.config.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,32 @@ export default {
5757
light: "hsl(var(--gold-light))",
5858
dark: "hsl(var(--gold-dark))",
5959
},
60+
// ── DESIGN_SYSTEM.md — Clinical Luxury palette ──────────────────
61+
// Primary canvas — warm ivory / light gray (no pure #FFF)
62+
'asper-stone': {
63+
DEFAULT: '#F2EFEB',
64+
light: '#F8F6F3',
65+
dark: '#E8E4DE',
66+
},
67+
// Feminine softness — muted pink / terracotta
68+
'rose-clay': {
69+
DEFAULT: '#C4A494',
70+
light: '#D4B8A8',
71+
dark: '#A88B7A',
72+
},
73+
// Primary actions, nav, authority — Deep Burgundy
74+
'burgundy': {
75+
DEFAULT: '#6B2D3A',
76+
light: '#8B3D4A',
77+
dark: '#4F222C',
78+
},
79+
// Accent only — borders, hover ("Midas Touch"), icons
80+
'polished-gold': '#C9A962',
81+
'polished-white': '#FAF9F7',
82+
// Primary text — no pure #000
83+
'asper-ink': '#2C2825',
84+
'asper-ink-muted': '#5C5652',
85+
// ────────────────────────────────────────────────────────────────
6086
"lab-zone": "hsl(var(--lab-zone))",
6187
sidebar: {
6288
DEFAULT: "hsl(var(--sidebar-background))",

0 commit comments

Comments
 (0)