# نظام تصميم واجهات المستخدم العربية (mcp-arabic-ui-ux)

[![npm version](https://img.shields.io/npm/v/mcp-arabic-ui-ux.svg?color=6750A4)](https://www.npmjs.com/package/mcp-arabic-ui-ux)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![MCP Protocol](https://img.shields.io/badge/MCP-1.0.1-purple.svg)](https://modelcontextprotocol.io)

خادم **MCP (Model Context Protocol)** عالي الدقة متخصص في تصميم وبناء واجهات المستخدم باللغة العربية مع الدعم الكامل والفيزيائي للاتجاه من اليمين إلى اليسار (Native RTL)، بناءً على معايير **Material 3 Expressive** وجودة **Google Stitch**.

---

## 🌟 المميزات الرئيسية

- **معمارية RTL أولاً (Logical Properties First)**: التحويل التلقائي لاستخدام الخصائص المنطقية (`ms-*`, `pe-*`, `start-*`, `text-start`) بدلاً من الخصائص الفيزياء الثابتة.
- **جماليات Material 3 Expressive**: حاويات بحواف دائرية تعبيرية (`28px`), تباينات ألوان مدروسة متوافقة مع معايير الوصول الشامل (WCAG AAA).
- **محرك الخطوط العربية (Typography Engine)**: حماية المسافات العمودية للخطوط العربية (Descender Protection) بنسب ارتفاع أسطر تراوح بين `1.6` و `1.8` واستخدام خطوط `Tajawal`, `Cairo`, و `Readex Pro`.
- **فحص الامتثال والتصحيح (RTL Audit & Fix)**: أداة تحليل ذكية لاكتشاف الأخطاء وتصحيح الاتجاهات الفيزيائية الخاطئة في الكود.

---

## 📦 التثبيت والاستخدام

### التثبيت المباشر عبر npm

```bash
npm install -g mcp-arabic-ui-ux
```

أو تشغيله مباشرة عبر `npx`:

```bash
npx mcp-arabic-ui-ux
```

---

## ⚙️ التجميع والإعداد مع بيئات الذكاء الاصطناعي (AI Clients)

### 1. Claude Desktop

أضف الإعدادات التالية إلى ملف `claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "arabic-ui-ux": {
      "command": "npx",
      "args": ["-y", "mcp-arabic-ui-ux"]
    }
  }
}
```

### 2. Antigravity IDE / Cursor

أضف الإعدادات إلى ملف إعدادات MCP الخادمي:

```json
{
  "mcpServers": {
    "arabic-ui-ux": {
      "command": "node",
      "args": ["/path/to/mcp-arabic-ui-ux/dist/index.js"]
    }
  }
}
```

---

## 🛠️ الأدوات المتاحة (Tools)

### 1. `generate_arabic_design_tokens`
توليد حزمة رموز تصميم (Tokens) متوافقة مع الأنماط العربية و Material 3.
- **المعاملات**:
  - `theme`: `"material-3-expressive"` | `"minimalist-dark"` | `"warm-beige-dashboard"`
  - `primaryColor` *(اختياري)*: لون الأساس (مثال: `#6750A4`)

### 2. `build_arabic_ui_component`
بناء مكونات تفاعلية جاهزة باللغة العربية تدعم RTL كلياً.
- **المعاملات**:
  - `componentType`: `"stat-card"` | `"navigation-bar"` | `"user-list-item"` | `"action-modal"` | `"dashboard-widget"`
  - `title`: عنوان المكون
  - `subtitle` *(اختياري)*: النص الفرعي
  - `theme`: نسق التصميم المطلوب

### 3. `stitch_arabic_layout`
تجميع صفحة كامة وتطبيق تنسيقات Google Stitch للواجهات العربية.
- **المعاملات**:
  - `layoutName`: اسم الصفحة أو اللوحة
  - `sections`: مصفوفة بأسماء الأقسام
  - `theme`: نسق التصميم

### 4. `audit_rtl_ui_compliance`
فحص كود الواجهات والتأكد من عدم وجود خصائص فيزيائية متعارضة مع الاتجاه العربي.
- **المعاملات**:
  - `codeSnippet`: كود HTML / Tailwind المراد فحصه

---

## 📚 المصادر والقوالب (Resources & Prompts)

- **Resource**: `arabic-ui://design-systems/m3-expressive` - مواصفات نظام تصميم Material 3 Expressive RTL.
- **Prompt**: `design_arabic_dashboard` - قالب توجيهي جاهز لإنشاء لوحة تحكم فاخرة.

---

## 📄 الترخيص (License)

هذا المشروع مرخص بموجب [رخصة MIT](LICENSE).