---
name: malbeek-standards
description: "استدعِه في أيّ مهمّة على منصّة ملبّيك (Malbeek) — Umrah campaign platform بـReact+Vite+Supabase RTL عربيّ. يشفّر معايير الهوية الموحّدة، نظام الثيم والـtokens، اللهجة السعودية البيضاء، خط ثمانية، الشعار الوحيد، خصوصية مساحة المشترك، منع النص الوهمي، responsive، والحدود الأمنية الصلبة. Triggers: أي تعديل UI/نص/ثيم/مكوّن/هجرة في malbeek-mvp."
---

# معايير منصّة ملبّيك (Malbeek) — مرجعٌ دائمٌ للوكيل

منصّةُ إدارة حملات العمرة. React + Vite + Supabase، عربيّ RTL. التزِم هذه المعايير في **كل** مهمّة.

## ١) الهوية البصريّة الموحّدة
- **زمرّديٌّ موحّد** (emerald) عبر كل المنصّة. أُلغيَ الذهبُ الزخرفيُّ تمامًا؛ رموزُ `--gd-*` تشير الآن للزمرّديّ في الوضعين. الأصفرُ للتحذيرات فقط (`--warn`).
- **شعارٌ واحدٌ فقط:** شعار ملبّيك الجديد. لا شعارات/أيقونات بديلة، لا تكرار، لا تداخل كلمات أو شعارات.
- **مكوّنات ملبّيك حصريّة:** استخدم مكوّنات المنصّة وأصنافها (`mlk-card`, `mlk-tab`, `mlk-list`, `stat`, `badge`, `chip`, `btn`, `BottomSheet`, `Icon`...). لا تُدخل مكتبات UI خارجيّة (shadcn/MUI/إلخ) — التصميم بَصمةٌ خاصّة.

## ٢) الثيم والـtokens (إلزاميّ)
- وضعان: غامقٌ افتراضيّ + فاتحٌ عبر `:root[data-theme="light"]`. التبديل في `ThemeToggle` (مفتاح `malbeek-theme`).
- **استعمل tokens دائمًا، لا ألوان مثبّتة hardcoded:** `var(--bg)`, `var(--surface)`/`--surface-2/3`, `var(--bg-card)`, `var(--line)`, `var(--cr-50/100/200/300)` (نصّ)، `var(--em-*)` (زمرّديّ)، `var(--gd-*)`، الدلالية `--ok/warn/danger/info` + `*-ink`.
- أي لون hex/rgb مباشر في JSX inline أو CSS خارج كتل الـtokens = **خطأ** (ينكسر في أحد الوضعين). الاستثناءات المقصودة فقط: الطباعة (الكشف/التقرير المالي = ورق أبيض)، التذكرة (ورقة)، خريطة المقاعد 3D، الباركود/QR.
- سطوح الوضع الفاتح **عائلةٌ نعناعيّةٌ باردة** (`#f4faf6`/`#eaf6ef`) — لا كريميّ دافئ. المودالات/الشيتات تتبع الثيم (فاتحة في الفاتح).
- **تحقّق بصريّ في الوضعين** قبل أي دمج.

## ٣) الخط والزخرفة
- **خط ثمانية (Thmanyah)** على كل المنصّة: `--font-sans:'Thmanyah'`، `--font-display:'Thmanyah Display'`، `--font-text:'Thmanyah Text'`. لا خطوط بديلة زائدة.
- لا زخرفة لغويّة أو بصريّة زائدة. بساطةٌ نظيفة.

## ٤) اللهجة (النصوص)
- **سعوديّة بيضاء بشريّة:** واضحة، دافئة، حديثة، احترافيّة، سهلة القراءة.
- **بلا تشكيلٍ ثقيل** ولا صياغةٍ فصيحةٍ متكلّفة ولا زخرفةٍ لغويّة. لا تُغيّر المعنى/السياق.
- وصفُ المنصّة احترافيٌّ وسهل. لا تكرار، لا تداخل كلمات/شعارات.

## ٥) خصوصيّة وهويّة الإدارة
- **لا اسمٌ شخصيٌّ في الواجهة إطلاقًا.** المالك/الأدمن يُعرَض **«إدارة ملبّيك»**. الموظّفون الفعليّون (دعم/عمليّات) بأسمائهم الوظيفيّة فقط.
- **مساحة المشترك خاصّة:** لها هويّتها داخل إطار ملبّيك؛ احترم خصوصيّتها ولا تسرّب بيانات بين الحملات.
- لا بيانات وهميّة/نص placeholder ظاهر للمستخدم. أرقامٌ حقيقيّةٌ من القاعدة، أو حالة فارغة لطيفة.

## ٦) Responsive — الجوّال والكمبيوتر منفصلان
- ديسكتوب + جوال. اختبر فعليًّا على **٣٩٠px** + ديسكتوب: صفر تجاوز أفقيّ، صفر تكسّر، FAB «إضافة» في وسط الشريط السفلي.
- **مبدأ الفصل (قرار المالك ٢٠٢٦-٠٧-٠٨):** أيّ إصلاحٍ لشاشة الكمبيوتر يجب ألّا يمسّ الجوّال والعكس — استعمل media queries (`min-width`/`pointer`) لا تعديلات القواعد المشتركة.
- **تفاعلات اللمس (سحب/جرّ) للمس حصرًا:** فعِّلها خلف `matchMedia('(pointer: coarse)')` وأخفِ تلميحاتها بـ`@media (pointer: fine)` — جرُّ الفأرة على الكمبيوتر يعلّق الصفوف ويحدّد النصّ (درسُ SwipeStatusRow).
- **العدّادات المدمجة (`.stat-bar`) على الكمبيوتر:** مقيَّدة `max-width:680px` عند `min-width:1100px` كي لا تتناثر عبر الشاشة العريضة.

## ٧) الحدود الأمنيّة الصلبة (لا تتجاوزها أبدًا بلا إذن صريح)
- **لا إرسال فعليّ** (واتساب/بريد) — الأزرار معطّلةٌ موثّقة. **لا دفع فعليّ.** **لا إنشاء حسابات حقيقيّة.** **لا DDL متلف** (إضافيٌّ فقط).
- RLS: العميل يعدّل تقييمه هو فقط (راكبٌ فعليّ)؛ المدير لا يمسّ تقييم العميل له. الأدمن مفصولٌ بـ`my_role()='admin'`/`has_perm()`. تحقّق `get_advisors` بعد أي هجرة (ERROR يجب أن يبقى ثابتًا).

## ٨) سير العمل لكل وحدة
فرع → بناء `npm run build` نظيف → معاينة Playwright فعليّة (الوضعان + ٣٩٠px وديسكتوب) → `apply_migration` عبر MCP لو لزم + `get_advisors` → PR + دمج بعد التحقّق → تقرير مرقّم في «تقارير عمل منصة ملبّيك». **لا تقل «تمام» إلا بعد تحقّقٍ بصريٍّ فعليّ.** التواصل مقتضب (صمتٌ افتراضيّ، تقريرٌ عند الإنجاز).

## التحقّق البصريّ الحيّ (إلزاميّ قبل الدمج)
استخدم سكِل **`webapp-testing`** (Playwright) للتحقّق الفعليّ — لا تكتفِ بالبناء:
- بدّل الثيم فعليّاً وافحص **الوضعين**؛ اختبر على **٣٩٠px + ديسكتوب** (صفر تجاوز أفقيّ، صفر عنصر داكن شاذّ في الفاتح، FAB في الوسط).
- سجّل الدخول بحسابات `test+admin/manager/sub/support/pilgrim@mulabeek.com`، تنقّل بعدوانيّة، وارصد `console.error` بالـstack الكامل.
- عند أي انهيار: `ErrorBoundary` يحفظ التفاصيل في `localStorage['mlk:last-error']` ويعرض «تفاصيل تقنية» — استخرج الرسالة + component stack لتحديد السبب الجذريّ.

## مراجع السكِلز المرافقة
- `supabase` + `supabase-postgres-best-practices` — RLS/هجرات/أمن/أداء.
- `frontend-design` — اتجاه بصريّ. · `web-artifacts-builder` — بناء React/Tailwind.
- `webapp-testing` — اختبار Playwright (التحقّق الحيّ). · `skill-creator` — تأليف سكِلز جديدة لملبّيك.
- ملف المصادر: `Desktop/skills.md`.